By,

Gowtham G
Bettina S
3rd year -CSE
 CONTENT
Introduction Scope of Angular JS
Why Angular Js? AngularJS Structure
MVC and MVVM ? Where It Is Used AngularJS
History Of Versions AngularJS Benefits Of AngularJS
Futures Of AngularJS Angular VS AngularJS Difference
Data Binding
Routing in AngularJS
 INTRODUCTION

• AngularJS is a powerful front-end

framework developed by google that
simplifies the development of dynamic web
applications and SPA. It allows developers
to create complex web applications with ease,
using A declarative approach to building user
interfaces.
History of Angular JS
 WHY ANGULAR JS?
Ready to use Template:
AngularJS is mainly plain HTML, and it mainly makes use of the plain HTML
template and passes it to the DOM and then the AngularJS compiler. It traverses the
templates and then they are ready to use.
Easy to work with:
all you need to know to work with AngularJS is basics of html,css and
javascript, not necessary to be an expert in these technologies.
Time-saving:
AngularJS allows us to work with components and hence we can use them again
which saves time and unnecessary code.
MVC Pattern-Model View Controller
 MVC OVERVIEW

Model View Controller

 MODEL VIEW CONTROLLER

Model ,View ,Controller

What is MVVM?
Model in MVVM
View in MVVM
View model in MVVM
Implementing MVVM in AngularJS
Best practices for using MVC and MVVM in AngularJS
 MODEL IN MVC

• IN MVC ARCHITECTURE, THE MODEL REPRESENTS THE DATA AND

BUSINESS LOGIC OF THE APPLICATION. IT IS RESPONSIBLE FOR
STORING AND MANIPULATING DATA, AS WELL AS ENFORCING
BUSINESS RULES AND VALIDATIONS. THE MODEL ACTS AS AN
INTERMEDIARY BETWEEN THE VIEW AND THE CONTROLLER,
ENSURING THAT THE DATA IS CONSISTENT AND UP-TO-DATE.
• FOR EXAMPLE, IN A SHOPPING CART APPLICATION, THE MODEL
WOULD CONTAIN INFORMATION ABOUT THE ITEMS IN THE CART,
SUCH AS THEIR NAMES, PRICES, AND QUANTITIES. IT WOULD ALSO
PERFORM CALCULATIONS TO DETERMINE THE TOTAL COST OF THE
ORDER AND APPLY ANY DISCOUNTS OR TAXES. THE CONTROLLER
WOULD INTERACT WITH THE MODEL TO RETRIEVE AND UPDATE THIS
INFORMATION, WHILE THE VIEW WOULD DISPLAY IT TO THE USER IN
A VISUALLY APPEALING FORMAT.
 VIEW IN MVC

• THE VIEW IN MVC ARCHITECTURE IS RESPONSIBLE FOR DISPLAYING THE DATA

FROM THE MODEL AND UPDATING THE UI BASED ON CHANGES IN THE MODEL.
THE VIEW RECEIVES DATA FROM THE CONTROLLER AND RENDERS IT TO THE
SCREEN. IT ALSO LISTENS FOR USER EVENTS, SUCH AS BUTTON CLICKS OR
FORM SUBMISSIONS, AND SENDS THEM TO THE CONTROLLER FOR
PROCESSING. IN ANGULARJS, VIEWS ARE IMPLEMENTED USING HTML
TEMPLATES THAT ARE BOUND TO THE DATA IN THE MODEL.
• ONE OF THE KEY ADVANTAGES OF USING THE VIEW IN MVC ARCHITECTURE IS
THAT IT ALLOWS FOR A CLEAR SEPARATION OF CONCERNS BETWEEN THE UI
AND THE BUSINESS LOGIC. THIS MAKES IT EASIER TO MAINTAIN AND UPDATE
THE CODEBASE, AS CHANGES TO ONE COMPONENT DO NOT AFFECT THE
OTHERS. ADDITIONALLY, BY KEEPING THE UI CODE SEPARATE FROM THE
BUSINESS LOGIC, IT BECOMES EASIER TO TEST AND DEBUG EACH COMPONENT
INDEPENDENTLY.
 CONTROLLER IN MVC

• THE CONTROLLER IS THE HEART OF THE MVC ARCHITECTURE IN

ANGULARJS. IT ACTS AS AN INTERMEDIARY BETWEEN THE MODEL AND
THE VIEW, RECEIVING INPUT FROM THE USER AND UPDATING THE
MODEL ACCORDINGLY. THE CONTROLLER IS RESPONSIBLE FOR
HANDLING USER ACTIONS, SUCH AS BUTTON CLICKS OR FORM
SUBMISSIONS, AND UPDATING THE VIEW TO REFLECT ANY CHANGES
IN THE MODEL.
• FOR EXAMPLE, LET'S SAY WE HAVE A SIMPLE APPLICATION THAT
DISPLAYS A LIST OF ITEMS. WHEN THE USER CLICKS ON AN ITEM, THE
CONTROLLER RECEIVES THE CLICK EVENT AND UPDATES THE MODEL
WITH THE SELECTED ITEM. THE CONTROLLER THEN UPDATES THE
VIEW TO DISPLAY THE SELECTED ITEM, HIGHLIGHTING IT IN SOME WAY
TO INDICATE THAT IT HAS BEEN SELECTED.
 WHAT IS MVVM?

• MVVM STANDS FOR MODEL-VIEW-VIEWMODEL AND IS A

