Madhuri A. Jadhav et al, / (IJCSIT) International Journal of Computer Science and Information Technologies, Vol.

6 (3) , 2015, 2876-2879

Single Page Application using AngularJS

Madhuri A. Jadhav#1, Balkrishna R. Sawant#2, Anushree Deshmukh*3
#
Master of Computer Application
Lokmanya Tilak College of Engineering
Koparkhairane, Navi Mumbai
*
Department of Computer Engineering
Lokmanya Tilak College of Engineering
Koparkhairane, Navi Mumbai

Abstract— Single Page Application (SPA) is composed of In modern era of web technology most of the websites
individual component that can be replaced or updated are using SPA which is a web application that sits on one
independently, without refreshing whole page so that the single page like any other desktop application. In SPA all
entire page does not need to be reloaded on each user action, the component like CSS, images, scripts and any other
which saves bandwidth as well as no loading of external files
every time when page is loaded, such as images or CSS files,
required resources are loaded at one time at the initial page
etc. The purpose behind this is to make the subsequent page load and then appropriate content/components gets loaded
loads very fast as compared to traditional Request-Response dynamically depending on the user interaction. Once the
cycle. SPA's written by using JavaScript, HTML5, AJAX are user has loaded an initial slim version, after that every
getting the likes of developers to build their web applications subsequent request will take very less amount of time
and some frameworks like AngularJS which are built on top because it is now refreshing that particular part or region of
of the JavaScript are making the life of developers very easy. a page rather than reloading an entire page. The control
The idea behind using AngularJS in web application is to remains on one page till the user is on that website and that
make your web application modular and easy to maintain. single page communicate with the server behind the curtain.
AngularJS brings MVC (Model View Controller) capability to
your application. After using minified and compressed files in II. SINGLE PAGE APPLICATION (SPA)
your application, the size reduces to some KBs which will
results in faster loading of pages. The SPA is a web application that fully loads all of the
resources in initial request and then the page components
Keywords— Single Page Application, AngularJS, Web Application. are replaced by other component depending on user
interaction. When we compare SPA with traditional web
I. INTRODUCTION application, we can see there exist an analogy between
The traditional websites which were introduced in early ‘states’ of SPA and ‘web pages’, navigation of ‘web
days of Internet had the sheer purpose of serving static pages’ in traditional web application is analogous to ‘state’
pages (content) to its client, which included content like navigation in SPA.
images, CSS, JavaScript, etc. as the years went people
A. Definition
started using websites to publish their business and explore
it to world, by the introduction of e-commerce, the need of “Single Page Application (SPA) is composed of
providing current status of business did rise and that individual components that can be replaced/updated
requirement lead to serving the dynamic pages which were independently, without refreshing/reloading whole page so
the mirror image of live status of business. Technologies that the entire page needs not to be reloaded on every user
like Asynchronous JavaScript and XML (AJAX) were used action.”
to dynamically load the data from database. AJAX helped 1) Individual Components: Entire page is divided into
to introduce dynamic content to web pages, However, using smaller components that interact with each other.
AJAX we can built desktop applications, So to achieve
same user experience on mobile applications, Single Page 2) Replaced/Updated: A component/region/part of a
Application have been developed. We can build Single page replaced/updated with any changes on user requests.
Page Application with JavaScript too, but development and 3) Refreshing/Reloading: The entire page never
maintenance of front end using JavaScript is more complex. reloaded/refreshed, rather new content is loaded in some
Frontends with AngularJS is easy to develop and maintain, part or section as per new data.
since AngularJS frontend is broken down into 3
components Model, View and Controller (MVC). 4) User actions: Single Page Application is responsible
In the traditional approach, when user dose any for handling all user inter actions such as button click, input
interaction with a page, like button click then new page is from keyboard etc. very fast and hence leads to very fluid
loaded and generated from scratch to display a response on user interface.
user’s window. This requires more bandwidth as well as SPA allows more flexible and elegant way of dealing
time. with data. Refreshing particular part or a section of a page
without refreshing an entire page is main goal that SPA is

www.ijcsit.com 2876
Madhuri A. Jadhav et al, / (IJCSIT) International Journal of Computer Science and Information Technologies, Vol. 6 (3) , 2015, 2876-2879

