How to create a simple web app using bootstrap and angular features

Before starting , we need to install below tools.
We have already seen installation of node js  from
http://simpleapphub.blogspot.in/2015/08/simple-web-app-in-node-js.html
Now let us go through below steps:-

Step 1: Install node if not done already

Step 2: Install git from http://git-scm.com/
Git is a free distributed version control system designed to handle everything from small to very large project. Use below option while installing. Use default choice for all other options.


After the successful installation of git , you can verify it by using below command.


Step 3:Installation of bower.

Bower is a packaging manager for browser components. If we have already installed node & git , we can install bower using below command.
npm install -g bower

On running below command , you can verify the globally installed components using npm.
npm list -g --depth=0
Step 4: Installation of grunt tool.

 npm install -g grunt
In order to get started, you'll want to install Grunt's command line interface (CLI) globally.

This will put the grunt command in your system path, allowing it to be run from any directory.

Step 5: Installation of yo.
Yo provides certain generators that you can use to create your web app template. 
 npm install -g yo
Above command will install yo package. We can use the different template generators provided by yo. Here we are going to use angular generator with necessary bower components. 
 First we need to install angular-generator using below command.
npm install -g generator-angular
Step 6: Everything is set-up now. You can verify this as shown below.

Now we can go to our project directory  and start creating our web app using generator.
command: yo angular
You can include bootstrap also while installing. Please follow the instructions as shown below.
 

All the bower modules installed is present in bower.json  generated.

Step 6: If everything installed perfectly, we an start running our web app by using below command.

grunt serve

 We can see that index.html is loaded with a default bootstrap provided from yo tool. You can use sublime editor for further editing your web app as you like

 

Possible errors:-

If you encounter below error on running yo angular

module.js:338
    throw err;
    ^
Error: Cannot find module 'figures'
    at Function.Module._resolveFilename (module.js:336:15)
    at Function.Module._load (module.js:278:25)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (C:\Users\Administrator\AppData\Roaming\npm\node_modul
es\generator-karma\node_modules\yeoman-generator\node_modules\inquirer\lib\objec
ts\separator.js:7:15)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)

 Solution: Try uninstalling generator-angular. After that re-install it again.

npm uninstall -g generator-angular

If the problem persists after the re-installation , try below steps:-
install rimraf module  to delete node-modules. please run below commands to install & delete node_modules using rimraf
            npm install -g rimraf
            rimraf node_modules
            npm clean cache