Overview of Angular Generators – April 2014

April 19, 2014 (10y ago)

This is a short and opinionated review of the AngularJS generators on npm as of April 19th, 2014.

There are a lot of generators on npm and it's a little hard to decide which one to use or fork, since we don't want to reinvent the wheel. Currently the only way to compare them is to try them one by one and that's a very time consuming task. In this post I'll try to give you an overview of some generators I've explored recently hoping it will save you some time. I’ll follow Cliff Meyer's Code Organization Categorization to describe their code structure.

Most generators still use the "Sock Drawer" directory organization, an approach that I personally avoid, it doesn't scale well but it works for small projects. I prefer a modular structure as suggested on latest Google's Best Practice Recommendations for Angular App Structure.

Some of the benefits of modularization are:

Encapsulation: Code, styles and tests related to specific feature will be contained on the same directory.
Context: Code lives in given context by feature. This is specially important to developers new to the application, who will find it easier to connect the dots.
Code Reusabilty: You would be able to reuse modules across projects and clients, Eg mobile and web-client could share autentication modules or resources ( models ).

Here's a list of Angular generators and their characteristics (some of them are fullstack generators):

generator-angular v0.8.0

The angular generator maintained by the yeoman members. It generates all the boilerplate you need to get started and has subgenerators to scaffold the different angular object types. The app generator also optionally installs Bootstrap and additional AngularJS modules.

  • build system: grunt
  • code organization: sock drawer
  • subgenerators: angular controllers, directives, filters, routes, services, providers, factories, values, constants, decorators and views. --coffee flag in case you prefer to use CoffeeScript
  • dependency mgr: bower
  • testing: karma for unit and E2E tests
  • css preprocessors: optional sass with compass
  • deployment: false
  • optimization: true
  • continuous integration: travis
  • live reload: true
  • source_maps: false
  • modules: optional angular-resource, angular-cookies, angular-sanitize, angular-route. not optional angular-mocks,angular-scenario
  • code linting: jshint src and tests
  • goodies: autoprefixer, editorconfig, cache buster
  • optional Twitter Bootstrap
  • by default, new scripts are added to the index.html file. optional --skip-add
  • automatically runs npm install and bower install
  • static node server

maintained by Yeoman Members
npm: https://www.npmjs.org/package/generator-angular
github: https://github.com/yeoman/generator-angular

##generator-angular-fullstack v1.4.2

Yeoman generator for creating MEAN stack applications: MongoDB, Express, AngularJS, and Node. It is based on generator-angular,it also has subgenerators to scaffold the different angular object types and it optionally installs Bootstrap, additional AngularJS modules and MongoDB integration with Mongoose.

  • build system: grunt
  • code organization: sock drawer
  • subgenerators: angularjs subgenerators for controllers, directives, filters, routes, services, providers, factories, values, constants, decorators and views. And a fullstack subgenerator for deployment.
  • dependency mgr: bower
  • testing: karma for unit and E2E tests
  • css preprocessors: optional sass with compass
  • deployment: easy deployment workflow. OpenShift, Heroku, custom
  • optimization: true
  • continuous integration: travis
  • live reload: client and server files
  • source_maps: false
  • modules: optional angular-resource, angular-cookies, angular-sanitize, angular-route. not optional angular-mocks, angular-scenario
  • code linting: jshint src and tests
  • goodies: autoprefixer, cdnify
  • optional Twitter Bootstrap
  • optional MongoDB integration with Mongoose
  • support for Jade and CoffeeScript
  • optional Passport integration for adding user accounts
  • express server integrated with grunt tasks
  • autorun npm install and bower install
  • by default, new scripts are added to the index.html file. optional --skip-add

maintained by daftmonk
npm: https://www.npmjs.org/package/generator-angular-fullstack
github: https://github.com/DaftMonk/generator-angular-fullstack

generator-cg-angular v3.0.3