serving, but all this flexibility requires more interactive In SPA AngularJS,
interface and this leads to better user experience.  Client makes initial request to open a particular
When we build SPA with JavaScript front end becomes website or application.
very complex. In bigger projects many developers work  Server respond with HTML pages along with images,
collaboratively to build front end. If the code is very CSS, script files, and other external resources.
difficult to understand because of no separation of layouts  Now when client does any interaction like button click
and business logic then maintenance of that code becomes on input from keyboard with a page, it makes a new
very difficult. This issue of maintenance of code of bigger request to a server.
projects is solved if that Single Page Application is build  Server now responds with only user’s action result not
with AngularJS. Since AngularJS divides the front end into the entire HTML page again. That is server responds
3 parts. with a JSON (JavaScript Object Notation) which
 Model includes only result of user’s action.
 View  At client side that page is not reloaded rather a
 Controller particular part of a page is replaced/updated with that
Code that is easy to read and understand becomes a key response. Hence very less bandwidth as well as time is
to achieve high efficiency and good quality as well as leads required for this Client-Server Request-Response
to fluid user interface. Cycle. This leads to very fluid user interface.
B. Client-Server Request-Response Cycle
C. SEO in SPA:
In a traditional approach,
 Client makes initial request to open a particular Search Engine Optimization (S.E.O.) is the process of
website or application. increasing your web site’s page rank so that more and more
 Server respond with HTML pages along with images, traffic can come to your web site. The content build by
CSS, script files, and other external resources. SPA’s is dynamic and search engines have difficult time
 When client does interactions with a page like button processing them this can result into poor page rank. To
click or input from keyboard, it makes a new request make your SPA S.E.O. friendly you should create HTML
to server. snapshots and regular maintenance is required. Following is
 Server again responds with a whole HTML page not a the basic overview of how search engine optimization
particular part of a page. works,
 At the client side that page is reloaded and hence  Crawler will look at some URL.
requires more time for these Client-Server  (http://mydomain.com/myseo#key=value)
interactions. This leads to more bandwidth and  The crawler request web server to fetch the content of
unsatisfied user experience. that URL.
 Web server returns the HTML snapshot to crawler.
 HTML snapshot is processed by the crawler.
 Search result shows original URL.

III. ANGULARJS
AngularJS is an open source JavaScript framework
maintained by Google and community which can help
developers to create single page applications. Its purpose is
to help developing the web applications with model-view-
controller (MVC) capability in an effort to make
development, maintaining and testing easier. SPA is getting
popular nowadays and the technology like AngularJS aids
to create such applications.
AngularJS helps to create web applications which are
based on HTML, CSS, JavaScript. AngularJS brings the
MVC capability to the web application and hence making it
more modular and easy to develop, maintain and test.
AngularJS introduces additional tags which are called as
directives. These directives are prefix with ‘ng-’ and the
goal of directive is to bind the data to the view/templates
through controller. AngularJS controllers are written in
JavaScript which add the business logic to views which are
nothing but HTML pages.
SPA is fully loaded in initial load and only page
Fig. 1 Client-Server Request-Response Cycle regions/sections are replaced or updated with new page
fragments loaded from server on demand. AngularJS helps
to create such applications easily. AngularJS is fully client

www.ijcsit.com 2877
Madhuri A. Jadhav et al, / (IJCSIT) International Journal of Computer Science and Information Technologies, Vol. 6 (3) , 2015, 2876-2879

side library. AngularJS is based on full Bidirectional Data- src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular

Binding. Bidirectional-Data-Binding Is an automatic way of .min.js"></script>
updating a view whenever model changes, and updating a <script
model whenever view changes. src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angul
AngularJS is the fastest road for us to implement the ar-route.min.js"></script>
simplest website as well as most complicated web <script src="app.js"></script>
applications. In AngularJS main file is index.html that </head>
functions as a base for our entire application or a website. <body ng-app="myapp" ng-controller="myctrl">
Whatever files we required like CSS or scripts, include that <div ng-show=”showme”>
file in index.html and no need to repeat that anywhere else. <label>Enter your Name : <input type=”text”
There is another file menu.html; our site’s navigation goes placeholder=”joe” ng-model=”username”/>
here. We could change site’s wide element for ex. </label><br/>
Navigation icon, just by making changes in this file, not <label><button ng-click=”submit()”>Click Me</button>
required to make changes anywhere else. </label><br/></div>
<div ng-show=”!showme”>
A. AngularJS Controllers <p>Welcome to our website {{ user }}.</p>
AngularJS Controllers are nothing more than plain </div>
JavaScript functions, which are limited to a particular scope </body>
that is for one view there is one controller, which helps in </html>
maintenance of code. Controllers are used to add business
logic to your view. Views are HTML pages. These HTML app.js
pages simply show the data that we bind to them using
Bidirectional data binding. Basically it is the controller's var app=angular.module('myapp',['ngRoute']);
responsibility to glue the Model (data) with the View. app.config(function($routeProvider){
$routeProvider
B. Benefits of AngularJS .when('/',{
1) MVC: templateUrl: 'home.html'
AngularJS breaks down your application into });
Model (data), Views (HTML page), and });
Controllers (logic). This separation helps to easily app.controller('myctrl',function($scope){
develop your web application. $scope.showme = true;
2) Two way binding: $scope.submit = function(){
AngularJS provide a powerful technique called $scope.showme = false;
$scope.user = $scope.username;
two way data binding which allow data to get
}
updated whenever there is change in the Views. });
3) Ease in UI development:
Since AngularJS separates your web application
into MVC pattern, web designers can now create D. Sample Program Explained
Views separately without much of worrying about In our AngularJS sample we start our application by
business logic behind the View. creating HTML page which is presentation part of our
4) Server Communication: sample program. AngularJS libraries are not available to us
AngularJS controllers communicate with server until unless we link them by using following script tags,
behind the scene and they are completely first and second line will bring AngularJS core libraries into
responsible for controlling the behavior of SPA. our application and the last line will attach AngularJS
5) Testing: module that we have created for our sample.
AngularJS provides various modules by which <script
testing your web application becomes easier than src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular
before. .min.js"></script>
<script
C. Sample Program in AngularJS src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angul
home.html ar-route.min.js"></script><script src="app.js"></script>
<!doctype html> We use ng-app and ng-controller directive to inject our
<html lang="en"> ‘myapp’ module and ‘myctrl’ controller to our page.
<head>
<meta charset="UTF-8"> <body ng-app="myapp" ng-controller="myctrl">
<title>Single Page Application in AngularJS </title> ng-model directive is used to bind the data between
<script
controller and views, 

