ANGULAR JS

Course Code- 21CSL581

‹#›
Ref: 01. 21CSL581-AngularJS.pdf ‹#›
● Assessment Details
● CIE Marks: 50
● 30marks - 10 marks for each experiments(observation, record, execution, viva)
● 20marks - 2 Tests (each 100marks: 60+40viva)
● SEE Marks: 50 (Practical Exam)
● Passing Criteria: 35% in SEE, 40% combined in CIE and SEE

● Text Book: https://github.com/mystroken/JSBooks/blob/master/

%5BAngularJS%20Up%20and%20Running%20Enhanced%20Productivity%20with%20Structured%20Web
%20Apps%20by%20Shyam%20Seshadri%2C%20Brad%20Green%20-%202014%5D.pdf

‹#›
What is Javascript?

‹#›
‹#›
 Databas
Front end Back end
e
Node: server
Mongo
M mongo It helps in JS file to run on
DB–NO
server
E express SQL
A angular Databas
Express: Buliding application e
N node
purely using node is difficult
so express framework is used

‹#›
●

‹#›
●

‹#›
Libraries/ API- it can be called as tools that contains classes, interface, methods.
Provides reusable functions to our code. Intend to provide reusable software functionality.
● React
● Selenium

Framework- installable/ configurable software, that can be used by the developer.

Provides ready to use templates for fast application development. Intend to reduce the complexity of the
software development process.
● Angular JS
● Dijango
● Vue

‹#›
What is AngularJS?

● Angular is client side framework

● Angular is used to create web Applications
● Angular is mainly used for Single Page Application(SPA) development
● An SPA (Single-page application) is a web app implementation that loads only a
single web document, and then updates the body content of that single document
via JavaScript APIs such as XMLHttpRequest and Fetch when different content is to
be shown.
● Angular is supported on all platforms(Desktop & mobile)
● Angular is free & open source
● Angular is having cross-browser compatibility.

‹#›
 Ex: Pinterest, Gmap, Gmail, Facebook, Airbnb, paypal EX: E commerce website- amazon

A single page application (SPA) is a website that loads only one HTML
page and dynamically updates its content using JavaScript in
response to user actions, while a normal website loads a new,
complete page for each navigation link clicked, resulting in a full page
refresh with every transition; essentially, an SPA feels more like a
native app with seamless interaction, whereas a normal website
experiences noticeable page reloads between sections.

‹#›
AngularJS vs Angular ?

‹#›
‹#›
‹#›
Angular History

● Initial version of Angular(1.0) is called AngularJS which is developed using java script.
● Angular 1.x versions are called AngularJS
● From 2.0 onwards it is called Angular framework.
● Angular 2.x and later versions are called Angular framework
● Angular 2.x is completely re-written using Type script.
● Type script developed by Microsoft company
● Current version of Angular is 14

‹#›
Why do we Choose AngularJS?

● Some of the reasons:

● AngularJS provides developers an options to write client side applications using JavaScript in a
clean Model View Controller (MVC) way. MVC- Will get clean structured code.
● It provides simple and flexible filters that help us to easily format data
● AngularJS applications use less code than traditional JavaScript applications
● AngularJS makes Web application and the code very simple to write, test, and maintain.
● AngularJS applications need less Document Object Model (DOM) manipulation.

‹#›
●A "single page application (SPA) refers to a web
application that loads only one HTML page and
dynamically updates its content using JavaScript, while
MVC (Model-View-Controller) is an architectural pattern
that separates application logic into distinct
components: the data model, the user interface (view),
and the logic that handles interactions between them,
which can be used to build both SPAs and traditional
multi-page applications; essentially, an SPA is a design
approach focused on user experience while MVC is a
way to structure application code regardless of the user
interface style.
‹#›
Core Features

●The core features of AngularJS are as follows −

● MVC
● Data-binding
● Filters
● Directives
● Scope
● Controller
● Services
● Templates
● Routing
● Dependency Injection etc

‹#›
 Pre-requisites

● HTML- adds design/structure to the webpage.

● CSS- adds style/color to the webpage.
● Javascript- Adds behaviour/interactivity to the webpage.

Ref: Basic.html
‹#›
‹#›
Java Script

To run JavaScript: on a browser

● 1. Open your favorite browser (here we will use Google Chrome). https://www.google.com/chrome
● 2. right clicking on an empty area and select Inspect to open the developer tools. (or) Shortcut: F12
-Console tab (Inspect Browser).
● 3. On the developer tools, go to the console tab. Then, write JavaScript code and press enter to run
the code. (Shift+enter - to multiple line of code in console)

