Single Page Application in angularJS

By | August 11, 2016

single page applicationA Single-page application (SPA), also known as a single-page interface (SPI), is a web application or web site that load a single HTML  page and dynamically update that page as the user interacts with the app. It makes an application more fluid and responsive, without the jarring effect of reloading and re-rendering the page. It helps to boost the speed of application because you takes a lighter server response payload for the chunks of content instead of whole page. The lighter payload transmits across the network more quickly and the browser can incorporate the new piece of content more quickly than redrawing an entirely new page.

There are definitely some special considerations to take into account with SPAs. Creating an SPA without sound object-oriented principles can lead to memory leaks within the browser which can cause it to slow down or crash. If you use an SPA for your main site, you have to take special steps for search engine optimization (SEO) so that crawlers will see an appropriate version of your page. The biggest bane of SPAs is the browser back button. If not properly handled, the user can click the back button intending to go back one step in their workflow, but instead be dumped back to whatever page they were at before they entered the SPA. However, all of these issues can be addressed with the right techniques.

Now i will explain  how to create single page application with example. In below 2 screenshot, i have added an empty project and install angularJS  packages.

single page application 2

single page application 1

Now install packages for angularJS core liabrary and route.

PM> Install-Package AngularJS.Core
PM> Install-Package AngularJS.Route

single page application 3

Now your project structure will look like below screenshot.

single page application 4

Now I have added new folder and then create a page with the name of Index.html. 

<!DOCTYPE html>
 <html ng-app="myApp">
 <head>
 <title></title>
 <meta charset="utf-8" />
 </head>
 <body ng-controller="myController">
 <div ng-view>
 </div>
 </body>
 </html>

In above code, i have assigned the application name of angularJS in html open tag and controller name in body tag. I have added  ng-view directive where a corresponding view (html or ng-template view) can be placed based on the configuration.

single page application 5

Now added four more pages(home.html, about.html, contact.html, test.html) in same folder and add the below code to print the message.

<div>
<h2>{{message}}</h2>
</div>

Now add the main file with the name of app.js  where i have initialized the angularJS and the ngRoute  as a dependency for routing the application with different pages  without reloading.It provides $routeProvider to configure different routes. In below code i have defined $routeProvider by config method of the application. $routeProvider.when matches the url and use the defined template in template url and same for controller.

var app = angular.module('myApp',['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
    .when('/', {
        templateUrl: 'tpl/Home.html',
        controller: 'myController'
    })
    .when('/about', {
        templateUrl: 'tpl/About.html',
        controller: 'AboutController'
    })
    .when('/contact', {
        templateUrl: 'tpl/Contact.html',
        controller: 'ContactController'
    })
    .when('/test', {
        templateUrl: 'tpl/Test.html',
        controller: 'TestController'
    });
}]);

Now i have add Controller.js file for all controllers and assign the message in message variable.

 app.controller('myController', function ($scope) {
 $scope.message = 'Hi, This is Home page!!!';
});
app.controller('AboutController', function ($scope) {
 $scope.message = 'Hi, This is About page!!!';
});
app.controller('ContactController', function ($scope) {
 $scope.message = 'Hi, This is Contact page!!!';
});
app.controller('TestController', function ($scope) {
 $scope.message = 'Hi, This is Test page!!!';
});

Now, add all the references of the js files  in main page Index.html as below screenshot.

single page application 6

Now run the application.

single page application 7 single page application 8

 

Download source code (with 25+ examples)

I hope you will enjoy Single page application with example. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.

Like it? Share it
  • Grewal Chiku

    great article to start single page app. Thansk for sharing

  • Rahul Sharma Richoriya

    Nice explanations and thanks a lot for your effort… :)

  • Gobind Mandal

    Great article to learn single page app thanks sir

  • great article

  • N-keet Sing

    Good to start