Modern survey says that people like equally to browse website from mobile phone as
desktop and it is said that , people will browse web application more from
mobile than desktop in coming days. Now, there are certain limitation in mobile
browser, it’s display size, processing speed, native storage capacity are few
of them.
To keep those minds, modern application turning into very lightweight
API based formation rather than heavy weight post back in ASP.NET. The concept of SPA(Single Page Application )
has introduces. The fundamental idea behind single page application is , “shell
page or master page will load at the first time and page let will load in every
next subsequent request”.
What is the advantage
of it?
First of all , it will improve performance of application.
As main page is not loading each time, the HTTP response will be much lighter.
It may send JSON data or chunk of HTML in response body. The scenario fit best in case of mobile-based
application or the website where customer would like to visit it in mobile.
How to implement SPA
?
There is no straightforward answer for this question. As SPA is a style , we can implement it in
many ways. There are many awesome JS library in market which gives facility to
implement MV* design pattern in client side. We can pick any one of them and
can implement SPA or we can implement SPA with the help if JQuery AJAX library
by making AJAX request to load page let.
In this example, we will use AngularJS to implement SPA application.
We know that AngularJS is a awesome library
which gives MVC pattern in client side development. As this is not AngularJS
article, we will directly jump into implementation without discussion much
about angularJS but you will get advantage of you have hands on experience in
angularJS.
Let’s start to
implement
Take one web application in VisualStudio and try to
implement below structure. I like to
create one app directory and dump all AngularJS related stuff there. The
controller directory will contain controllers in angularJS and View directory
will contain the page let, which is load on demand on master page.
Create master page
Here is the code for master page. It’s simple and self
descriptive.
<!DOCTYPE html>
<html ng-app="mySPA">
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.min.js"></script>
</head>
<body>
<div style="height:50px;background-color:aquamarine;">
This is Fixed header <br />
<a href="#/aboutme"> About Me</a>
<a href="#/contactme"> Contact Me</a>
</div>
<div ng-view="">
</div>
<div style="height:50px;background-color:aquamarine;">
This is Fixed Footer <br />
</div>
<script src="app/app.js"></script>
<script type="text/javascript" src="app/controller/aboutmeController.js"></script>
<script type="text/javascript" src="app/controller/contactmeController.js"></script>
</body>
</html>
In header portion,
we have give reference of angularJS and the route module of AngularJS. The
route module will handle routing in application and it comes in separate
package.
Create module and routing in application.
We know that module
is the root node of Angular and in module node; we will attach all other nodes.
Here we have created ‘mySPA’ module and injected ‘ngRoute’ into it. The reason
is, we want to use routing mechanism in this module.
'use
strict'
var app = angular.module('mySPA', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider.when("/aboutme", {
controller: "aboutmeController",
templateUrl: "/app/view/about.html"
});
$routeProvider.when("/contactme", {
controller: "contactmeController",
templateUrl: "/app/view/contact.html"
});
});
$routeProvider
service provides service of routing. We are seeing that , when user will
request for “/aboutme” path , the routing mechanism will load about.html page
from view directory in master page and along with , it will execute aboutmeController.
Same will happen in
case of “/contactme” path.
We will see that
the, new page will not load but the page let will load in master page and url
will point to fragment.
Create view pages
Just add two view
pages called “about.html” and “contact.html” in view directory and add below
code in both of them.
<div>
{{message}}
</div>
Here , the message
is a placeholder and the value will get set within controller.
Create controllers
Now, we will add two
JS files in controller directory under app. Both will act as controller of MVC framework.
Here is sample code example.
This is the code for
aboutmeControler. It takes one service called $scope and we are setting
placeholder value within controller using $scope.
'use
strict'
app.controller('aboutmeController', function ($scope) {
$scope.message = 'Welcome to about me page';
});
Here is code for contactmeController.
The operation is same like previous one , just message value is the difference.
'use
strict'
app.controller('contactmeController', function ($scope) {
$scope.message = 'Welcome to Contact me page.';
});
The purpose of
setting both controllers is to show proper message when page let will get load
in master page as per routing.
So, when user will
load about me page , she should see the message associated with
aboutmeController and when user will load contactme page , she should see the message
which we have defined in contactmeController.
Let us browse contactme link and please observe the url,
It’s still pointing to index.html page and the contactme page let has loaded in
view area.
Now, if we browse ,
aboutme link, we will see the message which we have set in controller but the
master page is still in url.
Conclusion:-
Now a days , SPA is
really getting popular ,not only for mobile but also for web. So, as developer
, one should learn to implement SPA to compete with modern web technology. I
hope this article will give you fundamental idea of SPA using AngularJS.
I wanted to thank you for this excellent read!! I definitely loved every little bit of it. I have bookmarked your web site to check out the latest stuff you post.
ReplyDeleteAngularjs Development
Thanks for the useful information. Very informative.If you want to learn Angular js course online, please visit below site.
ReplyDeleteAngular js online training
Angular js online course
Angular js Online Training in Hyderabad
Angular js Online Training in Bangalore
Thanks for sharing your valuable information,Such a nicely every thing brief in this article. I wanna want to more different things which you post in future, already bookmarks your website for future readings post. Want to learn more about Angularjs get in touch with us or contact asap AngularJs development company in UK
ReplyDeleteThanks