Ref: Javascript.js ‹#›

‹#›
‹#›
‹#›
 ● shortcut:
VS code: ● ! + tab - Basic HTML Boilerplate
https://code.visualstudio.com/ ● h1 + tab - element(open tag & close tag)
● extensions- live server (ritwick dev) [light weight
web server]- install- restart vs code- rightclick on
__.html page- Open with live server
● VS code Terminal:
● ls - list the current directories & folders
● cd - open folder
● cd.. - close folder
● code --help - list of command lines in VS code
terminal

‹#›
 DOWNLOADING
INSTALLING ANGULAR JS

‹#›
● https://angularjs.org/
● DOWNLOAD ANGULARJS
● Download
● Method 1: Copy & paste in your
angular.js file in VS Code
● Method 2 (internet required): in script
tag – src attribute - Copy & paste the
link https://ajax.googleapis.com/ajax/
libs/angularjs/1.8.2/angular.min.js

‹#›
AngularJS Applications

AngularJS modules define AngularJS applications.

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

AngularJS controllers control AngularJS applications.
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
The ng-app directive defines the application
●The ng-controller directive defines the controller.

‹#›
EXPRESSIONS IN ANGULAR
JS

‹#›
 EXPRESSIONS IN ANGULAR JS

● AngularJS expression is similar to JavaScript code snippets.

