Scaffold an AngularJS App with Yeoman

Notes from this morning's scaffolding an AngularJS with Yeoman demo at AngularJS training session at Development Innovations in Phnom Penh. It follows the fantastic Let's Scaffold a Web App with Yeoman code lab tutorial.

Yeoman makes web developers productive by generating basic application directories and writing various configuration files. Grunt and Bower are used for build and package management.

Yeoman is installed using Node package manager (npm). In this post I install Node.js using Node version manager (NVM) tool . You can also install npm via package manager of your operating system.

# Run the Node.js version manager(NVM) Installation script 
$ curl https://raw.githubusercontent.com/creationix/nvm/v0.17.3/install.sh | bash

# Active the Node.js version manager (NVM) 
$ source ~/.nvm/nvm.sh

# Install the stable version of Node.js 
$ nvm install v0.10.32

# Install Yeoman 
$ npm install -g yo 

# Install the AngularJS generator.
$ npm install install -g generator-angular


# Let's create a directory for our TODO AngularJS app and change directory into it.
$ mkdir todo 
$ cd todo 

# Scafold AngularJS  App
$ yo angular 

# The AngularJS generator following directory structure 

$ tree -L 1 -a 
.
├── app
├── bower_components/
├── bower.json
├── .bowerrc
├── .editorconfig
├── .gitattributes
├── .gitignore
├── Gruntfile.js
├── .jshintrc
├── node_modules/
├── package.json
├── test
└── .travis.yml

# Start the development server. 
$ grunt serve  

# Additional packages can be fetched and installed using bower.
$ bower install --save jquery-ui

# Let's build your code 
$ grunt 

# One final check before deployment. Serve the production server. 
$ grunt serve:dist