WT - Unit-V
Part - A
1) A small startup wants to build an online task management [Link] want the application to load
quickly, avoid full-page reloads, and provide a smooth user experience when navigating between
tasks,projects,and dashboards. Show how the Single Page Application (SPA) is implemented in a
web project
Answer:
A Single Page Application (SPA) is built using JavaScript so that different sections (like tasks,
projects, dashboard) update on the same web page without reloading the whole site. SPA uses routing to
switch views and provides a smooth, fast user experience.
2) A college online examination portal is being developed where students can register, take exams,
and view results. The development team decides to use AngularJS with MVC
architecture to manage the application efficiently. Point out the benefits of using MVC architecture
in AngularJS.
Answer:
● MVC separates application logic, UI, and data, making development and maintenance easier.
● It promotes code reusability and modularity, so components can be reused across the app.
● Two-way data binding keeps the data and view synchronized in real-time.
● Dependency injection simplifies managing dependencies and improves testability.
● Supports parallel development by separating roles of model, view, and controller.
3) An online student portal allows students to enter their names and view a list of registered courses
dynamically. The development team decides to use AngularJS to make the interface
[Link] plan to use the ng-model attribute for binding input fields and ng-repeat to display
the list of courses. Demonstrate the use of two ng attributes in an AngularJS application.
Answer:
use of two AngularJS attributes, ng-model and ng-repeat:
ng-model binds an input field to a variable in the AngularJS scope, allowing two-way data
binding.
ng-repeat loops through a list or array and dynamically displays each item in the HTML.
Example:
<div ng-app="" ng-init="studentName=''">
Enter Name: <input type="text" ng-model="studentName">
<p>Your name is: {{studentName}}</p>
<ul>
<li ng-repeat="course in ['Math', 'Science', 'History']">
{{course}}
</li>
</ul>
</div>
4) An online student portal allows students to update their profile information, such as name and
email, and see the changes immediately without reloading the page. The development team
uses AngularJS two-way data binding to achieve this dynamic behavior. Demonstrate data binding
in an AngularJS application.
Answer:
Here is a simple demonstration of data binding in AngularJS for a student portal:
<div ng-app="" ng-controller="MyController">
<!-- Input field bound to 'name' -->
Enter Name: <input type="text" ng-model="name">
<p>Your name is: {{name}}</p>
<!-- Input field bound to 'email' -->
Enter Email: <input type="email" ng-model="email">
<p>Your email is: {{email}}</p>
</div>
<script>
[Link]('myApp', [])
.controller('MyController', function($scope) {
});
</script>
5) An online shopping portal displays a list of products along with their prices. The portal needs to
format the product names in uppercase and display prices in currency format dynamically
using AngularJS. Prove the purpose of filters in AngularJS with an example.
Answer:
Filters in AngularJS format data for display without changing the actual data. They help dynamically
transform values like converting strings to uppercase or formatting numbers as currency.
Example:
<div ng-app="myApp" ng-controller="ProductController">
<ul>
<li ng-repeat="product in products">
{{ [Link] | uppercase }} - {{ [Link] | currency }}
</li>
</ul>
</div>
<script>
[Link]('myApp', []).controller('ProductController', function($scope) {
$[Link] = [
{name: 'Laptop', price: 1000},
{name: 'Phone', price: 500},
{name: 'Tablet', price: 300}
];
});
</script>
Purpose:
uppercase filter converts product names to [Link] filter formats the price as currency
dynamically.
6) A startup is planning to deploy a microservices-based application. They want to ensure that each
service runs consistently across different environments, from development to production, without
worrying about dependency [Link] the key features of a Docker container.
Answer:
● Consistency and Portability
● Isolation
● Lightweight and Fast
● Scalability
● Simplified Deployment
● Supports Microservices Architecture
7) A tech startup is developing a high-performance web application that relies heavily on
JavaScript for dynamic features and real-time updates. The developers want to ensure fast
execution and efficient memory management for all JavaScript code in the application.
Demonstrate the V8 engine executes JavaScript code in a web application with an example.
Answer:
Parsing: V8 reads the JavaScript source code and converts it into an Abstract Syntax Tree, breaking
down the code into smaller components.
Bytecode Generation: The AST is transformed into bytecode, a low-level intermediate code that is
quick to execute.
Optimization: Frequently executed code sections are identified and compiled into optimized machine
code for faster execution.
Execution: The machine code runs directly on the hardware for high-speed performance.
Deoptimization: If runtime assumptions fail, V8 reverts the code back to bytecode to maintain
correctness.
8)An e-commerce company is planning to develop a real-time product catalog and shopping cart
system. The development team is evaluating whether to use React or AngularJS for building the
frontend. They are particularly concerned about performance, data binding, and the learning curve
for new developers. Differentiate React and Angular JS based on performance, data binding, and
learning curve.
React vs AngularJS (2 Marks):
● Performance: React offers better performance due to its virtual DOM and efficient rendering,
while AngularJS uses real DOM, which can be slower for large applications.
● Data Binding: AngularJS uses two-way data binding, which can lead to performance issues in
complex apps; React uses one-way data binding, providing better control and performance.
● Learning Curve: React has a gentler learning curve, especially for developers familiar with
JavaScript. AngularJS has a steeper learning curve due to its extensive concepts and syntax.
9) A college online portal allows students to register, submit assignments, and check results. The
development team decides to use Firebase as the backend to store student data, provide
real-time updates, and manage authentication. Summarize the use of Firebase in web application
development with an example.
Answer:
Firebase is a comprehensive backend platform for web app development that offers real-time database,
user authentication, hosting, and cloud functions.
Use in Web Application Development:
Stores student data securely in Realtime Database or Cloud Firestore with instant syncing across
devices.
Provides Authentication services to manage user signup, login, and security easily.
Enables hosting of web apps with fast, secure deployment using Firebase Hosting.
Supports running backend code with Cloud Functions without server management.
Delivers real-time updates instantly Increasing user experience.
10) A college online notification system needs to send real-time alerts to students whenever new
notices or exam schedules are published. The development team decides to use [Link] for its
asynchronous, event-driven features to handle multiple student requests efficiently. Express the
features of [Link] in a web application.
Answer:
features of [Link] in web application development:
● Asynchronous and Event-Driven
● Single-Threaded but Highly Scalable
● Fast Performance
● Real-Time Communication
● Cross-Platform: Runs on Windows, macOS, and Linux, allowing development and deployment
across diverse environments.
● Rich Ecosystem with NPM
Part - B
A startup company is planning to launch an online project management platform. The team needs
to choose an appropriate web application framework and supporting development tools to speed up
the development process, ensure scalability, and maintain code quality. They are considering
frameworks like Django, Angular, or React, along with tools for debugging, testing, and
deployment. Differentiate the effects of various web application frameworks.
1. Django (Python-based Backend Framework)
Effect on Development Speed:
● Rapid development with built-in admin panel, ORM, authentication, and routing.
● Convention-over-configuration reduces time spent on boilerplate code.
● Encourages DRY (Don't Repeat Yourself) principles.
Effect on Scalability:
● Scales well vertically and horizontally with tools like Celery (for background tasks) and Django
REST Framework for APIs.
● Can handle high-traffic applications when deployed with services like Nginx, Gunicorn, and
Docker.
Effect on Code Quality:
● Promotes clean, modular code using the MTV (Model-Template-View) architecture.
● Strong community and best practices guide maintainable coding standards.
● Built-in unit testing support improves test coverage.
2. Angular (Full-fledged Frontend Framework)
Effect on Development Speed:
● Full-featured framework with built-in routing, form validation, and state management.
● CLI tools accelerate scaffolding, testing, and deployment.
● TypeScript-based structure helps detect errors during development.
Effect on Scalability:
● Ideal for large-scale enterprise apps with complex UI logic.
● Supports lazy loading and modular architecture, improving performance and scalability.
● Dependency injection improves code reusability and testing.
Effect on Code Quality:
● Enforces strong structure and TypeScript usage, resulting in maintainable and reliable code.
● Supports comprehensive testing (unit and E2E) with tools like Karma and Protractor.
● Two-way data binding can lead to complex debugging if not well-managed.
3. React (Frontend Library)
Effect on Development Speed:
● Lightweight and fast for building UI components.
● Offers flexibility in choosing libraries for routing, state management (e.g., Redux), and form
handling.
● Huge ecosystem speeds up development through reusable components and packages.
Effect on Scalability:
● Component-based architecture is well-suited for scalable UIs.
● Easily integrates with microservices or headless backend systems like Django.
● React’s virtual DOM boosts performance in large, dynamic interfaces.
Effect on Code Quality:
● Encourages clean code practices using functional components and hooks.
● Easier testing with tools like Jest and React Testing Library.
● Lacks opinionated structure, so without discipline, codebases can become inconsistent.
Comparison Summary Table:
Feature Django Angular React
Language Python TypeScript JavaScript / TypeScript
Layer Backend (Full-stack) Frontend (Full Frontend (UI Library)
Framework)
Development Fast Medium (more setup Fast (minimal setup)
Speed (batteries-included) needed)
Scalability High (modular, async High (modular, DI) High (component-based)
support)
Code Quality High (MTV, High (strict typing, DI) Medium-High (flexible, less
Support conventions) opinionated)
Testing Tools Built-in unittest, Pytest Karma, Jasmine, Jest, React Testing Library
Protractor
Deployment WSGI + Gunicorn, Angular CLI build Vite/Webpack, Docker
Docker tools
2)i)A company is building an employee management system using AngularJS. The project team
wants to implement a structured approach for handling data, business logic, and the user
[Link] also need dynamic features such as real-time data binding,form handling, and list
rendering. Demonstrate the MVC architecture and apply ng attributes of AngularJS with suitable
example.
MVC Architecture in AngularJS (Model-View-Controller)
AngularJS is built on the MVC (Model-View-Controller) architecture, which separates concerns
and makes code more organized, maintainable, and scalable.
1. Model
Represents the data layer. It stores and manages application data.
2. View
Represents the UI. It displays data and captures user inputs.
3. Controller
Contains the business logic. It acts as a bridge between the Model and View, handling data
processing and updating the View.
Use of ng- Attributes in AngularJS
AngularJS uses ng- directives to bind the MVC components together and add dynamic behavior
to HTML.
Common ng- directives used:
● ng-model: Binds form inputs to model data.
● ng-repeat: Loops through data collections.
● ng-controller: Attaches a controller to a view.
● ng-bind: Displays model data.
● ng-submit: Binds form submission to a function.
Example: Employee Management System (Simple Employee List Form)
<!DOCTYPE html>
<html ng-app="employeeApp">
<head>
<title>Employee Management</title>
<script src="[Link]
</head>
<body ng-controller="EmployeeController">
<h2>Employee Management</h2>
<!-- Form to Add Employee -->
<form ng-submit="addEmployee()">
<input type="text" ng-model="[Link]" placeholder="Name" required />
<input type="text" ng-model="[Link]" placeholder="Position" required />
<button type="submit">Add Employee</button>
</form>
<!-- Display Employee List -->
<h3>Employee List:</h3>
<ul>
<li ng-repeat="employee in employees">
{{[Link]}} - {{[Link]}}
</li>
</ul>
<script>
// AngularJS Module and Controller
var app = [Link]('employeeApp', []);
[Link]('EmployeeController', function($scope) {
$[Link] = [
{name: 'Alice', position: 'Manager'},
{name: 'Bob', position: 'Developer'}
];
$[Link] = function() {
$[Link]({
name: $[Link],
position: $[Link]
});
$[Link] = {}; // Clear form
};
});
</script>
</body>
</html>
2)ii)A university is developing an online student portal using [Link] the portal, certain
messages should only appear when a student is logged in, and the text styles (like color and size)
should change dynamically based on student status. Implement the use of condition directive and
style directive in AngularJS with sample program.
To implement conditional display of messages based on student login status and dynamically change text
styles in AngularJS, one can use AngularJS directives ng-if (condition directive) and ng-style (style
directive). Below is a sample program demonstrating these features:
<!DOCTYPE html>
<html ng-app="studentApp">
<head>
<script src="[Link]
</head>
<body ng-controller="StudentController">
<!-- Message shown only if student is logged in -->
<div ng-if="isLoggedIn">
<p ng-style="studentStyle">
Welcome, {{studentName}}! Your current status is '{{studentStatus}}'.
</p>
</div>
<!-- Message shown if student is not logged in -->
<div ng-if="!isLoggedIn">
<p>Please log in to access your portal.</p>
</div>
<script>
[Link]('studentApp', [])
.controller('StudentController', function($scope) {
// Student login status
$[Link] = true; // Change to false to test the other condition
// Student information
$[Link] = 'John Doe';
$[Link] = 'Premium'; // Could be 'Regular', 'Premium', or 'Alumni' etc.
// Dynamic style based on student status
if ($[Link] === 'Premium') {
$[Link] = {
'color': 'green',
'font-size': '20px',
'font-weight': 'bold'
};
} else if ($[Link] === 'Regular') {
$[Link] = {
'color': 'blue',
'font-size': '16px'
};
} else {
$[Link] = {
'color': 'gray',
'font-style': 'italic'
};
}
});
</script>
</body>
</html>
3) i) In an online shopping application, the product name and price are shown using one-way
binding since the user cannot change them. However, when the customer enters the quantity in the
input box,AngularJS uses two-way binding to instantly update the total bill amount on the screen.
Explain the concept of expressions and data binding in Angular JS with an example program.
In AngularJS, expressions and data binding are fundamental concepts that enable dynamic interaction
between the view (HTML) and the model (JavaScript data).
Expressions:
Expressions in AngularJS are used to bind data to HTML. They are written inside double curly braces
{{ expression }} and evaluated against the current scope.
AngularJS expressions are similar to JavaScript expressions but are evaluated against AngularJS scope
variables, allowing dynamic display of data in the view.
Data Binding:
Data binding is the synchronization between the model (data in JavaScript) and the view (HTML).
One-way binding displays data from the model to the view. In AngularJS, this is commonly done
using expressions for read-only data.
Two-way data binding keeps the model and the view in sync such that changes in the input by the user
immediately update the model and reflected back to the view.
Example Program:
Online Shopping Cart with One-way and Two-way Binding
<!DOCTYPE html>
<html ng-app="shopApp">
<head>
<script src="[Link]
</head>
<body ng-controller="ShopController">
<h2>Product Details</h2>
<p>Product Name: {{ productName }}</p> <!-- One-way binding (expression) -->
<p>Price: ${{ price }}</p> <!-- One-way binding (expression) -->
<h3>Order</h3>
<label>Quantity: </label>
<input type="number" ng-model="quantity" min="1" /> <!-- Two-way binding -->
<p>Total Bill: ${{ quantity * price }}</p> <!-- Expression updates instantly -->
<script>
[Link]('shopApp', [])
.controller('ShopController', function($scope) {
$[Link] = "Smartphone";
$[Link] = 300;
$[Link] = 1; // initial quantity
});
</script>
</body>
</html>
Explanation:
{{ productName }} and {{ price }} demonstrate one-way binding using AngularJS expressions to show
product info as read-only.
The <input> uses ng-model="quantity" for two-way binding, which means any change in this input
updates the quantity model instantly.
The total bill is calculated using an expression {{ quantity * price }} that dynamically updates
whenever the quantity changes due to two-way binding.
This seamless synchronization between view and model keeps the data and UI consistent without explicit
DOM manipulation.
Two-way binding connects the model and view bidirectionally, so changes in the view (like user input)
update the model instantly, and changes in the model reflect immediately in the view, done using
[Link] for an online shopping app showing one-way and two-way binding:<!DOCTYPE
html>
<html ng-app="shopApp">
<head>
<script src="[Link]
</head>
<body ng-controller="ShopController">
<h2>Product Details</h2>
<p>Product Name: {{ productName }}</p> <!-- One-way binding -->
<p>Price: ${{ price }}</p> <!-- One-way binding -->
<h3>Order</h3>
<label>Quantity: </label>
<input type="number" ng-model="quantity" min="1" /> <!-- Two-way binding -->
<p>Total Bill: ${{ quantity * price }}</p> <!-- Expression calculates dynamically -->
<script>
[Link]('shopApp', [])
.controller('ShopController', function($scope) {
$[Link] = "Smartphone";
$[Link] = 300;
$[Link] = 1;
});
</script>
</body>
</html>
Here, product name and price are displayed with one-way binding (user cannot change), while the
quantity uses two-way binding (ng-model) allowing instant update of the total bill on the screen via
expression binding ({{ quantity * price }}).
3) ii) In a food delivery app, a controller handles the order details entered by the customer, while a
service calculates delivery charges and total bill. Explain the use Controllers and
Services in Angular JS with example programs.
In AngularJS, controllers and services are the two core building blocks used to organize code and share
logic across the app. Controllers manage the data and behavior for a specific view, while services
encapsulate reusable business logic and can be shared across multiple controllers or components. The
food delivery example below illustrates how a controller handles order details entered by the customer
and a service computes delivery charges and the total bill.
Core ideas
Controllers:
Bind data to the view, respond to user interactions, and coordinate with services to perform business
logic.
Services:
Provide reusable, testable logic (e.g., calculations, API calls) that is independent of any single view.
They are typically singletons, so the same instance is shared across the app.
Example program HTML (view)Uses ng-controller to attach the Order Controller to a portion of the
[Link] ng-model for two-way binding of customer [Link] a function on the service to compute
the total, displaying the result in the view.
<!DOCTYPE html>
<html ng-app="foodApp">
<head>
<script src="[Link]
</head>
<body ng-controller="OrderController as orderCtrl">
<h2>Place Your Order</h2>
<label>Dish: </label>
<select ng-model="[Link]" ng-options="[Link] for d in [Link]"></select>
<br/>
<label>Quantity: </label>
<input type="number" ng-model="[Link]" min="1"/>
<br/>
<label>Delivery distance (km): </label>
<input type="number" ng-model="[Link]" min="0"/>
<br/>
<button ng-click="[Link]()">Calculate Total</button>
<h3>Total Bill: {{ [Link] | currency }}</h3>
<script>
// Define the AngularJS app and module
[Link]('foodApp', [])
// Register the billing service
.service('BillingService', function() {
// Example rates; in a real app, these might come from a server
[Link] = {
"Margherita Pizza": 8.5,
"Paneer Tikka": 9.0,
"Cheese Burger": 7.5
};
[Link] = 0.75; // delivery charge per kilometer
[Link] = 0.08; // 8% tax
[Link] = 2.0;
// Compute total for an order
[Link] = function(dishName, quantity, distance, promoCode) {
const pricePerUnit = [Link][dishName] || 0;
const subtotal = pricePerUnit * quantity;
const delivery = [Link]([Link], distance * [Link]);
const tax = (subtotal + delivery) * [Link];
let discount = 0;
// Example promo code handling
if (promoCode === 'FIRST10') {
discount = (subtotal + delivery + tax) * 0.10;
}
const total = subtotal + delivery + tax - discount;
return { subtotal, delivery, tax, discount, total };
};
})
// Controller that handles the order details
.controller('OrderController', function(BillingService) {
const vm = this;
// Sample menu
[Link] = [
{ name: 'Margherita Pizza' },
{ name: 'Paneer Tikka' },
{ name: 'Cheese Burger' }
];
// User-entered/order-selected data
[Link] = [Link][0].name;
[Link] = 1;
[Link] = 2;
// Placeholder for the computed total
[Link] = 0;
// If you want to expose a promo code option
[Link] = '';
// Expose a method to calculate total using the service
[Link] = function() {
const result = [Link]([Link], [Link], [Link], [Link]);
[Link] = [Link];
// You can also expose other details if needed:
[Link] = {
subtotal: [Link],
delivery: [Link],
tax: [Link],
discount: [Link]
};
};
// Optional: auto-calculate on load
[Link]();
});
</script>
</body>
</html>Key concepts mapped to the code Controller responsibilities:
Manages view-friendly state like selected dish, quantity, and [Link] to user actions
(Calculate Total button) by calling a service and updating the view model (total, breakdown).
Service responsibilities:
Encapsulates pricing logic: dish prices, delivery fees, taxes, and [Link] a single compute
Total method that can be reused anywhere in the app, ensuring consistent billing rules.
Separation of concerns :
Controller handles user interactions and view state; service handles business logic and
[Link] makes the code easier to test, reuse, and maintain, especially as more features (coupons,
promotions, multiple items) are added.
4) i) A university admission portal requires students to fill in their application forms with
mandatory fields like name, date of birth,and course selection. Develop AngularJS form and
validation it.
To create an AngularJS form for student admission with mandatory fields such as name, date of
birth, and course selection, and apply validation, the form should use AngularJS directives like ng-model
for data binding and built-in validation features like ng-required, $error display, and form submission
[Link] is a sample AngularJS form demonstrating these concepts:
<!DOCTYPE html>
<html ng-app="admissionApp">
<head>
<script src="[Link]
<style>
.error {
color: red;
font-style: italic;
}
</style>
</head>
<body ng-controller="FormController">
<h2>University Admission Form</h2>
<form name="admissionForm" novalidate ng-submit="submitForm(admissionForm)">
<!-- Name Field -->
<label>Name:</label>
<input type="text" name="studentName" ng-model="[Link]" ng-required="true" />
<span class="error" ng-show="[Link].$touched &&
[Link].$[Link]">
Name is required.
</span>
<br/><br/>
<!-- Date of Birth Field -->
<label>Date of Birth:</label>
<input type="date" name="dob" ng-model="[Link]" ng-required="true" />
<span class="error" ng-show="[Link].$touched &&
[Link].$[Link]">
Date of Birth is required.
</span>
<br/><br/>
<!-- Course Selection -->
<label>Course:</label>
<select name="course" ng-model="[Link]" ng-required="true">
<option value="" disabled selected>Select your course</option>
<option value="Computer Science">Computer Science</option>
<option value="Mechanical Engineering">Mechanical Engineering</option>
<option value="Business Administration">Business Administration</option>
</select>
<span class="error" ng-show="[Link].$touched &&
[Link].$[Link]">
Course selection is required.
</span>
<br/><br/>
<!-- Submit Button -->
<button type="submit" ng-disabled="admissionForm.$invalid">Submit Application</button>
</form>
<div ng-show="submitted">
<h3>Form submitted successfully!</h3>
<p>Name: {{ [Link] }}</p>
<p>DOB: {{ [Link] | date:'mediumDate' }}</p>
<p>Selected Course: {{ [Link] }}</p>
</div>
<script>
[Link]('admissionApp', [])
.controller('FormController', function($scope) {
$[Link] = {};
$[Link] = false;
$[Link] = function(form) {
if (form.$valid) {
$[Link] = true;
}
};
});
</script>
</body>
</html>
4) ii) A food delivery application has multiple views like restaurant list, menu page, cart, and order
tracking. Demonstrate the role of routers in AngularJS and how does routing help in Single Page
Applications (SPA)?
In AngularJS, routers play a vital role in managing multiple views in Single Page Applications
(SPAs) like a food delivery app with views for restaurant list, menu, cart, and order tracking.
Routing allows navigation between these views without reloading the whole [Link] of Routers
in AngularJSRouters map URLs to templates (HTML views) and controllers that control the [Link]
enable dynamic loading of content based on URL path changes.
Use the AngularJS ngRoute module providing $routeProvider service to define [Link] <div
ng-view></div> as a placeholder where the matched view template will be displayed.
URLs change with a hash (#) to avoid full page [Link] of Routing in SPAsImproves user
experience by loading content dynamically without refreshing the entire page.
Preserves application state as users [Link] deep linking so specific views can be
bookmarked or [Link] modular code organization through separate templates and controllers.
Simple Example Showing Routing for Food Delivery App
<!DOCTYPE html>
<html ng-app="foodApp">
<head>
<script src="[Link]
<script src="[Link]
</head>
<body>
<h1>Food Delivery Application</h1>
<nav>
<a href="#!/restaurants">Restaurants</a> |
<a href="#!/menu">Menu</a> |
<a href="#!/cart">Cart</a> |
<a href="#!/order-tracking">Order Tracking</a>
</nav>
<div ng-view></div> <!-- The view content will load here -->
<script>
[Link]('foodApp', ['ngRoute'])
.config(function($routeProvider, $locationProvider) {
$[Link]('!'); // cleaner URLs
$routeProvider
.when('/restaurants', {
template: '<h2>Restaurant List</h2><p>Display restaurants here</p>'
})
.when('/menu', {
template: '<h2>Menu Page</h2><p>Show food items here</p>'
})
.when('/cart', {
template: '<h2>Your Cart</h2><p>List items in cart here</p>'
})
.when('/order-tracking', {
template: '<h2>Order Tracking</h2><p>Order status updates here</p>'
})
.otherwise({
redirectTo: '/restaurants'
});
});
</script>
</body>
</html>
Routing in AngularJS facilitates smooth navigation between multiple views while maintaining a
single-page context. It improves user experience in apps like food delivery by dynamically loading
different sections (restaurant list, menu, cart, order tracking) based on URL changes. This modular
approach also enhances maintainability and deep [Link] explanation along with the simple example
provides a complete 8-mark answer showing the importance of routing in AngularJS SPAs
