CSE4004 – Web Technologies

Advanced Technologies
MVC Architecture 2

• MVC architecture has become an extremely common and favoured

design pattern for creating web applications.
• MVC stands for:-
✓ Model(M) : Handles the data(database).
✓ View(V) : Handles what the user sees(html, css, js).
✓ Controller(C) : Acts as a mediator between view and model.
• Most modern web frameworks in JS follow the MVC design pattern
encouraging developers to write clean, structured code.
• It allows the developers to benefit all the benefits of modularity along
with integrating a structure that accommodates multiple developers
working on the same project.

November 23, 2024

MVC Architecture 3

Model
• The Model component deals with the data of the application.
• This component is responsible for managing the data, logic, and rules of the
application.
View
• Handles the User Interface(UI). This component typically consists of the html,
css, and static js files.
• The view component is used to attach and trigger user events but the event
handling comes under the domain of the controller .

November 23, 2024

MVC Architecture 4

Controller
• The primary responsibility of a controller is to handle the events triggered by
user input and also acts as a mediator between the view and model.
• In other words, the controller contains client-side specific logic.
• The controller provides various functions based on events that can be
triggered and then contacts the model for reading/updating data and presents
the new information to view component to be shown to the user.

November 23, 2024

Working of MVC Architecture 5

November 23, 2024

Working of MVC Architecture
6

November 23, 2024

MVC Architecture 7

November 23, 2024

MVC frameworks 8

Some of the most popular and extensively used MVC frameworks are listed
below.
– Ruby on Rails
– Django
– CherryPy
– Spring MVC
– Catalyst
– Rails
– Zend Framework
– Fuel PHP
– Laravel
– Symphony

November 23, 2024

Types of JavaScript frameworks 9

• JavaScript frameworks categorizing into the front end, back end and
testing ones.
– Front End JavaScript framework
• React JS
• Vue Js
• Angular JS
• Ember JS
• Preact JS
• Svelte JS

November 23, 2024

JS Framework 10

• JS Framework is used to build websites or web applications around.

• JavaScript frameworks are a collection of libraries containing code written in
JavaScript, making life a lot easier for software developers.
• Each JavaScript framework offers pre-built codes for different areas and
different purposes in software development, saving time for the developer.
• JavaScript frameworks follow the model-view-controller paradigm, designed
to improve code quality and maintainability.

November 23, 2024

Types of JavaScript frameworks 11

– Back End JavaScript framework

• Express JS
• Next JS
• Gatsby JS
• Nuxt JS

– JavaScript Testing framework

• Jest
• Mocha
• Jasmine

November 23, 2024

Angular JS 12

• One of the most powerful, efficient, and open-source JavaScript

frameworks is Angular.

• AngularJS is open source, completely free, and used by thousands of

developers around the world.

• Google operates this framework and is implemented to use for developing

a Single Page Application (SPA).

• It extends the HTML into the application and interprets the attributes to
perform data binding.

November 23, 2024

 AngularJS 13

• AngularJS is a JavaScript framework written in JavaScript.

• AngularJS is distributed as a JavaScript file, and can be added to a web

page with a script tag:

• <script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
AngularJS extends HTML with ng-directives.
• The ng-app directive defines an AngularJS application.
• The ng-model directive binds the value of HTML controls (input, select,
textarea) to application data.
• The ng-bind directive binds application data to the HTML view.
November 23, 2024
AngularJS directive 14

• AngularJS starts automatically when the web page has loaded.

• The ng-app directive tells AngularJS that the <div> element is the "owner"
of an AngularJS application.
• The ng-model directive binds the value of the input field to the application
variable name.
• The ng-bind directive binds the content of the <p> element to the
application variable name.

November 23, 2024

AngularJS Example 15

<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></
script>
<body>
<div ng-app="">
<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
</body>
</html>

November 23, 2024

AngularJS Directives 16

• AngularJS directives are HTML attributes with an ng prefix.

• The ng-init directive initializes AngularJS application variables.
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<body>
<div ng-app="" ng-init="firstName=‘VIT-AP University'">
<p>The name is <span ng-bind="firstName"></span></p>
</div>
</body>
</html>

November 23, 2024

AngularJS Expressions 17

• AngularJS expressions can be written inside double braces:

{{ expression }}.

• AngularJS expressions can also be written inside a directive: ng-

bind="expression".

• AngularJS will resolve the expression, and return the result exactly where
the expression is written.

• AngularJS expressions are much like JavaScript expressions: They can

contain literals, operators, and variables.

• Example {{ 5 + 5 }} or {{ firstName + " " + lastName }}

November 23, 2024
AngularJS Data Binding 18

• Data binding in AngularJS is the synchronization between the model

and the view.
Data Model
• The data model is a collection of data available for the application.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname = "John";
$scope.lastname = "Doe";
});
• You can use the ng-bind directive, which will bind the innerHTML of
the element to the specified model property.
<p ng-bind="firstname"></p>

November 23, 2024

AngularJS Modules 19

• The module is a container for the different parts of an application and

controllers.
• All controllers always belong to a module
Creating a Module
• A module is created by using the AngularJS function angular.module
<script>
<div ng-app="myApp">...</div>
var app = angular.module("myApp", []);
</script>

November 23, 2024

Two-way Binding 20

• Data binding in AngularJS is the synchronization between the model and the
view.
• When data in the model changes, the view reflects the change, and when
data in the view changes, the model is updated as well.
• This happens immediately and automatically, which makes sure that the
model and the view is updated at all times.

November 23, 2024

How to add controller to a module 21

<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "Ajith";
$scope.lastName = “Kumar";
});
</script>
</body> </html> November 23, 2024
How to add controller to a module
22

November 23, 2024

AngularJS Scopes
23
• The Scope is an object that is specified as a binding part between the HTML
(view) and the JavaScript (controller). It plays a role of joining controller with
the views. It is available for both the view and the controller.
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/
angular.min.js"></script> <body>
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{carname}}</h1>
</div> <script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.carname = "Volvo";
}); </script>
<p>The property "carname" was made in the controller, and can be referred to in
the view by using the {{ }} brackets.</p>
</body> </html>
November 23, 2024
AngularJS Controllers
24

• AngularJS controllers are used to control the flow of data of AngularJS

application. A controller is defined using ng-controller directive. A controller is a
JavaScript object containing attributes/properties and functions. Each controller
accepts $scope as a parameter which refers to the application/module that
controller is to control.

November 23, 2024