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.
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.
Table of Contents:
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.
[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.
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.
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.
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!