Scribd
Upload
21 views

Angular JS & MVC Architecture

The document discusses Angular JS and MVC architecture. It covers topics like introduction, environment setup, directives, expressions, filters, forms and validations, and controllers and scope. The document provides details on each of these Angular JS concepts.

Uploaded by

paron96766
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
21 views

Angular JS & MVC Architecture

The document discusses Angular JS and MVC architecture. It covers topics like introduction, environment setup, directives, expressions, filters, forms and validations, and controllers and scope. The document provides details on each of these Angular JS concepts.

Uploaded by

paron96766
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 12

Angular JS & MVC Architecture

List of topics to cover :


 Introduction  Data Binding
 Environment setup  Filters
 MVC Architecture  Controller and Scope
 First Application  Forms And Validations
 Directives  Route
 Expression
MVC ARCHITECTURE
 Model View Controller or MVC as it is popularly called, is a software design pattern
for developing web applications. A Model View Controller pattern is made up of the
following three parts −
 Model − It is the lowest level of the pattern responsible for maintaining data.
 View − It is responsible for displaying all or a portion of the data to the user.
 Controller − It is a software Code that controls the interactions between the Model
and View.
ANGULAR JS

 AngularJS is a very powerful JavaScript Framework. It is used in Single Page


Application (SPA) projects.
 It extends HTML DOM with additional attributes and makes it more responsive to
user actions.
 AngularJS is open source, completely free, and used by thousands of developers
around the world. It is licensed under the Apache license version 2.0.
CREATING ANGULARJS APPLICATION

 Step 1: Load framework


 Step 2: Define AngularJS application using ng-app directive
 Step 3: Define a model name using ng-model directive
 Step 4: Bind the value of above model defined using ng-bind directive

 ng-app − This directive defines and links an AngularJS application to HTML.


 ng-model − This directive binds the values of AngularJS application data to HTML input controls.
 ng-bind − This directive binds the AngularJS Application data to HTML tags
DIRECTIVES

 ng-init Directive is used to initialize AngularJS Application data. It defines the initial
value for an AngularJS application and assigns values to the variables. The ng-init
directive defines initial values and variables for an AngularJS application.
 ng-repeat Directive :The ng-repeat directive repeats HTML elements for each item
in a collection. In the following example, we iterate over the array of countries.
 ng-blur It specifies a behavior on blur events.  ng-submit It specifies expressions to run on
 ng-click It specifies an expression to evaluate when an onsubmit events.
element is being clicked.  ng-switch It specifies a condition that will be
 ng-copy It specifies a behavior on copy events. used to show/hide child elements.
 ng-value It specifies the value of an input element.
 ng-cut It specifies a behavior on cut events.
 ng-disabled It specifies if an element is
 ng-dblclick It specifies a behavior on double-
disabled or not.
click events.
 ng-form It specifies an html form to inherit controls
 ng-if It removes the html element if a condition is
from.
false.
 ng-mousedown It specifies a behavior on
 ng-include It includes html in an application.
mousedown events.
 ng-list It converts text into a list (array).
 ng-selected It specifies the selected attribute of
an element.
 ng-src It specifies the src attribute for the <img>
element.
EXPRESSION

 Using numbers

<p>Expense on Books : {{cost * quantity}} Rs</p>


 Expressions are used to bind application data to
 Using Strings
HTML. Expressions are written inside double curly
braces such as in {{ expression}}. <p>Hello {{student.firstname + " " + student.lastname}}!</p>
 Expressions behave similar to ngbind directives.  Using Object
AngularJS expressions are pure JavaScript
<p>Roll No: {{student.rollno}}</p>
expressions and output the data where they are used.
 Using Array

<p>Marks(Math): {{marks[3]}}</p>
FILTERS : |
Sr.No. Name & Description

uppercase
1
converts a text to upper case text.

lowercase
2
converts a text to lower case text.

currency
3
formats text in a currency format.

filter
4
filter the array to a subset of it based on provided criteria.

orderby
5
orders the array based on provided criteria.
FORMS AND ITS VALIDATIONS

 AngularJS enriches form filling and validation.


 Events : ng-click, ng-dbl-click, ng-mousedown, ng-mouseup, ng-mouseenter, ng-
mouseleave, ng-mousemove, ng-mouseover, ng-keydown, ng-keyup, ng-keypress, ng-
change
 Validate Data:

$dirty − states that value has been changed.


$invalid − states that value entered is invalid.
$error − states the exact error.
CONTROLLER AND SCOPE

 A controller is defined using ng-controller directive.


 A controller is a JavaScript object that contains attributes/properties, and
functions.
 Each controller accepts $scope as a parameter, which refers to the
application/module that the controller needs to handle.

You might also like