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.

Yo, grunt and bower !

Installation

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. Done.

Next !

CReAtE !

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 server:

Finally, grunt will package it ready to be distributed and deployed.

Great ? yes, sure.

So some explanations:

  • yo angular will 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-ui is 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 test is 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 server will start a server to try it

grunt-server-run-screenshot

  • grunt build the application ready to deploy into the dist folder into the application folder.

grunt-to-dist-screenshotNow, you just have to code your own app with all these magical tools arround Javacript and AngularJS.

McArmstrong would say “One small step for tooling, a giant step for industrialization of HTML5kind” if he exists 😉

Have fun !

McG.

Publicités