Yeoman - Create an AngularJs Scaffold

Yeoman - Create an AngularJs Scaffold


Introduction
Yeoman is used to generate a basic scaffolding of app. This will help to start a new project quickly, creating folder structure and configuration, adding necessary libraries/tools like bootstrap, sass etc. and prescribing best practices. There are generators associated with yo for different languages like angular, backbone, etc.

Environment setup and Installation
1. Pre-requisites:

  • Node.js v0.10.x+
  • npm (which comes bundled with Node) v2.1.0+
  • git

2.Install yo, bower and grunt
   C:\>npm install --global yo bower grunt-cli

3. Install generator-angular and generator-karma using this command:
   C:\>npm install --global generator-angular@0.11.1 generator-karma

Generate Angular App
Create a folder for app,
  C:\>md yApp
  C:\>cd yApp

Now access generators via the Yeoman menu,
  C: \yApp>yo


Select Angular as generator.  On selecting angular, it will ask whether to include different components like Sass, bootstrap and different angular-modules.


On hitting enter key, different modules will be installed and app will be generated. We can edit this app and develop our app. Like we can add new controller in controller folder, add new view in views folder. Also add other libraries using bower.


Run App: Start Server
Use below command to run grunt task to start Node-based http server on localhost:9000.
C:\yApp>grunt serve


Run Unit Tests-Using Karma and Jasmine
The Angular generator has included two test frameworks: ngScenario and Jasmine. A test directory is created in the root folder, creates test spec files, created a karma.conf.js file, and pulled in the Node modules for Karma while generation of app. Add/Edit spec file for testing different modules. Use below command to run unit tests.
C:\yApp>grunt test

Get production app: Minification and Uglification
Concatenate and minify our scripts and styles to save on those network requests, run unit tests, optimize images if we were using any, etc. are one to make the code production ready using the command below,
C:\yApp>grunt

1 comment:

  1. We provides a best scaffold to all industries with the wide range of sizes from industrial building, towers to large scale applications.
    chute for rent in thunderbay
    Scaffolding contractor thompson

    ReplyDelete