---

Search posts under AngularJS:

---

Setting up Single Page Application Project in AngularJS

How to setup single page application project in Visual Studio?

In previous post, we learnt about Single Page Application architecture. In this post, we shall learn about setting up the project. As we are going to use AngularJS and its http-route module, so we need to bring them into our Project structure.

Our final Single Page Application Project folder structure would look like this

Setting up Single Page Application Project

• Go to this post and set up the AngularJS
  
• After setting up AngularJS, we need AngularJS route module as well that will help us to route the Single Page Application (SPA) urls to a particular view. Go to https://code.angularjs.org/1.5.0-rc.0/ and download AngularJS route module https://code.angularjs.org/1.5.0-rc.0/angular-route.min.js
  
  
• Create a SPA folder inside ~/Scripts folder where we will keep our SPA related script files. Not mandatory to have a separate folder but just for sepration and easy manitenance purpose we should keep them into separate folder.
  
  
• As shown in the above picture, create PersonalDetailsController.js file (javascript file) under ~/Scripts/SPA folder where we will write all our application related javascript code (AngularJS, jQuery, http-route modules etc.)
  
  
• In the root of the project also, create SPA folder and under that PD folder where we will keep our Single Page Application related html files (view files)

Now we need to have a Single Page Application page template where the main menus (navigational menus) will be there and a placeholder for view would be there. We will learn them into next post.