How to create a brand new angularjs app with yeoman
Do you yeoman ? No ? So here is the right luminous way to use yo and his brothers, grunt and bower.
This is the first “un-avoidable” step when you want to use a new tool or technology.
To follow next steps, you are supposed to work on Ubuntu (or debian like) workstation. All the stuff demonstrate here has been tested on Ubuntu 13.04.
Ok. that’s it.
Install yeoman and generator
just with some basic shell commands, let’s magic operate :
$ sudo npm install -g yo $ sudo npm install -g generator-angular
to be able to use grunt on the next steps, we need to install compass. just follow the command lines bellow:
$ sudo gem install compass
Ok. Keep calm, and create a new Web app based on angular framework with the superheroïc yeoman :
first create the folder for our demo:
$ mkdir demo01 $ cd demo01
Now generate our angular demo01:
$ yo angular $ bower install angular-ui $ grunt test $ grunt server $ grunt
Ok, seams to be incantation, but really, it creates an
application with AngularJS inside, and then test it with karma and then start its demo purpose with
grunt will package it ready to be distributed and deployed.
Great ? yes, sure.
So some explanations:
yo angularwill create the AngularJS application structure,
$ yo angular [?] Would you like to include Twitter Bootstrap? Yes [?] Would you like to use Twitter Bootstrap for Compass (as opposed [?] Would you like to use Twitter Bootstrap for Compass (as opposed to vanilla CSS)? Yes [?] Would you like to include angular-resource.js? Yes [?] Would you like to include angular-cookies.js? Yes [?] Would you like to include angular-sanitize.js? Yes create app/styles/main.scss create app/index.html ... invoke angular:common:/home/fdelorme/node_modules/generator-angular/app/index.js ... invoke karma:app create karma.conf.js create karma-e2e.conf.js
bower install angular-uiis the dependencies manager. It will install the angular-ui dependency for you app.
$ bower install angular-ui bower cloning git://github.com/angular-ui/angular-ui.git bower cached git://github.com/angular-ui/angular-ui.git bower fetching angular-ui bower checking out angular-ui#v0.4.0 bower copying /home/fdelorme/.bower/cache/angular-ui/bbd2bf118be83c403b7839019d972b5d bower installing angular-ui#0.4.0
grunt testis a the unit test execution.
This small command will fireup chrome to execute unit test of your application, using karma, and create some screenshot of each UI unit test.
grunt serverwill start a server to try it
gruntbuild the application ready to deploy into the
distfolder into the application folder.
McArmstrong would say “One small step for tooling, a giant step for industrialization of HTML5kind” if he exists 😉
Have fun !