Creating Single Page Web Applications Using AngularJS

A single page web application, as the name suggests, is a web application that fits itself on to a single web page with the goal of providing its users an experience similar to that of desktop applications. There are two ways it can work. Either all the necessary code- HTML, JS, and CSS- is retrieved by just loading a single page or the required resources are loaded dynamically and added to the page as and when necessary, in response to user actions.

AngularJS

Advantages of creating SPA

  • The whole page need not be refreshed- Only the part of the web page that has to be changed has to be loaded.
  • Provides the user better experience- The web pages are extremely fast and responsive.
  • Allows us to work offline- Even if the user loses internet connectivity, he can still continue working because all the pages are already loaded in a SPA.

Disadvantages of SPA

  • The initial loading is quite slow as the SPA requires more resources to load
  • The client should have JS enabled- Fortunately almost every developer does
  • Pretty complex to build and develop- Might require coding in HTML, JSS and CS, handling the shared state between pages, managing permissions etc.

Open source JavaScript frameworks that help in building SPAs include:

  1. Angular
  2. React
  3. Ember
  4. Aurelia
  5. js
  6. js
  7. Backbone

Angular is a front-end, client-side development framework which was built to ease the burden of developing complex apps while keeping everything organized. New pages can be generated without any interaction with the server.

We will now learn to build single page web applications using Angular JS

 

  1. Each angular web application starts from creating a module. A module is a composition of different sub-parts of your web application: controllers, services, etc.

 


// spa-routers.js

var app = angular.module("SinglePageApp", ['ngRoute']);

  1. Now we define controllers for respective web pages

You can specify the body content of each of the respective web pages after you define the controllers.

 


// Create other controllers for respective pages

// Home controller

app.controller("HomeController", function ($scope) {

    $scope.Title = "Single Page Application (SPA)";

    $scope.bodyContent = "Welcome to Agira.";

});

// About controller

app.controller("AboutController", function ($scope) {

    $scope.Title = "About us";

    $scope.bodyContent = "Agira is a technology company";

});

// Contact controller

app.controller("ContactController", function ($scope) {

    $scope.Title = "Contact us";

    $scope.bodyContent = "Chennai, India.";

});

  1. After creating the module and controller, we’ll have to use them in our HTML.

 

Firstly, we need to include the angular script and angular.js that we will be building.

Then we will have to specify our module in the ng-app attribute and our controller in the ng-controller attribute.

 


<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>Single Page Application</title>

    <link href="stylesheets/bootstrap.min.css" rel="stylesheet" />

    <link href="stylesheets/style.css" rel="stylesheet" />

    <script src="scripts/angular.js"></script>

    <script src="scripts/angular-route.js"></script>

    <script src="scripts/Controllers/spa-controllers.js"></script>

    <script src="scripts/Controllers/spa-routers.js"></script>

</head>

<body ng-app="SinglePageApp" ng-controller="HomeController">

</body>

</html>

  1. Once the HTML part is ready, we need to configure the routes for each web page. We will be using the $routeProvider from the ngRoute module which we had earlier declared.

The ngRoute module basically provides routing services for the angular apps.

For each route, we’ll have to specify a unique templateUrl and a controller.

This will take it to the desired web page location

An additional feature that can be implemented is that if the user will be trying to go to a route that doesn’t exist, it can be handled by using the otherwise function.

 


app.config(function ($routeProvider) {

    $routeProvider

    .when('/',

    {

        templateUrl: 'templates/home.html',

        controller: 'HomeController'

    })

    .when('/about',

    {

        templateUrl: 'templates/about.html',

        controller: 'AboutController'

    })

    .when('/contact',

    {

        templateUrl: 'templates/contact.html',

        controller: 'ContactController'

    })

});

So our pages will be like this


<h1>{{Title}}</h1>

<p>{{bodyContent}}</p>

And the web pages that we created will look like this

 

Home

 

About

web pages that we created

The final HTML document looks like this


<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>Single Page Application</title>

    <link href="stylesheets/bootstrap.min.css" rel="stylesheet" />

    <link href="stylesheets/style.css" rel="stylesheet" />

    <script src="scripts/angular.js"></script>

    <script src="scripts/angular-route.js"></script>

    <script src="scripts/Controllers/spa-controllers.js"></script>

    <script src="scripts/Controllers/spa-routers.js"></script>

</head>

<body ng-app="SinglePageApp" ng-controller="HomeController">

    <div class="navbar navbar-inverse navbar-fixed-top">

        <div class="container">

            <div class="navbar-header">

                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                </button>

                <a title="SPA - TechFunda" class="navbar-brand">SPA</a>

            </div>

            <div class="navbar-collapse collapse">

                <ul class="nav navbar-nav">

                    <li ><a href="#/">Home</a></li>

                    <li ><a href="#/about">About us</a></li>

                    <li class="active"><a href="#/contact">Contact us</a></li>

                </ul>

            </div>

        </div>

    </div>

    <div class="container body-content">

        <h1>Contact us</h1>

        <p>Chennai, India.</p>

        <!-- <div ng-view></div> -->

    </div>

</body>

</html>

Conclusion :

When it comes to developing a Single Page Web Application AngularJS is one of the most preferred tools by many developers. Apart from the reason that it is built and maintained by Google, it’s easily adaptable nature makes it more preferred. Two-way binding in AngularJS is the most desired feature for developing Single Page Web Application. This article gives you a clear idea on how to build a SPA using AngularJS. So AngularJS would be the great option for you when you are developing a Single Page Web Application next-time.