● AngularJS will "output" data exactly where the expression is written.
● It works with numbers and strings.
● {{5+6}}
● {{“Hello Student!”}}
● It can also work with JavaScript objects and arrays.
● {{ user.name }}
● {{ items[index] }}
● You can write expressions wherever you like, AngularJS will simply resolve the expression and return the result.
<div ng-app=""> [If you remove the ng-app directive, HTML will display the expression as it is, without solving it
<p>My first expression: {{ 5 + 5 }}</p>
</div>

Ref: 1.1index.html
‹#›
<div ng-app="" ng-init="myCol='lightgreen'">
<input style="background-color:{{myCol}}" ng-model="myCol">
</div>
AngularJS Numbers-
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: {{ quantity * cost }}</p>
</div>

<div ng-app="" ng-init="quantity=1;cost=5">

<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>
</div>

‹#›
AngularJS Strings

<div ng-app="" ng-init="firstName='John';lastName='Doe'">

<p>The name is {{ firstName + " " + lastName }}</p>
</div>

<div ng-app="" ng-init="firstName='John';lastName='Doe'">

<p>The name is <span ng-bind="firstName + ' ' lastName"></span></p>
</div>

‹#›
AngularJS Objects

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">

<p>The name is {{ person.lastName }}</p>
</div>

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">

<p>The name is <span ng-bind="person.lastName"></span></p>
</div>

‹#›
AngularJS Arrays

<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>The third result is {{ points[2] }}</p>
</div>

<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>The third result is <span ng-bind="points[2]"></span></p>
</div>

‹#›
AngularJS Expressions vs. JavaScript Expressions

● Like JavaScript expressions, AngularJS expressions can contain literals, operators, and
variables.
● Unlike JavaScript expressions, AngularJS expressions can be written inside HTML.
● AngularJS expressions do not support conditionals, loops, and exceptions, while
JavaScript expressions do.
● AngularJS expressions support filters, while JavaScript expressions do not.

‹#›
MODULES IN ANGULAR JS

‹#›
● An AngularJS module defines an application.
● The module is a container for the different parts of an application & for the application
controllers.
● Controllers always belong to a module.
● The [] parameter in the module definition can be used to define dependent modules.
● Without the [] parameter, you are not creating a new module, but retrieving an existing one.
● A module is created by using the AngularJS function angular.module
<div ng-app="myApp">...</div> an HTML element in which the application will run
<script>var app = angular.module("myApp", []);</script>
can add controllers, directives, filters, to AngularJS application

‹#›
Adding a Controller
<!DOCTYPE html><html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl"> AngularJS has a set of
{{ firstName + " " + lastName }} built-in directives
</div> which you can use to
<script> add functionality to
var app = angular.module("myApp", []); your application.
app.controller("myCtrl", function($scope) { Ref: A-controller
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script></body></html>
‹#›
DIRECTIVES IN ANGULAR JS

‹#›
DIRECTIVES IN ANGULAR JS

● AngularJS - extend HTML with new attributes called Directives.

● AngularJS has a set of built-in directives which offers functionality to your applications.
● AngularJS also lets you define your own directives.
● AngularJS directives are extended HTML attributes with the prefix ng-.
●
The ng-app directive initializes or starts an AngularJS application.

‹#›
● The ng-app directive initializes an AngularJS application.
● The ng-init directive initializes application data.
● The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
<!DOCTYPE html><html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="" ng-init="firstName='John'">
<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div></body></html>
Ref: A-Directives

‹#›
The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.

The ng-model directive can also:

Provide type validation for application data (number, email, required).
Provide status for application data (invalid, dirty, touched, error).
Provide CSS classes for HTML elements.
Bind HTML elements to HTML forms.

‹#›
Data Binding

●The {{ firstName }} expression, in the example above, is an AngularJS data binding expression.
●Data binding in AngularJS binds AngularJS expressions with AngularJS data.
●{{ firstName }} is bound with ng-model="firstName".

‹#›
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div data-ng-app="" data-ng-init="quantity=1;price=5">

<h2>Cost Calculator</h2>

Quantity: <input type="number" ng-model="quantity">

Price: <input type="number" ng-model="price">

<p><b>Total in dollar:</b> {{quantity * price}}</p>

</div></body></html>
Ref: A-binding.html

‹#›
NG-APP DIRECTIVE
IN ANGULAR JS

‹#›
NG-APP DIRECTIVE

● Initialization Point: ng-app is an AngularJS directive that specifies the root element where
AngularJS will initialize.
● It tells AngularJS where your application begins.
● In AngularJS, we create single-page applications (SPAs) where most of the application
logic resides on a single HTML page.
● The ng-app directive defines the boundary of your SPA.
● The ng-app directive will auto-bootstrap (automatically initialize) the application when a
web page is loaded.

Ref: ng-app.html
1.1index.html ‹#›
NG-INIT DIRECTIVE
IN ANGULAR JS

‹#›
NG-INIT DIRECTIVE

● The ng-init directive initializes application data like variables, arrays, objects, array of objects etc.
● It defines the initial value for an AngularJS application and assigns values to the variables.

Ref: ng-app.html
1.1index.html ‹#›
NG-REPEAT IN
ANGULAR JS

‹#›
NG-REPEAT IN ANGULAR JS

● The ng-repeat directive repeats a set of HTML, a given number of times.

● The set of HTML will be repeated once per item in a collection.
● The collection must be an array or an object.
● The ng-repeat directive actually clones HTML elements once for each item in a collection.

Ref: A-repeat.html
1.1index.html ‹#›
 Create New Directives

In addition to all the built-in AngularJS directives, you can create your own directives.
New directives are created by using the .directive function.
To invoke the new directive, make an HTML element with the same tag name as the new directive.
When naming a directive, you must use a camel case name, w3TestDirective, but when invoking it, you must use - separated
name, w3-test-directive:
You can invoke a directive by using:
Element name
Attribute
Class
Comment Element name <w3-test-directive></w3-test-directive>
Ref: newdirective.html Attribute <div w3-test-directive></div>
Class <div class="w3-test-directive"></div>
Comment <!-- directive: w3-test-directive -->

‹#›
NG-MODEL & NG-BIND
DIRECTIVE
IN ANGULAR JS

‹#›
NG-MODEL DIRECTIVE

● With the ng-model directive you can bind the value of an input field to a variable created
in AngularJS.
● The ng-model directive binds the value of HTML controls (input, select, textarea) to
application data.
● The ng-bind directive tells AngularJS to replace the content of an HTML element with the
value of a given variable, or expression.

Ref: 1.2fuct_forms.html
‹#›
 MVC
ANGULAR JS

‹#›
MVC IN ANGULAR JS

● MVC stands for

● M – Model – Contains Application Data
● V – View – Contains Presentation Logic
● C – Controller – Creates communication path between Model and View

‹#›
REAL LIFE EXAMPLE OF MVC

‹#›
MVC Concepts

‹#›
<html ng-app="myApp">
<script src="angularjs.js"></script>

<script>
var app = angular.module("myApp", []);
app.controller("myController", function($scope) {
$scope.message = "Welcome";
});
</script>

<body ng-controller="myController">
<div >
<h2>{{message}}</h2>
<h2 ng-bind="message"></h2>
</div >
</body>
</html>

‹#›
 AngularJS Module:
angular.module("myApp", [])
This line defines an AngularJS module named "myApp" using the
angular.module function.
The first parameter is the name of the module, and the second parameter is
an array of dependencies (currently empty in this case).
Modules in AngularJS are used to encapsulate different parts of an
application, such as controllers, services, and directives.

Ref: 2.1mvc.html
‹#›
 Controller Definition:
.controller("myController", function($scope) { ... })
This part defines an AngularJS controller named "myController" within the
"myApp" module.
Controllers are responsible for handling the logic and data of a specific
view.
The controller function takes the $scope parameter, which is an object that
serves as the model for the view.

Ref: 2.1mvc.html
‹#›
 Controller Function:
function($scope) { ... }
This is the controller function that gets executed when the "myController"
controller is instantiated.
It takes the $scope object as a parameter, allowing you to interact with the
view.

Ref: 2.1mvc.html 2.2mvcTask1.html

‹#›
 SCOPE IN
ANGULAR JS

‹#›
SCOPE IN ANGULAR JS

● The scope of AngularJS is the model.

● It is a JavaScript object with properties and methods available for both the view and the controller.
● It gives the execution context for expressions used in the application.

Ref: 3.1scope.html
‹#›
SCOPE IN ANGULAR JS

● The scope is the binding part between the HTML (view) and the JavaScript (controller).
● The scope is an object with the available properties and methods.
● The scope is available for both the view and the controller.

Ref: 3.1scope.html
‹#›
Understanding the Scope

● The $scope is glue between a controller and view (HTML). It transfers data from the
controller to view and vice-versa.

VIEW MODEL

Ref: 3.1scope.html
‹#›
Understanding the Scope

● As we have seen in the controller section, we can attach properties and methods to the
$scope object inside controller function.
● The view can display $scope data using an expression, ng-model, or ng-bind directive

Ref: 3.1scopeTask1.html
‹#›
$scope in AngularJS is a built-in object which basically binds the “controller” and the “view”. One can define
member variables in the scope within the controller which can then be accessed by the view.
Code Explanation:
● The name of the module is “app”
● The name of the controller is “HelloWorldCntrl”
● Scope object is the main object which is used to pass information from the controller to the view.
● Member variable added to scope object

‹#›
key uses of $scope

● Data Binding:
● $scope facilitates two-way data binding between the controller and the view.
● Any changes made to the properties of $scope in the controller are automatically
reflected in the view, and vice versa.

Ref: 3.1scopeTask1.html, 3.1scopeTask2.html,

3.1scopeTask3.html, 3.1scopeTask4.html ‹#›
<body>
<div ng-controller="myController">
Enter number 1 : <input type="number" placeholder="Enter number 1" ng-model="n1"> <br>
Enter number 2 : <input type="number" placeholder="Enter number 2" ng-model="n2"> <br>
<button ng-click="add(n1, n2)">Add</button>
<h1>Result is : {{res}}</h1>
</div>
</body>
<script>
angular.module("myModule", []) changes
.controller("myController", function($scope){ made to
$scope.add=function(n1, n2){ the
$scope.res=n1+n2; properties
} of $scope
});
in the
</script>
controller
reflected in the
view

‹#›
key uses of $scope

● Dependency Injection: A software design pattern that deals with how components get
hold of their dependencies.
● It facilitates you to divide your application into multiple different types of components
which can be injected into each other as dependencies.
● $scope is injected into the controller function by AngularJS's dependency injection
system.
● This means you don't have to explicitly create the $scope object;
● AngularJS provides it .

‹#›
key uses of $scope

● Sharing Data Between Components:

● $scope allows you to share data between different parts of your application.
● If you have nested controllers or components, they can access and modify shared data
through their respective $scope objects.

Ref: 3.1scopeTask1.html, 3.1scopeTask2.html,

3.1scopeTask3.html, 3.1scopeTask4.html ‹#›
<script>
var app = angular.module("myModule", [])
app.controller("c1", function($scope){
$scope.msg="Welcome ";
}); $scope object 1 nested
app.controller("c2", function($scope){
controllers
$scope.msg="Hello ";
});
</script> $scope object 2
</head>
<body>
<div ng-controller="c1">
<h1>{{msg}}</h1>
</div>
<div ng-controller="c2">
<h1>{{msg}}</h1>
</div>
</body>

‹#›
key uses of $scope

● Event Handling:
● $scope allows you to handle events in the controller and trigger actions in the view.
● For example, you can use $scope to define functions in the controller that respond to user
interactions, such as button clicks.

Ref: 3.1scopeTask1.html, 3.1scopeTask2.html,

3.1scopeTask3.html, 3.1scopeTask4.html ‹#›
Root Scope

●All applications have a $rootScope which is the

scope created on the HTML element that contains
the ng-app directive.
●The rootScope is available in the entire application.
●There is only one $rootScope per AngularJS
application.
●If a variable has the same name in both the current
scope and in the rootScope, the application uses
the one in the current scope.

‹#›
‹#›
Understanding the Scope

● The three types of scopes are:

● Isolated scope
● Shared scope
● Inherited scope

‹#›
● Shared scope: directive and controllers share the scope and the data. We cannot pass data
explicitly to the directive.
● Inherited scope: directive inherits the scope of the controller. We cannot pass data explicitly to the
directive.
● Isolated scope: directive and controllers don’t share the data and scope. We can pass data either
as a string or an object explicitly to the directive.

‹#›
‹#›
DATA BINDING IN
ANGULAR JS

‹#›
What is data binding?

● Data binding is a process of combining data between the model and the view.

Ref: display full name lab program

3.2arrayoperations.html ‹#›
TYPES OF DATA BINDING

● 1. ONE WAY DATA-BINDING

● 2. TWO WAY DATA-BINDING

‹#›
1. ONE WAY DATA-BINDING

MODEL

DATA FLOWS FROM

MODEL TO VIEW
ONLY

VIEW
‹#›
ONE WAY DATA-BINDING

● One-way data binding in AngularJS means binding data from Model to View.
● In one way data- binding data flows from the scope/controller to the view
● 'ng-bind' is an angular directive used for achieving one-way data binding

Ref: ng-bind_ng-change.html
‹#›
TWO WAY DATA-BINDING

MODEL

DATA FLOWS DATA FLOWS

FROM FROM
VIEW TO MODEL MODEL TO VIEW

VIEW
‹#›
TWO WAY DATA-BINDING

● Two Way Data binding 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.
● 'ng-model' is an angular directive used for achieving two-way data binding

Ref: display full name lab program

3.2arrayoperations.html ‹#›
 EVENTS and event
HANDLING IN ANGULAR JS

‹#›
What are Events?

● Within AngularJS we can register event listeners that will listen for said events and perform some
action whenever they occur.
● Events are "things" that happen to HTML elements.
● AngularJs can "react" on these events.
● An event can be a vast number of things, Here are some examples of
events:
● hovering over a hyperlink
● double-clicking on an object on the page
● An HTML web page has finished loading
● An HTML input field was changed
● An HTML button was clicked
thankfully Angular has directives that cover a lot of these.

‹#›
Mouse Events

● On Mouse click ● Mouse events occur when the cursor moves

over an element, in this order:
● ng-click
● ng-mousedown ● ng-mouseover
● ng-mouseup ● ng-mouseenter
● ng-dblclick ● ng-mousemove
● ng-mouseleave

Ref: Event handling.html

‹#›
ng-change directive

● The ng-change directive tells AngularJS what to do when the value of an HTML element changes
like textbox, select, textarea.
● The ng-change directive requires a ng-model directive to be present.
● The ng-change event is triggered at every change in the value. It will not wait until all changes are
made, or when the input field loses focus.
●
The ng-change event is only triggered if there is a actual change in the input value, and
not if the change was made from a JavaScript.

Ref: ng-bind_ng-change.html
‹#›
KeyBoard Events

● Executes when we enter a keyboard button.

● ng-keydown
● ng-keypress
● ng-keyup

‹#›
Copy Paste Events

● Executes when do some cut copy paste operation on input fields.

● ng-copy
● ng-cut
● ng-paste

Ref: copy_paste_event.html
‹#›
NG-SHOW AND NG-HIDE
DIRECTIVES IN
ANGULAR JS

‹#›
NG-SHOW DIRECTIVE

● The ng-show directive shows the specified HTML element if the expression evaluates to true,
otherwise the HTML element is hidden.

Ref: ng-show_ng-hide.html
‹#›
NG-HIDE DIRECTIVE

● The ng-hide directive hides the HTML element if the expression evaluates to true.
● ng-hide is also a predefined CSS class in AngularJS, and sets the element's display to none.

Ref: ng-show_ng-hide.html
‹#›
FORM VALIDATION
IN ANGULAR-JS

‹#›
 Introduction to Forms Validation

● Forms are the major way users communicate with the apps we develop and are an
important mechanism of modern Websites and applications.
● They are used to collect data form the users.
● The data collected by the form is validated before sending it to the server.
● AngularJS continuously oversees the status of the form and their input fields such as
input, textarea, select and help us by advising the user about the current state.

Ref: 1.2fuct_forms.html
3.2taskcheck.html ‹#›
Form states

● Form is a collection of related individual controls grouped together. For example, Login
form -> allows users to input their credential to enter the application.
● Angular Form has some additional capabilities than plain HTML forms.
● It gives developers more control on how to communicate with the form.
● While creating Angular form, AngularJS creates an instance of FormController.

Ref: 1.2fuct_forms.html
3.2taskcheck.html ‹#›
Properties

● $invalid: The field content is not valid

● $valid: The field content is valid
● $untouched: The field has not been touched yet
● $touched: The field has been touched
● $pristine: The field has not been modified yet
● $dirty: The field has been modified

‹#›
FILTERS IN
ANGULAR JS

‹#›
Filters

● Filters can be added in AngularJS to format data.

● They format the value of an expression for displaying to the end user.
● They are added to expressions by using the pipe character |, followed by a filter.
● Filters can be used in view templates as well as in controllers.

Ref: 3.2filters.html
‹#›
 AngularJS Filters

●AngularJS provides filters to transform data:

●Lowercase - Format a string to lower case.
●Uppercase - Format a string to upper case
●Number - Format a number to a string.
●Currency - Format a number to a currency format.
●Date - Format a date to a specified format.

Ref: 3.2filters.html
‹#›
FORMATS FOR DATE FILTER

●
The date filter formats a date to a specified format.
● "yyyy" year (2023)
● "yy" year (23)
● "y" year (2023)
● "MMMM" month (January)
● "MMM" month (Jan)
● "MM" month (01)
● "M" month (1)

Ref: 3.2filters.html
‹#›
FORMATS FOR DATE FILTER

● "dd" day (06)

● "d" day (6)
● "EEEE" day (Tuesday)
● "EEE" day (Tue)

Ref: 3.2filters.html
‹#›
FORMATS FOR TIME IN DATE FILTER

● "HH" hour, 00-23 (09)

● "H" hour 0-23 (9)
● "hh" hour, 00-12 (09)
● "h" hour, 0-12 (9)

● "mm" minute (05)

● "m" minute (5)

Ref: 3.2filters.html
‹#›
FORMATS FOR TIME IN DATE FILTER

● "ss" second (05)

● "s" second (5)
● "sss" millisecond (035)
● "a" (AM/PM)

Ref: 3.2filters.html
‹#›
 FORMATS FOR DATE FILTER

● The format value can also be one of the following predefined formats:
● "short" same as "M/d/yy h:mm a" (1/5/23 9:05 AM)
● "medium" same as "MMM d, y h:mm:ss a" (Jan 5, 2023 9:05:05 AM)
● "shortDate" same as "M/d/yy" (1/5/23)
● "mediumDate" same as "MMM d, y" (Jan 5, 2023)
● "longDate" same as "MMMM d, y" (January 5, 2023)
● "fullDate" same as "EEEE, MMMM d, y" (Tuesday, January 5, 2023)
● "shortTime" same as "h:mm a" (9:05 AM)
● "mediumTime" same as "h:mm:ss a" (9:05:05 AM)

Ref: 3.2filters.html ‹#›

Order-by filter IN
ANGULAR JS

‹#›
orderBy Filter

●It will provide sorting of arrays in ascending or

descending order.
<ul>
<li ng-repeat="n in names | orderBy">{{n}}</li>
<br>
<li ng-repeat="n in names | orderBy:'reverse'">
{{n}}</li>
</ul>

‹#›
search Filter

<ul>
<li ng-repeat="item in items | filter: searchText">
{{item }}</li>
</ul>

‹#›
Limit-to filter IN
ANGULAR JS

‹#›
limitTo

●limitTo: Limits an array, into a specified number of

elements/characters.
● When the limitTo filter is used for arrays, it returns
an array containing only the specified number of
items.
<ul>
<li ng-repeat="item in items | limitTo: 3">{{ item }}</
li>
</ul>
‹#›
Example:

<ul>
<li ng-repeat="item in items | orderBy: ‘name' | limitTo: 3">
{{ item }}</li>
</ul>

‹#›
Thank You

‹#›