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