DESIGN PATTERN USED IN ANGULARJS TO SEPARATE THE UI
LOGIC FROM THE BUSINESS LOGIC OF AN APPLICATION.
• IN MVVM ARCHITECTURE, THE VIEWMODEL ACTS AS A
MEDIATOR BETWEEN THE VIEW AND THE MODEL. THE MODEL
REPRESENTS THE DATA AND THE BUSINESS LOGIC, WHILE
THE VIEW REPRESENTS THE UI. THE VIEWMODEL CONTAINS
THE PRESENTATION LOGIC AND COMMUNICATES WITH BOTH
THE VIEW AND THE MODEL TO UPDATE THE UI BASED ON
CHANGES IN THE DATA. THIS SEPARATION OF CONCERNS
MAKES IT EASIER TO MAINTAIN AND SCALE THE APPLICATION.
 VIEW MODEL IN MVVM

• IN MVVM ARCHITECTURE, THE VIEWMODEL ACTS AS A

MEDIATOR BETWEEN THE VIEW AND THE MODEL. ITS MAIN
RESPONSIBILITY IS TO PROVIDE DATA TO THE VIEW IN A FORMAT
THAT THE VIEW CAN EASILY UNDERSTAND AND USE. THE
VIEWMODEL ALSO HANDLES USER INTERACTIONS AND UPDATES
THE MODEL ACCORDINGLY.
• FOR EXAMPLE, LET'S SAY WE HAVE A FORM IN OUR APPLICATION
THAT COLLECTS USER INFORMATION. THE VIEWMODEL WOULD
BE RESPONSIBLE FOR VALIDATING THE INPUT DATA,
FORMATTING IT AS NEEDED, AND THEN PASSING IT ON TO THE
MODEL FOR STORAGE. WHEN THE USER WANTS TO VIEW THEIR
INFORMATION AGAIN, THE VIEWMODEL RETRIEVES THE DATA
FROM THE MODEL AND FORMATS IT FOR DISPLAY IN THE VIEW.
 IMPLEMENTING MVVM IN ANGULARJS

• TO IMPLEMENT MVVM ARCHITECTURE IN ANGULARJS, WE NEED TO

CREATE A VIEWMODEL THAT ACTS AS A MEDIATOR BETWEEN THE VIEW
AND THE MODEL. THE VIEWMODEL IS RESPONSIBLE FOR UPDATING
THE VIEW BASED ON CHANGES IN THE MODEL, AND FOR UPDATING
THE MODEL BASED ON USER INTERACTIONS WITH THE VIEW. TO
CREATE A VIEWMODEL IN ANGULARJS, WE CAN USE THE $SCOPE
SERVICE, WHICH PROVIDES A WAY TO SHARE DATA BETWEEN THE VIEW
AND THE CONTROLLER.
• WE ALSO NEED TO CREATE A MODEL IN ANGULARJS TO STORE AND
MANIPULATE DATA. THE MODEL CAN BE A SIMPLE JAVASCRIPT OBJECT
OR AN ANGULARJS SERVICE. TO CREATE A MODEL IN ANGULARJS, WE
CAN USE THE FACTORY METHOD, WHICH ALLOWS US TO DEFINE A
SERVICE THAT CAN BE INJECTED INTO OTHER PARTS OF OUR
APPLICATION. BY SEPARATING THE MODEL FROM THE VIEW AND THE
VIEWMODEL, WE CAN IMPROVE CODE MAINTAINABILITY AND
SCALABILITY.
 BENEFITS OF USING MVC AND MVVM IN
ANGULARJS
• USING MVC AND MVVM ARCHITECTURE IN ANGULARJS CAN
GREATLY IMPROVE CODE MAINTAINABILITY AND SCALABILITY.
• MVC SEPARATES THE APPLICATION INTO THREE DISTINCT
COMPONENTS, ALLOWING FOR EASIER MAINTENANCE AND
TESTING. THE MODEL HANDLES DATA STORAGE AND
MANIPULATION, THE VIEW HANDLES UI UPDATES, AND THE
CONTROLLER HANDLES USER ACTIONS. THIS SEPARATION OF
CONCERNS ALLOWS FOR A MORE MODULAR AND ORGANIZED
CODEBASE. SIMILARLY, MVVM SEPARATES THE APPLICATION INTO
THREE COMPONENTS: THE MODEL, THE VIEW, AND THE
VIEWMODEL. THE VIEWMODEL ACTS AS A MEDIATOR BETWEEN
THE VIEW AND THE MODEL, ALLOWING FOR EASY DATA BINDING
AND REDUCING THE AMOUNT OF CODE NEEDED FOR UI UPDATES.
THIS ALSO LEADS TO BETTER TESTABILITY AND MAINTAINABILITY
OF THE CODE.
 BEST PRACTICES FOR USING MVC AND
MVVM IN ANGULARJS

• SEPARATE CONCERNS BY KEEPING BUSINESS

LOGIC IN MODELS, UI UPDATES IN VIEWS,
AND USER INTERACTIONS IN
CONTROLLERS/VIEWMODELS.
• USE DEPENDENCY INJECTION TO MANAGE
DEPENDENCIES AND MAKE CODE EASIER TO
TEST AND MAINTAIN. AVOID TIGHTLY
COUPLED COMPONENTS.
1
Data Binding In AngularJS
Routing in AngularJS
AngularJS - Scope
Scope Types
AngularJS Architecture
Web Application build using Angular JS