Developing Single Page Application (SPA)

We have already heard a lot about AngularJS and SPA (Single Page Application). But when we start thinking to develop an SPA application, we have a lot of confusion ie: how to develop SAP application, what steps should I take to develop SAP etc. So here I am going to explain step by step development of a SPA (Single Page Application).

So for SPA we have ng-route and ng-view directive. Ng-route manage the routing of a web application and ng-view allows us to render different view depending on the router.

Now open Visual Studio



Figure 1: New Project

Now we need to add AngularJS reference into our application. So right click on Solution Explorer, then select Manage Nuget Packages...



Figure 2: Manage Nuget



Figure 3: AngularJS



Figure 4: AngularJS Installed

Now again right click on Project’s Solution Explorer, then Add New Item.



Figure 5: Add New Item



Figure 6: Item Name

Now add a JavaScript file in your project, so right click on project’s Solution Explorer and Add New Item.



Figure 7: Add JavaScript



Figure 8: MyScript

Here's your MyScript.js file with the following code:

Figure 9: Code Image

Now Add Home.html, Article.html, Blog.html, ContactUs.html & AboutUs.html in your application.

Home.html


Figure 10: Html

Article.html



Figure 11: Article.html

Blog.html



Figure 12: Blog

AboutUs.html



Figure 13: AboutUs

ContactUs.html



Figure 14: ContactUs

Now open your Index.html and here's the code:


Figure 15: Defoult

Now run you application:



Figure 16: Run

Click on Articles Menu and see your URL and content.



Figure 17: Article Menu



Figure 18: Blog Menu



Figure 19: Contact Menu



Figure 20: About Menu