Building a Source Code Generator with AngularJS

If you are looking for generating scaffold for AngularJS, this is not what this blog post about. This blog post is about generate source code with AngularJS.

The principle of creating source code generators is pretty simple (details here): a model, a template, and a driver. Given:

1. HTML5 can access to local files as the data model
2. AngularJS has its template language
3. JavaScript is the driver

The following code in JSFiddle takes a tab delimited (3 columns) file to generate a Oracle script:


The syntax highlighting is done by SHJS.

Since it takes any JavaScript object as the model, other potential input formats are JSON and XML (with aid of some library). This is a lightweight cross-platform source code generator.

Building a Source Code Generator II

Last article described the basic infrastructure of writing a source code generator. The design is now implemented in Codejen Framework and available in SourceForge.net.

Building a Source Code Generator I

Recall the following components to build a source code generator:

1. A model that describe your application - you don't need to define it yourself, you can use XMI or XML schema as the reference model. The only problem is how you parse them to the object model.
   
2. A template engine - Velocity or Freemaker are good template engines in Java.
   
3. Templates that corresponding to the model - Generate code Java, PHP, C#, etc.
   
4. A configuration of templates - There would be configurations for desktop app, web app, RIA, or web services, etc.
   
5. A parser that parse the configuration - If the configuration is an XML file, Apache's commons-digester library can help.
6. A driver to glue up everthing.
7. Optionally, a validator for the template is good - JavaCC or ANTRL for syntax validation. For the extreme, use a compiler to verify the correctness of the generated code.
   

The diagram on the left included the classes designed for #4 to #7.

• CodeGenerator - the parser of the configuration file and the driver gluing up everything.
  
• TemplateConfiguration - an list of template that can stores the properties specified in the XML file.
• Template - a class representing the state of a template.
• TemplateProcessor - processor that may perform validation or beautification of the generated code.

With this general source code generator, it can be adapted to use with other CASE tools (e.g. Visual-Paradigm).

Example configuration XML:

<profile>
<property key="asdf" value="1" />
<property key="templateDir" value="x ${asdf}" />
<template class="org.sf.codejen.test.TestTemplate" a="${templateDir}">
 <postProcessorFactory class="org.sf.codejen.test.TestProcessorFactory" b="jkl;" />
</template>
</profile>

The required attributes are

• profile/property - key and value
• profile/template - class
• profile/template/postProcessorFactory - class

All other attributes are optional depends on the class design.
Also, if you are familiar with ANT, you can use ${propKey} style to access the property value.

How to build a source code generator

1. A model that describe your application - you don't need to define it yourself, you can use XMI or XML schema as the reference model. The only problem is how you parse them to the object model.
   
2. A template engine - Velocity or Freemaker are good template engines in Java.
   
3. Templates that corresponding to the model - Generate code Java, PHP, C#, etc.
   
4. A configuration of templates - There would be configurations for desktop app, web app, RIA, or web services, etc.
   
5. A parser that parse the configuration - If the configuration is an XML file, Apache's commons-digester library can help.
   
6. A driver to glue up everthing.
7. Optionally, a validator for the template is good - JavaCC or ANTRL for syntax validation. For the extreme, use a compiler to verify the correctness of the generated code.