A generator for large applications. Organize code however the developer wishes. All subgenerators prompt the user for the directory to place the created files. Fully supports Angular's Best Practice Guidelines for app structure.

  • build system: supports grunt and gulp
  • code organization: In v3.0, all subgenerators for partials, services, directives, and filters, allow the user to specify where to save the new files, thus you can create your own directory structure (including nesting) as you desire.
  • subgenerators: angularjs subgenerators for directives, partials, service, filters and modules
  • dependency mgr: bower
  • testing: grunt-contrib-jasmine, Headless testing with Jasmine, PhantomJS
  • css preprocessors: Less
  • deployment: false
  • optimization: true
  • continuous integration: false
  • live reload: true
  • source_maps: false
  • modules: optional ui-router. not optional angular-animate, angular-resource, angular-cookies, angular-mocks, angular-ui-utils, angular-bootstrap
  • code linting: jshint src and tests
  • goodies: editorconfig
  • appName prompt
  • autorun npm install and bower install

maintained by cgross
npm: https://www.npmjs.org/package/generator-cg-angular
github: https://github.com/cgross/generator-cg-angular

generator-boom v0.1.8

Boom uses Gulp instead of Grunt, Protractor (E2E tests) and BrowserSync is pre-configured. Good Stuff!

  • build system: gulp
  • code organization: Sock Drawer code organization by default
  • subgenerators: angularjs subgenerators for controllers, directives, filters, routes, services, providers, factories, values, constants, decorators and views. Constants and Values will be added in main.js (No new file will be created). Adding Routes will also create and link the css and controller in their respective folders. Subgenerators for fonts, styles and views and tests.
  • dependency mgr: bower
  • testing: Protractor (E2E tests) pre-configured
  • css preprocessors: sass
  • deployment: false
  • optimization: true
  • continuous integration: false
  • live reload: true
  • source_maps: false
  • modules: optional angular-resource, angular-cookies, angular-sanitize, angular-route, angular-animate, angular-ui(ui-utils, bootstrap, ui-router, ng-grid)
  • code linting: jshint src and tests
  • goodies: editorconfig, browsersync pre-configured
  • development and production code are separated
  • optional jquery or zepto
  • optional modernizr
  • FontFace - Add @fontface on fly
  • Share code with client using command gulp zip (Will create the .zip file of build folder)
  • static node server
  • autorun npm install and bower install

maintained by aamirshah
npm: https://www.npmjs.org/package/generator-boom
github: https://github.com/aamirshah/generator-boom

generator-meanjs v0.0.8

MEAN.JS is a full-stack JavaScript solution, which provides a solid starting point for MongoDB, Node.js, Express, and AngularJS based applications. The idea is to solve the common issues with connecting those frameworks, build a robust framework to support daily development needs, and help developers use better practices while working with popular JavaScript components.

  • build system: grunt
  • code organization: modular
  • subgenerators: Subgenerators for Angular and Express: crud-module, angular-module, angular-route, angular-controller, angular-view, angular-service, angular-directive, angular-filter, angular-config, angular-test, express-model, express-controller, express-route, express-test
  • dependency mgr: bower
  • testing: unit tests with karma
  • css preprocessors: false
  • deployment: false
  • optimization: false
  • continuous integration: travis
  • live reload: true
  • source_maps: false
  • modules: optional angular-resource, angular-cookies, angular-sanitize, angular-route, angular-touch, article crud. not optional angular-mocks
  • code linting: jshint src and tests
  • goodies: procfile
  • appName, description and author prompts
  • autorun npm install and bower install

maintained by amoshaviv
npm: https://www.npmjs.org/package/generator-meanjs
github: https://github.com/meanjs/generator-meanjs

Here's the explanation about Mean.js and Mean.io - http://tmblr.co/Z7XDmo17TG_o4

generator-hyper-angular v0.1.6

HyperAngular (generator-hyper-angular) is a Yeoman generator for AngularJS/Express/node.js apps emphasizing modularity, configuration, and testing. It's designed to provide plenty of tooling to help you code expressively at all scales, while putting up railings to keep your code consistent and clean. It stamps out a simple application that tests itself and self-documents the structure of the generated template

  • build system: grunt
  • code organization: sock drawer
  • subgenerators: false
  • dependency mgr: bower
  • testing: unit test with karma and e2e with protractor
  • css preprocessors: less
  • deployment: false
  • optimization: true
  • continuous integration: travis
  • live reload: true
  • source_maps: false
  • modules: optional angular-ui-router. not optional angular-resource, angular-mocks
  • code linting: jshint src and tests
  • goodies:
  • appName prompt
  • prompts for protocol, host and port
  • prompt for Github user and License
  • autorun npm install and bower install

