Build Single Page Application Using AngularJS (Tutorial with Example)

Build a Single Page Application SPA Using AngularJS:

All we need to know about AngularJS was explained in our previous tutorial. In this tutorial, we will get to know more about developing a single page application using AngularJS.

Do you know about Netflix? Have you ever visited its website?

If your answer is ‘Yes,’ then you know how a single page application looks like! Explore our Complete Guide to AngularJS to get a clear knowledge of AngularJS. 

Single page application using AngularJS

Let me elaborate!

Netflix uses AngularJS in its client-side framework to enrich the user functionalities in their web applications.

They have made their UI very simple by making it an SPA (Single Page Application). This means that the navigation within Netflix is performed without refreshing the whole page.

Advantages of Single Page Applications

Given below are few advantages of Single Page Applications.

  • Improved user experience.
  • Web pages refresh faster as less bandwidth is being used.
  • The deployment of the application – index.html, CSS bundle, and javascript bundle – in production becomes easier.
  • Code splitting can be done to split the bundles into multiple parts.

Why Develop an SPA Using AngularJS?

Nowadays, there are many javascript applications that are available in the market like ember.js, backbone.js, etc. But still, a lot of web applications incorporate AngularJS in their development to create SPAs.

Given below are few reasons as for why AngularJS is a clear winner:

#1) No Dependencies

Unlike AngularJS, backbone.js has dependencies on underscore.js and jQuery. Whereas, ember JS has dependencies on handlebars and jQuery.

#2) Routing

Navigation between web pages built using AngularJS is very simple when compared to those that are built using other javascript frameworks. The directives used in AngularJS are lightweight, hence the performance metrics of AngularJS is appreciable.

#3) Testing

Once the application is built using AngularJS, automated testing could be performed for quality assurance using selenium. This is one of the awesome features of applications built using AngularJS development.

angularJS features

[image source edureka.co]

#4) Data Binding

AngularJS supports two-way data binding, i.e., whenever the model is updated, the view also gets updated as AngularJS follows MVC architecture.

Hence, the data can be viewed by the user, based on his preferences.

#5) Support for the Browser

AngularJS is supported in most of the browsers including IE version 9 and above. It can adapt to work on mobiles, tablets, and laptops too.

#6) Agility

AngularJS supports agility which means that it can cater to new requests from businesses as and when they come up into competitive work environments. The controllers can be implemented in the MVC architecture to service these requests.

There are around 30000 modules in AngularJS, that are readily available for rapid application development. When a developer wants to customize an existing application, he can use the modules that are already available and tweak the code instead of building the whole application from scratch.

Moreover, the contributors and experts in AngularJS are many in number, hence you would get quick responses to any queries that you post on discussion forums

How to Develop a Single Page Application Using AngularJS?

Enlisted below are the various steps involved in developing a SPA using AngularJS.

Step 1: Create a Module

We all know that AngularJS follows MVC architecture. Hence, every AngularJS application contains a module comprising of controllers, services, etc.

var app = angular.module('myApp', []);

Step 2: Define a Simple Controller

app.controller('FirstController', function($scope) {
$scope.message = 'Hello from FirstController';
});

Step 3: Include AngularJS script in HTML code

Specify the module (created in step 1) in ng-app attribute and the controller (defined in step 2) in the ng-controller attribute.

<!doctype html>
<html ng-app="myApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
</head>
<body ng-controller="FirstController">
<h1>{{message}}</h1>
<script src="app.js"></script>
</body>
</html>

Once the code is run on localhost, the output will be as shown below.

3-2.Angular JS script in HTML code

It is now confirmed that our module and controller are set up, and AngularJS is working properly.

Step 4: Use AngularJS’s routing capabilities to add different views to our SPA

We need to include angular-route script after the main angular script.

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.min.js"></script>

We need to use the ngRoute directive to enable routing.


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

Step 5: Create an HTML layout for the website

Once an HTML layout for the website is created, we need to use the ng-view directive to specify the place where the HTML of each page will be placed in our layout.

<!doctype html>
<html ng-app="myApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.min.js"></script>
</head>
<body>
<div ng-view></div>
<script src="app.js"></script>
</body>
</html>

Step 6: Use $routeProvider service from ngRoute module to configure the navigation to different views

It is necessary to specify a templateUrl and a controller for each route that we wish to add.

Exception handling has to be accommodated when a user tries to navigate to a route that doesn't exist. For simplicity, we can write an “otherwise” function to redirect the user to the “/” route.

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

app.config(function($routeProvider) {
$routeProvider

.when('/', {
templateUrl : 'pages/first.html',
controller : 'FirstController'
})

.when('/blog', {
templateUrl : 'pages/second.html',
controller : 'SecondController'
})

.when('/about', {
templateUrl : 'pages/third.html',
controller : 'ThirdController'
})

.otherwise({redirectTo: '/'});
});

Step 7: Build controllers for every route specified in $routeProvider

app.controller('FirstController', function($scope) {
$scope.message = 'Hello from FirstController';
});

app.controller('SecondController', function($scope) {
$scope.message = 'Hello from SecondController';
});

app.controller('ThirdController', function($scope) {
$scope.message = 'Hello from ThirdController';
});

Step 8: Configure the pages

first.html

<h1>First</h1>

<h3>{{message}}</h3>

second.html

<h1>Second</h1>

<h3>{{message}}</h3>

third.html

<h1>Third</h1>

<h3>{{message}}</h3>

Step 9: Add links to the HTML that will help in navigating to the configured pages

<!doctype html>
<html ng-app="myApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.min.js"></script>
</head>
<body>
<a href="#/">First</a>
<a href="#/second">Second</a>
<a href="#/third">Third</a>

<div ng-view></div>

<script src="app.js"></script>
</body>
</html>

Step 10: Include the HTML of routing pages to index.html file using script tag

<!doctype html>
<html ng-app="myApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.min.js"></script>
</head>
<body>
<script type="text/ng-template" id="pages/first.html">
<h1>First</h1>
<h3>{{message}}</h3>
</script>
<script type="text/ng-template" id="pages/second.html">
<h1>Second</h1>
<h3>{{message}}</h3>
</script>
<script type="text/ng-template" id="pages/third.html">
<h1>Third</h1>
<h3>{{message}}</h3>
</script>

<a href="#/">First</a>
<a href="#/second">Second</a>
<a href="#/third">Third</a>

<div ng-view></div>

<script src="app.js"></script>
</body>
</html>

(When Angular detects the templates defined by the ng-template directives, it will load its content to the template cache and will not perform Ajax request to get their content.)

Once the HTML is run on localhost, the following page is displayed.

first web page

Observe that the hyperlinks First, Second, Third on the page are routers and when you click on them, navigation to the corresponding web pages occur, without refreshing.

second web page

Third web page

That’s it! Hope you could create a simple SPA as demonstrated in this blog. Once you get the output successfully, you can try out complex SPAs on the same lines.

Conclusion

Single Page applications are very popular nowadays, with brands like Netflix opting for them.

If you are developing SPAs, then AngularJS is the obvious choice. However, the new version of AngularJS, i.e., Angular offers more functionalities. Else there are various technologies like Node JS application development etc.

Stay tuned to our upcoming tutorial to explore about Upgrading Angular Version!

PREV Tutorial | NEXT Tutorial