www.ijcsit.com 2878
Madhuri A. Jadhav et al, / (IJCSIT) International Journal of Computer Science and Information Technologies, Vol. 6 (3) , 2015, 2876-2879

<input type=”text” placeholder=”joe” ng- IV. CONCLUSION

model=”username”/> Single Page Application is very easy to build. It loads
and ng-show directive takes the Boolean value ‘true’ or entirely for the first time and then every subsequent request,
only a part of particular page is goes on updating or
‘false’ which allows us to display and hide the content of
changing as per server’s response on client’s interactions
web page. without refreshing the entire page. This saves bandwidth as
<div ng-show=”showme”> well as time required for this Client-Server Request-
Response Cycle. Single Page Application built with
Expressions in AngularJS are written inside {{}} curly
AngularJS structured their frontend into Model, View,
brasses which are evaluated on page load or some event. Controller pattern and hence very easy to maintain a code.
<p>Welcome to our website {{ user }}.</p> Code that is very easy to read and understand is a crucial
part for achieving high efficiency and leads to very fluid
We then create our app.js file which have the module and user interface.
controller for our sample program, to create module and
REFERENCES
configure it we use following line of code. 1) http://www.knowarth.com/single-page-application-angular-js/
2) https://docs.angularjs.org/api
var app=angular.module('myapp',['ngRoute']); 3) http://codeforgeek.com/2014/12/single-page-web-app-angularjs/
4) .http://www.diva-
app.config(function($routeProvider){ portal.org/smash/get/diva2:571223/FULLTEXT01.pdf
5) .http://en.wikipedia.org/wiki/Single-page_application
We also inject the ‘ngRoute’ dependency to our module 6) .https://scotch.io/tutorials/single-page-apps-with-angularjs-routing-
and-templating
inside [] square brackets. Configuring routes in AngularJS 7) https://www.airpair.com/angularjs/building-angularjs-app-tutorial
is done in following way, 8) ].http://www.codeproject.com/Articles/808213/Developing-a-Large-
Scale-Application-with-a-Single
$routeProvider 9) .http://code.tutsplus.com/tutorials/3-reasons-to-choose-angularjs-for-
.when('/',{ your-next-project--net-28457
templateUrl:'home.html'
});
Controllers are the backbone of AngularJS and they are
defined in following code snippet.

app.controller('myctrl',function($scope){
/* business logic goes here. */ });

www.ijcsit.com 2879