CPS630-W25, Lab 7 – Web Applications Due: March 17, 2025, 11:59pm

(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).

By clicking at Home: Home Aboutus Reviews

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

Step 4-Add different Views to the program using AngularJS routing:

For this purpose, first include “angular-route” script after the main “angular” script,

<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>

and then Use “ngRoute” directive to enable the “routing”:

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

Step5-Define an HTML layout for the web-page:

After defining layout for the web-page, use “ng-view” directive to locate the exact place of each view on the web-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>
<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: '/'});
});

Step7-Build a Controller for each route that was defined in $routeProvider:

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

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.

Deliverables & Marking Schema

- Go through the 10 steps above and develop your SPA architecture in “test-spa.html” to be working as specified. All
you need to do is just understanding the directives at each step and then combining the pieces of the codes together to
create the SPA architecture. This process will direct you to develop the major part of your project iteration-3.
- The marks for Lab-7 will be based on these parts: [Total 10 Marks = weight 2%]
1) Lab attendance is mandatory (week of Mar17) to get marks for the total Labs’ solution. [1 Mark]
2) The teams should provide a demo of the completed code “test-spa.html” that generates the expected outputs should
be provided in the Lab-7 (steps 2-9, each step 1 mark), and answer the TA questions during the Lab time. The TAs
will release the marks after evaluating presentations in the Lab and the submissions. [9 Marks]

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/