Angularjs, Yeoman, Grunt and Bower

My demo angularjs app has gained traction, so its time to turn it into a real project. The best fit for me is to move the angular app into Yeoman. Yeoman is a tool for automating workflows in web app development. Yeoman combines scaffolding, testing, and deployment into one tool. The scaffolding is done using Yo. The testing and deployment is done with Grunt. Dependencies are managed by Bower.

Installing Yeoman on Ubuntu was easy enough by following the installation instructions on the Yeoman site. I also installed the angularjs generator, which is used for scaffolding an angular app.

    Basic commands to create an Angularjs app.
  • yo angular
  • bower install bootstrap
  • bower install font-awesome
  • yo angular:controller events
  • yo angular:directive widget
  • yo angular:service websocket
  • yo angular:route loginPage
  • Open up the application in Netbeans/Webstorm and edit the controllers/directives/services that were created and placed in the app/scripts folder. Also edit the corresponding unit tests that were auto generated and placed in the test folder.
  • grunt test
  • grunt server
  • grunt build
  • Locate the dist folder and move those files to the production web server.

Read More