What is a Single Page Application and How we can make it with Javascript framework like AngularJS

Single Page Application or SPA is a web application that fits on a single webpage. This article is a proof of concept about What is a Single Page Application and How we can make it with JavaScript framework like AngularJS.

Features and advantages of single page applications are

  • Once the site is loaded then it does not reload thereafter.
  • Reduces page load time
  • Provides smooth experience by easy transitions to different pages like desktop apps.
    JavaScript frameworks, like as AngularJS, Ember.js, ExtJS and React uses SPA principles.We would like to carry on our discussion here with AngularJS.
    AngularJS is a client side library and it’s templating is based on two way data binding i.e. it changes or updates the view whenever the model is changed or updated. Unlike traditional server-side HTML programming, the controller and model state are maintained within the client browser in AngularJS framework. Here new pages are generated without any interaction with a server.The HTML template is compiled in the browser.

    So, we wil move on with AngularJS. AngularJS provides two directives ‘ng-route’ and ‘ng-view’ which can be used to make a single page web application.

    ‘ng-route’ manages the routing for a web application.Routing means when we click on click on a link defined by anchor tag(), we get redirected to that particular link. ‘ng-route’ is used to handle those routes.

    ‘ng-view’ renders the page template on a view which depends upon the router. In our example we will use two views ,one is home and another is other view.


    Now we are going to discuss the concept with a sample example.In this example we have created three HTML pages.

  • index.html
  • home.html
  • other.html
  • and one script ‘script.js’.

    <!doctype html>
    <html lang="en">
    <meta charset="UTF-8">
    <title>Single Page Application using Angularjs</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.4.1/angular-route.min.js"></script>
    <script src="js/script.js"></script>
    <body ng-app="myApp">

    <div ng-controller="mainController">
    <div ng-view>
    <!–This DIV loads templates depending upon route.–>


    In the above page we have used angular.min.js(1.4) and angular-route.min.js for enabling angular in our application ‘myApp‘ .Here in the ng-view templates will be rendered according to the router.

    <li><a href="#/">Home</a></li>
    <li><a href="#other">Other</a></li>
    This is home page

    <li><a href="#/">Home</a></li>
    <li><a href="#other">Other</a></li>
    This is other page

    Above two pages(home.html and other.html) are two templates with sample text, to be displayed depending upon routing.

    Next, we will focus on our angular code which is written in script.js.

    var app=angular.module(‘myApp’,[‘ngRoute’]);
    templateUrl: ‘home.html’,
    templateUrl: ‘other.html’,
    //Controller code for mainController
    //Controller code for otherController

    In the above code first we have created an angular module ‘app‘ with our application ‘myApp‘. We have also installed the ‘ngRoute’ module.
    Next, we have made a configuration to our app with $routeProvider which is used to configure routes.

    As we can see in $routeProvider when a URL hits ,corresponding file URL is being passed and it will be loaded into the ng-view to render.More templates can be added depending upon needs. Here we are also assinging a controller. AngularJS will invoke the controller with a $scope object.In AngularJS, $scope is the application object (the owner of application variables and functions).

    How it works

    How to run the application

    Files need to be created as mentioned above or reader can download the complete source code from Github. Code needed to be put in a web server(e.g. XAMPP, WAMP etc.) and then it can be run trough browser.

    If you find this article helpful, you can connect us in Google+ and Twitter.

    Enter your email address:

    Delivered by FeedBurner

    Leave a Reply

    Your email address will not be published. Required fields are marked *