maintained by jprystowsky
npm: https://www.npmjs.org/package/generator-hyper-angular
github: https://github.com/jprystowsky/generator-hyper-angular

slush-angular v0.3.0

A slush generator for AngularJS using the Google Angular App Structure Recommendations. This is not a yeoman generator, it is built with slush a gulp based alternative to yeoman. You can choose between LESS, Stylus, and Sass to use as the CSS Preprocessor.

  • build system: gulp
  • code organization: modular
  • subgenerators: false
  • dependency mgr: bower
  • testing: unit tests with karma
  • css preprocessors: Stylus, Less, Sass
  • deployment: false
  • optimization: true
  • continuous integration: false
  • live reload: true
  • source_maps: false
  • modules: not optional angular-route, angular-route
  • code linting: jshint src and tests
  • goodies: optional todoList example, csslint, editorconfig, lazypipe
  • appName prompt
  • autorun npm install and bower install

maintained by: joakimbeng
npm : https://www.npmjs.org/package/slush-angular
github: https://github.com/klei/slush-angular

generator-ngbp v0.0.5

Yeoman generator based on the ngBoilerplate kickstarter, a best-practice boilerplate for scalable Angular projects built on a highly modular, folder-by-feature structure.

  • build system: grunt
  • code organization: modular
  • subgenerators: only one subgenerator at the moment ngbp:module
  • dependency mgr: bower
  • testing: unit tests with karma
  • css preprocessors: Less
  • deployment: false
  • optimization: true
  • continuous integration: false
  • live reload: true
  • source_maps: false
  • modules: optional angular-resource. not optional angular-ui-router, angular-bootstrap, angular-mocks
  • code linting: jshint src and tests
  • goodies: autoprefixer, editorconfig, cache buster
  • appName prompt
  • prompt for copyright in html
  • coffeeScript support

maintained by: thardy
npm : https://www.npmjs.org/package/generator-ngbp
github: https://github.com/thardy/generator-ngbp

generator-gulp-ng v1.0.1

This is a yeoman generator for an angularjs project that follows the Best Practice Recommendations for Angular App Structure. It takes advantage of the gulp build tool and makes use of bower and npm for dependency management.

  • build system: gulp
  • code organization: modular *follows google's best practices document
  • subgenerators: no subgenerators
  • dependency mgr: bower
  • testing: unit tests with karma
  • css preprocessors: false
  • deployment: false
  • optimization: true
  • continuous integration: false
  • live reload: true
  • source_maps: false
  • modules: not optional angular-route
  • code linting: jshint src and tests
  • goodies: template cache

maintained by: henyojess
npm : https://www.npmjs.org/package/generator-gulp-ng
github: https://github.com/henyojess/generator-gulp-ng

generator-klei v0.4.3

A Yeoman generator for generating module or app boilerplates! MEAN-stack (all parts optional) with scalability in mind and with Grunt and Bower sweetness.

  • build system: grunt
  • code organization: modular
  • subgenerators: klei:api
  • dependency mgr: bower
  • testing: unit tests with karma
  • css preprocessors: stylus
  • deployment: false
  • optimization: true
  • continuous integration: false
  • live reload: true
  • source_maps: false
  • modules: not optional angular-route, angular-mocks, restangular
  • code linting: jshint src and tests
  • goodies: optional todo list example, editorconfig, csslint, template cache
  • appName prompt
  • optional REST API scaffolding with Express
  • optional MongoDB with Mongoose
  • autorun npm install and bower install

maintained by: joakimbeng
npm : https://www.npmjs.org/package/generator-klei
github: https://github.com/klei-dev/generator-klei

For more AngularJS generators go to @substack’s npmsearch.com and “type angular & yeoman-generator” or click here.
There's also Yeoman Community Generators Search

Happy Forking! You may also want to create your own yeoman generator

I published this repo https://github.com/gaboesquivel/angular-generators to hold this information until we have a better way to search and filter generators. If you'd like update information of one of the generators listed or add a new one go ahead and PR.

Please leave your comments. :)