Post
Ask Question

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:

  1. var app = angular.module('single-page-app', ['ngRoute']);  
  2. app.config(function ($routeProvider) {  
  3.     $routeProvider  
  4.         .when('/', {  
  5.             templateUrl: 'Home.html'  
  6.         })  
  7.         .when('/Article', {  
  8.             templateUrl: 'Article.html'  
  9.         })  
  10.     .when('/Blog', {  
  11.         templateUrl: 'Blog.html'  
  12.     })  
  13.     .when('/ContactUs', {  
  14.         templateUrl: 'ContactUs.html'  
  15.     })  
  16.     .when('/AboutUs', {  
  17.         templateUrl: 'AboutUs.html'  
  18.     });  
  19. });  
  20. app.controller('cfgController', function ($scope) {  
  21.   
  22.     /*       
  23.     Here you can handle controller for specific route as well. 
  24.     */  
  25. });  


Figure 9: Code Image

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

Home.html
  1. <div style="padding-left:130px;padding-right:200px;">  
  2.     <h1> Welcome RS - To the SPA World! - HOME</h1>  
  3.     <p>Develop SPA (Single Page Application Step By Step.)</p>  
  4. </div>  


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:
  1. <!doctype html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Single page web app using Angularjs</title>  
  6.     <script src="Scripts/angular.min.js"></script>  
  7.     <script src="Scripts/angular-route.min.js"></script>  
  8.     <script src="Scripts/MyScript.js"></script>  
  9.   
  10.     <style type="text/css">  
  11.         #navcontainer ul 
  12. {  
  13.             margin: 0;  
  14.             padding: 0;  
  15.             list-style-type: none;  
  16.             text-align: left;  
  17.             padding-top: 4px;  
  18.         }  
  19.             #navcontainer ul li 
  20. {  
  21.                 display: inline;  
  22.             }  
  23.   
  24.                 #navcontainer ul li a 
  25.                 {  
  26.                     text-decoration: none;  
  27.                     padding: .2em 1em;  
  28.                     color: white;  
  29.                     background-color: red;  
  30.                 }  
  31.   
  32.                     #navcontainer ul li a:hover {  
  33.                         color: #fff;  
  34.                         background-color: #369;  
  35.                     }  
  36.     </style>  
  37.   
  38. </head>  
  39. <body ng-app="single-page-app">  
  40.     <div ng-controller="cfgController">  
  41.   
  42.         <div>  
  43.             <table style="width:100%; background-color:skyblue;">  
  44.                 <tr><td style="background-color:blue; color:white; font-size:30pt; text-align:center; padding:10px; height:50px;">SPA - (Single Page Application - AngularJS)</td></tr>  
  45.                 <tr>  
  46.                     <td id="navcontainer">  
  47.                         <nav>  
  48.                             <ul>  
  49.                                 <li><a href="#/">Home</a></li>  
  50.                                 <li><a href="#/Article">Articles</a></li>  
  51.                                 <li><a href="#/Blog">Blog</a></li>  
  52.                                 <li><a href="#/ContactUs">Cotact us</a></li>  
  53.                                 <li><a href="#/AboutUs">About us</a></li>  
  54.                             </ul>  
  55.                         </nav>  
  56.                     </td>  
  57.                 </tr>  
  58.                 <tr>  
  59.                     <td style="height:20pt;"></td>  
  60.                 </tr>  
  61.                 <tr>  
  62.                     <td>  
  63.                         <div ng-view>  
  64.                             <!-- 
  65.                                 This section Will show SPA concept. 
  66.                             -->  
  67.                         </div>  
  68.                     </td>  
  69.                 </tr>  
  70.                 <tr>  
  71.                     <td style="height:20pt;"></td>  
  72.                 </tr>  
  73.                 <tr>  
  74.                     <td>@Copyright : RS</td>  
  75.                 </tr>  
  76.                 <tr>  
  77.                     <td style="height:4pt;"></td>  
  78.                 </tr>  
  79.             </table>  
  80.   
  81.         </div>  
  82.   
  83.     </div>  
  84. </body>  
  85. </html>  


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


Similar Articles