Table of Contents

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.

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:

Angular
React
Ember
Aurelia
js
js
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.

How to build single-page web applications using Angular?

Each angular web application starts by 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']);

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.";
});

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>

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 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,

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 of how to build a SPA using AngularJS. So Angular would be a great option for you when you are developing a Single Page Web Application next-time.

If you are looking for angular developers for your project? Hire Angular developer from Agira Technologies to build the best web-apps at affordable rates. Our dedicated Angular developers are well-versed with all the updates and ensure top-notch web application development to meet your business requirements. For any queries reach us via info@agiratech.com