angen

#Angen ANgular Component GENerator and compiler.

Angen follows and provides a "one directive, one controller, one template" as a component perspective which makes your projects very flexible and reusable - it's really easy to implement new stuff, and / or drag and drop components into other projects.

This module is used to generatet these Angular components in an efficient, folder structured way, and then compile them in one JS and one style file, embedding everything else.

##Why? Because it's fast and effortless.
You can create a bunch of directives structured with just one command (or let Gulp do it), and maintain them via JSON configuration, relative paths, and require working for you in the controller.

##How? With angen you can do the following:

1. Install globally via npm: npm install -g angen
2. Generate multiple components in one line: angen header footer footer home auth auth/email auth/facebook
3. Play with your generated config, template, style and controller
4. Compile it into one Angular JS file: angen -c

You're done. You can find your files as angen.js and angen.scss, and you only need to include it into your project as angular.module("myProject", ["angen"])

It's highly customisable, you can rename the generated module, change output and compilation paths, use extra angen modules (such as angen-jade to generate and compile from Jade templates), and so on.

#CLI Angen comes with a CLI which you can use to generate and compile directives.

##Generating directives Generating directives is pretty straightforward. You need a list of the directives you need, pass it to Angen and see your project born.

Generating a directive will give you exactly four files - header as directive name which you provided in generating:

• config - header.json, this holds all the configuration for compiling your directive
• controller - header.js, a require module JavaScript file for controlling the directive
• template - header.html, it defaults to HTML and contains the "one root" of your directive
• style - header.scss, it defaults to SCSS and have the style definitions rooting back to your directive

You can generate them in a few ways:

1. Simple root directives

   angen test test2
   

   Outputs

   generated
       /test
           test.html
           test.js
           test.json
           test.scss
       /test2
           test2.html
           test2.js
           test2.json
           test2.scss
   

   You can reference to these directives as

   test, as <test>
   test2 as <test2>
   

2. Child directives

   angen test test/test2 test/test2/test3
   

   Outputs

   generated
       /test
           test.html
           test.js
           test.json
           test.scss
           /test2
               test2.html
               test2.js
               test2.json
               test2.scss
               /test3
                   test3.html
                   test3.js
                   test3.json
                   test3.scss
   

   You can relative reference children, and absolute reference other directives from every component. There's no back-reference.

   From anywhere to reference test: <test>
   From anywhere to reference test2: <test-test2>
   From anywhere to reference test3: <test-test2-test3>
   From test to reference test2: <test2>
   From test to reference test3: <test2-test3>
   From test2 to reference test3: <test3>
   From test3 to reference test2: <test-test2>
   

3. Child directives without real parent - Please note that the directive "test" will only be a parent folder, not an actual directive.

   angen test/test2
   

   Outputs

   generated
       /test
           /test2
               test2.html
               test2.js
               test2.json
               test2.scss
   

   You can reference only <test-test2>, as there's no <test> existing.

Flags

• -o or --out as different output folder. By default angen saves directives into the "generated" folder, you can overwrite it.

  angen -o myGeneratedFolder test
  angen --out myGeneratedFolder test
  

  Outputs

  myGeneratedFolder
      /test
          test.html
          test.js
          test.json
          test.scss
  

• -t or --template change template language. Default template is "html". Please check which templates are available. You don't have to install the Jade module for generating Jade templates.

  // Generates "generated/test" with Jade template
  angen -t jade test
  angen --template jade test
  

  Outputs

  generated
      /test
          test.jade
          test.js
          test.json
          test.scss
  

• --verbose or --logs to see a verbose output.

  // Generates with verbose output
  angen --verbose
  angen --logs
  

• -v or --version to see the current version.

  // Check current version
  angen -v
  angen --version
  

##Compiling directives For compiling you have to use the -c or --compile flag or argument.

It by default will compile the directives in the generated folder. If you provide a folder name after the flag, it will look for directives in that folder and compile them to the same folder.

Two files will be generated by default, angen.js and angen.scss which you have to include into your project.

From the following structure

generated
    /home
        home.html
        home.js
        home.json
        home.scss
        /social
            social.html
            social.js
            social.json
            social.scss

The script will generate

generated
    angen.js
    angen.scss

And these directives will be generated for use:

home, as <home>
homeSocial, as <home-social>

Flags and modules

• -o or --out as a different output folder. By default angen save compiled files into the "generated" folder, you can overwrite it.

  angen -c -o myCompiledFolder
  angen --compile --out myCompiledFolder
  

  Outputs

  myCompiledFolder/angen.js
  myCompiledFolder/angen.scss
  

• -a or --app or one extra unassigned parameter as the name of the angen angular module.

  angen -c -a myApp
  angen --compile --app myApp
  angen myApp -c
  

• --verbose or --logs to see a verbose output.

  // Compiles with verbose output
  angen -c --verbose
  angen --compile --logs
  

• -v or --version to see the current version.

  // Check current version
  angen -v
  angen --version
  

• Using angen modules - Note that you have to install these modules via npm before use.

  angen -c -u angen-jade
  angen --compile --use angen-jade
  

#API The usage of API is nearly the same as the CLI.

1. Install locally via npm: npm install angen
2. Require it as var angen = require("angen");
3. Call it as angen(options, callback) where options is an object of parameters and in the callback you'll receive files with the path and content*.
4. For module use you should call angen.use(module) where module is a required angen module, like var module = require("angen-jade");

*With the call angen({additional: ["test"]}, function (items) {});, you will receive an object in the items like this:

Object {
  "generated/test/test.html": String, // String of file
  "generated/test/test.js": String,
  "generated/test/test.json": String,
  "generated/test/test.scss": String,
}

With the call angen({compile: true}, function (items) {});, you will receive an object in the items like this:

Object {
  "generated/angen.js": String,
  "generated/angen.scss": String,
}

#Supported formats List of available formats.

Templates

• HTML
• Jade

Styles

• SCSS

Scripts

• JavaScript

Config

• JSON

#Build tools and extensions Build tools for generating and compiling with Angen are the easiest way to operate. Feel free to make Angen work for other build tools.

Extensions are to work with Angen as supporting additional formats, etc.

• gulp-angen build extension for Gulp
• angen-jade: Use for compiling Jade to HTML into compiled angen files.