Generating AngularJS Boilerplate code with Yeoman

I came across a cool generator for AngularJS boilerplate code while doing some research on testing. It’s called Yeoman. It works in much the same way as ruby on rails, to set up the boring pieces of your projects and to follow a standard directory structure. I guess this encourages convention over configuration like in RoR.

Installation

It can be installed using the Node Package Manager:

$ sudo npm install -g generator-angular

$ yo
[?] What would you like to do? (Use arrow keys)
❯ Run the Angular generator (0.10.0)
Run the Karma generator (0.8.3)
Update your generators
Install a generator
Find some help
Get me out of here!

Usage

$ yo angular

Out of the box I include Bootstrap and some AngularJS recommended modules.

[?] Would you like to use Sass (with Compass)? No
[?] Would you like to include Bootstrap? Yes
[?] Which modules would you like to include? (Press <space> to select)
❯⬢ angular-animate.js
⬡ angular-aria.js
⬢ angular-cookies.js
⬢ angular-resource.js
⬡ angular-messages.js
⬢ angular-route.js
⬢ angular-sanitize.js
⬢ angular-touch.js

You can see it prompts you to include things like bootstrap and compass. You can also select exactly the modules you want to include (ngRoute, ngAnimate etc).

It then goes and creates the following files:

create app/styles/main.css
create app/index.html
create bower.json
identical .bowerrc
create package.json
create Gruntfile.js
invoke angular:common:/usr/local/lib/node_modules/generator-angular/app/index.js
identical .editorconfig
identical .gitattributes
identical .jshintrc
identical .gitignore
create test/.jshintrc
create app/.buildignore
create app/.htaccess
create app/404.html
create app/favicon.ico
create app/robots.txt
create app/views/main.html
create app/images/yeoman.png
invoke angular:main:/usr/local/lib/node_modules/generator-angular/app/index.js
create app/scripts/app.js
invoke angular:controller:/usr/local/lib/node_modules/generator-angular/app/index.js
create app/scripts/controllers/main.js
create test/spec/controllers/main.js
invoke karma:app
I'm all done. Running bower install & npm install for you to install the required dependencies. If this fails, try running the command yourself.
invoke angular:route
invoke angular:controller:/usr/local/lib/node_modules/generator-angular/route/index.js
create app/scripts/controllers/about.js
create test/spec/controllers/about.js
invoke angular:view:/usr/local/lib/node_modules/generator-angular/route/index.js
create app/views/about.html
create test/karma.conf.js

It uses bower to install the js dependencies (that is angular.js, angular-animate.js etc) and a couple of other things. The configuration of the required node components will be  kept in package.json and those of bower in bower.json. Out of interest they look like this:

$  cat package.json
{
  "name": "angtest",
  "version": "0.0.0",
  "dependencies": {},
  "devDependencies": {
    "grunt": "^0.4.1",
    "grunt-autoprefixer": "^0.7.3",
    "grunt-concurrent": "^0.5.0",
    "grunt-contrib-clean": "^0.5.0",
    "grunt-contrib-concat": "^0.4.0",
    "grunt-contrib-connect": "^0.7.1",
    "grunt-contrib-copy": "^0.5.0",
    "grunt-contrib-cssmin": "^0.9.0",
    "grunt-contrib-htmlmin": "^0.3.0",
    "grunt-contrib-imagemin": "^0.8.1",
    "grunt-contrib-jshint": "^0.10.0",
    "grunt-contrib-uglify": "^0.4.0",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-filerev": "^0.2.1",
    "grunt-google-cdn": "^0.4.0",
    "grunt-newer": "^0.7.0",
    "grunt-ng-annotate": "^0.4.0",
    "grunt-svgmin": "^0.4.0",
    "grunt-usemin": "^2.1.1",
    "grunt-wiredep": "^1.7.0",
    "jshint-stylish": "^0.2.0",
    "load-grunt-tasks": "^0.4.0",
    "time-grunt": "^0.3.1",
    "karma-phantomjs-launcher": "~0.1.4",
    "jasmine-core": "~2.1.3",
    "karma": "~0.12.31",
    "karma-jasmine": "~0.3.4",
    "grunt-karma": "~0.10.1"
  },
  "engines": {
    "node": ">=0.10.0"
  },
  "scripts": {
    "test": "grunt test"
  }
}

$  cat bower.json
{
    "name": "angtest",
    "version": "0.0.0",
    "dependencies": {
    "angular": "^1.3.0",
    "json3": "^3.3.0",
    "es5-shim": "^4.0.0",
    "bootstrap": "^3.2.0",
    "angular-animate": "^1.3.0",
    "angular-cookies": "^1.3.0",
    "angular-resource": "^1.3.0",
    "angular-route": "^1.3.0",
    "angular-sanitize": "^1.3.0",
    "angular-touch": "^1.3.0"
  },
  "devDependencies": {
    "angular-mocks": "~1.3.0",
    "angular-scenario": "~1.3.0"
  },
  "appPath": "app"
}

Result

You can serve the resulting code with

$   grunt serve

And then visit localhost:9000 and get this:

 

 

 

As you can see, it’s ready to go and you can start pulling it apart to add in your own code. It has a few routes and controllers defined for you. The simples is strong in this one.

Custom Server

Yeoman uses grunt for all its task management such as serving, minimising js and so on. Its configuration is in Gruntfile.js. Grunt serve is fine for development, but when you want to host the code, you need to run grunt on its own, which creates a dist folder. The contents of that can then be served by whatever server. To verify you can try running python -mSimpleHTTPServer from the dist folder.