Lab-7
Lab-7
(The TA will evaluate your work by asking questions about the followings in the Lab sessions: Week of Mar17)
Objectives
Creating Single Page Application (SPA) architecture, using AngularJS framework.
Discussion
In order to work on the last iterations of the project, the concept of the Single Page Application (SPA) will be reviewed in
this lab. AngularJS is a powerful javascript framework for building dynamic web applications. Also, because of having
many ready-to-use-modules, it can be used for developing SPA properly. Here are some major features of SPA [1]:
Transformation: In a Single Page Applications (SPA) the data to HTML transformation process (or rendering) is moved
from server to client side. While this transition process in a traditional web-application, must be done at the server side.
Performance: A Single Page Application (SPA), improves the application performance through several ways. To name
a few: it makes it easy to navigate to different pages and to filter contents; it causes taking less time at client-side and
less queries at server-side for loading a web-page; and it uses asynchronous Java Scripts and XML (AJAX) methods,
where AJAX is a method of exchanging data and updating web-sites without refreshing the page.
Working Offline: A Single Page Application (SPA) can still work offline in case of loosing internet connection. And
once the connection is restored, the data at the client-side will be synched with the server-side.
Fast and Responsive: In a Single Page Application (SPA) the whole web-page will not be reloaded through the
navigating process. Instead, only few parts of the page will be refreshed due to new data sent over (on the page) while
the web-application is running.
Future Trend: Comparing to multi-page applications (MPA), SPA has a modern nature and enhanced usability giving
it a new outlook and promising popularity in the applications on various platforms nowadays and in future.
Also:
-For developing SPA, various technologies can be used such as AngularJS, Angular, and NodeJS each with different
sets of functionalities. In order to start developing SPA, AngularJS would be the first one which can be migrated to
other technologies.
-Developing web-Apps (application for mobile devices) is a complex and time consuming process. But AngularJS
makes this process to be really fast (due to available functionalities) for small-sized Apps.
[ref: 6, 7]
1
[ref: 6, 7]
Instructions
Major functionalities of AngularJS such as Controller, Service, Module, and Routing can be accessed through specific
directives. The following 4 examples will review those functionalities with their relevant directives [ref: 1-5]. Just try to
understand and run them, and then go to the instructions for developing Single-Page-Application (SPA).
1- In AngularJS, Controller manages the interaction of data between the Model and the View. It handles the business
logic of the application. (find and run the relevant codes in: Lec8-1-examples and Lec8-2-examples)
2- In AngularJS, Service function is used on a module to implement specific tasks and then it will be a part of the
Controller (being injected). It is a Singleton JavaScript function. (run the code:Lec8-1-examples/ test10-service.html)
3- In AngularJS, Module is a container that the application is created in it. It contains the whole functionality of the
web-page. (find and run the relevant codes in: Lec8-1-examples and Lec8-2-examples)
4- In AngularJS, Routing routes application to different pages but without reloading the entire page. It facilitates the
application to become a SPA. (run the codes: Lec8-1-examples/test9-routing.html and test9-routing-colors.html)
Single Page Application (SPA)-In this section, you will develop a SPA using AngularJS through the following steps.
The original application is expected to display the main and two other pages (below). In the SPA version, the hyper-links
of “Home”, “Aboutus”, and “Reviews” in the main page are the routers, and by clicking at each of them the navigation of
the relevant web-page will happen but without refreshing the whole main page (name it: test-spa.html).
Home
Hello from HomeController
----------------------------------------------------------------------------
By clicking at Aboutus: Home Aboutus Reviews
Aboutus
Hello from AboutusController
----------------------------------------------------------------------------
By clicking at Reviews: Home Aboutus Reviews
Reviews
Hello from ReviewsController
2
Step1-Define a Module:
Building a module to contain the Controller and Service:
var app = angular.module('myApp', []);
Step2-Define a Controller:
app.controller('HomeController', function($scope) {
$scope.message = 'Hello from HomeController';});
Step3-Bind the Module with the application and with the Controller using directives “ng-app” and “ng-controller”:
<!doctype html>
<html ng-app="myApp">
<head>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/.../angular.min.js"></script>
</head>
<body ng-controller="HomeController">
<h1>{{message}}</h1>
<script src="app.js"></script>
</body>
</html>
The line below should be displayed after running the program successfully at this point, which means the Module has
been setup with the Controller correctly: Hello from HomeController
<script
src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/.../angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/.../angular-
route.min.js"></script>
<!doctype html>
<html ng-app="myApp">
<head>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/.../angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/.../angular-
route.min.js"></script>
</head>
<body>
<div ng-view></div>
<script src="app.js"></script>
</body>
</html>
3
Step 6-Configure the navigation to different views, using $routeProvider service from ngRoute:
Define a Controller and a TemplateUrl for each route; also to catch the navigation of a route which is not existed use the
exception handling as below:
var app = angular.module('myApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'pages/home.html',
controller : 'HomeController'})
.when('/aboutus', {
templateUrl : 'pages/aboutus.html',
controller : 'AboutusController'})
.when('/reviews', {
templateUrl : 'pages/reviews.html',
controller : 'ReviewsController'})
.otherwise({redirectTo: '/'});
});
app.controller('AboutusController', function($scope) {
$scope.message = 'Hello from AboutusController';});
app.controller('ReviewsController', function($scope) {
$scope.message = 'Hello from ReviewsController';});
Step 8-Configure each web-page: (you can add “message” at Step8 and “Web-Page” at Step10)
home.html
<h1>Home</h1>
<h3>{{message}}</h3>
aboutus.html
<h1>Aboutus</h1>
<h3>{{message}}</h3>
reviews.html
<h1>Reviews</h1>
<h3>{{message}}</h3>
Step 9-Add links to HTML web-page to navigate the expected configured page:
<!doctype html>
<html ng-app="myApp">
<head>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/.../angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/.../angular-
route.min.js"></script>
</head>
<body>
<a href="#/">Home</a>
<a href="#/aboutus">Aboutus</a>
<a href="#/reviews">Reviews</a>
<div ng-view></div>
<script src="app.js"></script>
</body></html>
4
Step10-Add the HTML of routing pages to index.html using ng-template directives. AngularJS will load the content to
the template cache when the “ng-template” directive is detected, and in this case the Ajax request will not be performed.
<!doctype html>
<html ng-app="myApp">
<head>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/.../angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/.../angular-
route.min.js"></script>
</head>
<body>
<script type="text/ng-template" id="pages/home.html">
<h1>Home</h1>
<h3>{{message}}</h3>
</script>
<script type="text/ng-template" id="pages/aboutus.html">
<h1>Aboutus</h1>
<h3>{{message}}</h3>
</script>
<script type="text/ng-template" id="pages/reviews.html">
<h1>Reviews</h1>
<h3>{{message}}</h3>
</script>
<a href="#/">Home</a>
<a href="#/aboutus">Aboutus</a>
<a href="#/reviews">Reviews</a>
<div ng-view></div>
<script src="app.js"></script>
</body>
</html>
Note-Feel free to change the code and the layout of your web-page.
Note-Contact the instructor if you have any questions or need any more explanations about this code or relevant lecture.
References:
1. https://angularjs.org/
2. https://docs.angularjs.org/
3. https://code.angularjs.org/
4. https://angular.io/start
5. https://www.w3schools.com/
6. https://gearheart.io/
7. https://www.softwaretestinghelp.com/