First thing First: Scaffolding the Angular project using Yo, bower and grunt

Angular can be used widely in various tastes. It can be used in your regular web projects along with your existing frontend framework. However using a node js based structure is the best way to go. Node Js is the Google Chrome's V8 javascript engine based server. It follows a non blocking IO approach and hence is very fast when it comes to code execution. More details regarding it can be obtained from there official site Nodejs.org.

To start working with Node js, first of all we need to create the folder structure required by node server. Following are the main softwares used for getting the same. Kindly note that these steps are for creating a node based structure. If you wish not to follow this structure, you can skip this and go ahead with next tutorial.

Yo : Yo provides us with the basic structure or skeleton of our node based application.
Bower: Bower is a tool to obtain various dependencies required for our project. These can simply be downloaded by using bower install command. We will see to it in detail later at the time of creating our structure.
Grunt: This tool helps to maintain and run our node project using its various commands like grunt run, grunt serve etc. We will see them also in detail in subsequent tutorials.

So lets start it right here.  Go to node's official site and download the latest node.js package available.Follow the below order of steps:

1) Install node.js and git in your system. Git is a well known online repository and can be easily installed from Git's official site

2) Create the environment variables. (My Computer>Right Click> Properties -> Advanced -> Environment variables).

You will have to modify your system's PATH variable to include both npm path and git's path as follows. NPM is node's project management tool and comes bundled with the node.

PATH = C:\Program Files\nodejs\node_modules;C:\Program Files\Git\bin;

  

3) Reopen the command prompt again and check if npm is installed or not by typing

 npm

If path was set well npm should now be accessible via Command prompt.

4)Install yo by giving

>npm install -g yo (-g implies global install of yo)

5) Install bower by giving

>npm install -g bower

6) Install grunt by giving

>npm install -g grunt-cli

7) Install angular generator by giving

>npm install -g generator-angular

8) Create a folder for your project in a directory of your choice. Move to the project folder in command prompt. Now the project can be generated by giving.

>yo angular

9) This may take a while and will ask you for various selection. You can choose the selections of your choice or can go with the defaults.

10) Check if bower components (around 15-20) are available in the project folder obtained. If they are not present, give the command

>bower install

11)Now the obtained project folder will contain all the dependencies for running your Angular project. Once done your project structure will be ready. It should look something like the one shown below. 

The app folder is the main application part and will contain all the code you write or libraries you add. I will recommend you create the following structure inside app folder for the sake of code maintainability.

• The bower_components folder contains all the dependencies installed using bower.
• The node module folder contains node based dependencies.
• The test folder is used to keep testing related codes and files like jasmine and karma specs.
• The Gruntfile.js contains the server related configuration for the application.

However, we do not have much to do with these all folders and these are the standard and important part of application.

You can check your project by running following command on command prompt.

Serving the project: As discussed before the project is served by grunt commands. You can serve the project by:

>grunt serve

Building the project:

>grunt build 

This will generate a war file in a dist folder inside your project structure. This war can directly be deployed to run in any server of your choice, like Apache or Glassfish.

Running the war file:

>grunt run

This will run the project from the war file locally instead of running the code directly.

Testing the project

>grunt test

This command can be used to test the code using a testing framework like Jasmine and Karma. The explanation of these frameworks however is out of scope of this tutorial and will be taken in a separate series.

Now that we have established our project structure. We shall go ahead with learning Angular JS in next tutorial.