Mrs. Sujata Oak Assistant Professor Department of It: Itc602-Web X.O Module 3: Introduction To Angularjs

ITC602- Web X.
O
Module 3 : Introduction to AngularJS
Mrs. Sujata Oak

Assistant Professor
Department of IT
2 Module 5 : AngularJS
THEORY
Module 5 : AngularJS
3
Practical
Lecture 27
Introduction to AngularJS
Module 3 : AngularJS
 Angular JS is an open source front-end JavaScript framework that is

used to build web applications.
 Angular JS is developed by Google.
 It is an excellent framework for building single page web

applications with MVC.
 Angular JS start with <script> tag.
 When you show ng-* that means its created in AngularJS
 Its expression written in {{}} double curly brackets.
 Angular JS provide direct output without refresh the webpage.
 It allows developers to use HTML as the template language and extend

it’s syntax to create various application components.
 It also helps you to reduce writing the code by data binding and
dependency injection.
 AngularJS was created by Misko Heavery.
 AngularJS extends HTML attributes with Directives, and binds data to

HTML with Expressions.
https://www.madewithangular.com/
https://www.angularjswiki.com/angular/histor
y-of-angularjs/
Module 3 : History of AngularJS
1. Angular version 1.0 which is known as AngularJS was released in

2010 by Google
2. Angular version 2.0 was released in September 2016
3. Angular 4.0 was released in March 2017
4. Angular 5.0 was released in Nov 2017
https://www.guru99.com/angularjs-1-
5. Angular 6.0 was released in May 2018 vs-2-vs-4-vs-5-difference.html
6. Angular 7.0 was released in Oct 2018
7. Angular 8.0 was released in May 2019
8. Angular 9.0 was released in Feb 2020
9. Angular 10.0 was released in June 2020
10.Angular 11.0 was released in Nov 2020
Module 3 : Prerequisites
HTML, CSS AND JS
Basics of Typescript.
Module 3 : Need of AngularJS
• AngularJS is a efficient framework that can create Rich Internet Applications

(RIA).
• AngularJS provides developers an options to write client side applications

using JavaScript in a clean Model View Controller (MVC) way.
• Applications written in AngularJS are cross-browser compliant. AngularJS

automatically handles JavaScript code suitable for each browser.
• 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.
• AngularJS is a framework to build large scale, high-performance, and easy to-

maintain web applications.
Module 3 : AngularJS Environment setup
• To download AngularJS -open the link https://angularjs.org/
Module 3 : AngularJS Environment setup
• To download AngularJS -open the link https://angularjs.org/
•CDN access − You also have access to a CDN. The CDN gives you
access to regional data centers. In this case, the Google host. The CDN
transfers the responsibility of hosting files from your own servers to a
series of external ones. It also offers an advantage that if the visitor of
your web page has already downloaded a copy of AngularJS from the
same CDN, there is no need to re-download it.
Module 3 : AngularJS Environment setup : CLI
Module 3 : AngularJS Environment setup : CLI
Module 3 : AngularJS MVC Architecture
 MVC stands for Model View
Controller.
 It is a software design pattern for
developing web applications.
 It is very popular because it isolates the
application logic from the user
interface layer
• 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.
The Model:
•The model is responsible for managing application data. It responds to the
request from view and to the instructions from controller to update itself.
The View:
•A presentation of data in a particular format, triggered by the controller's
decision to present the data. They are script-based template systems such as
JSP, ASP, PHP and very easy to integrate with AJAX technology.
The Controller:
•The controller responds to user input and performs interactions on the data
model objects. The controller receives input, validates it, and then performs
business operations that modify the state of the data model.
AngularJS is a MVC based framework.

Module 3 : Advantages AngularJS
 Open source JavaScript MVC framework.

 Supported by Google
 No need to learn another scripting language. It's just pure
JavaScript and HTML.
 Supports separation of concerns by using MVC design pattern.
 Built-in attributes (directives) makes HTML dynamic.
 Easy to extend and customize.
 Supports Single Page Application.
 Uses Dependency Injection.
 Easy to Unit test.
 REST friendly.
Module 3 : Advantages
of AngularJS over other
JavaScript frameworks
• Dependency Injection: Dependency Injection specifies a design pattern in which
components are given their dependencies instead of hard coding them within
the component.
• Two way data binding: AngularJS creates a two way data-binding between the
select element and the orderProp model. orderProp is then used as the input
for the orderBy filter.
• Testing: Angular JS is designed in a way that we can test right from the start. So,
it is very easy to test any of its components through unit testing and end-to-end
testing.
• Model View Controller: In Angular JS, it is very easy to develop application in a

clean MVC way. You just have to split your application code into MVC
components i.e. Model, View and the Controller.
• Directives, filters, modules, routes etc.
"ng" stands for Next Generation, as
Module 3 : AngularJS Directives Angular is the next generation of
HTML .
AngularJS extend HTML with new attributes called Directives.
AngularJS has a set of built-in directives which offers functionality to

your applications.
AngularJS directives are extended HTML attributes with the prefix ng-
The ng-app directive defines and link 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.
The ng-bind directive binds AngularJS application data to the HTML
view/tag.
Module 3 : AngularJS Directives
Directives are markers on a DOM element that tell
AngularJS to attach a specified behavior to that DOM
element or even transform the DOM element and its
children. In short, it extends the HTML.
Most of the directives in AngularJS are starting

with ng- where ng stands for Angular.
AngularJS includes various built-in directives.
You can create custom directives for your

application.
Module 3 : Built-In AngularJS Directives
https://docs.angularjs.org/api/ng/directive
Module 3 : Built-In AngularJS Directives : ng-app
 The ng-app directive is a starting point of

AngularJS Application.
 It initializes the AngularJS framework automatically.
 AngularJS framework will first check for ng-app

directive in a HTML document after the entire
document is loaded and if ng-app is found, it
bootstraps itself and compiles the HTML template.
Module 3 : Built-In AngularJS Directives : ng-app
 Typically ng-app directives should be placed at the

root of an HTML document e.g. <html> or <body>
tag, so that it can control the entire DOM hierarchy.
 The AngularJS framework will only process the DOM

elements and its child elements where the ng-app
directive is applied.
Demo:ngapp.html
Module 3 : Built-In AngularJS Directives : ng-init
 The ng-init directive can be used to initialize

variables in AngularJS application.
Demo: nginit.html
Module 3 : Built-In AngularJS Directives : ng-model
 The ng-model directive is used for two-way data

binding in AngularJS.
 It binds <input>, <select> or <textarea> elements

to a specified property on the $scope object.
 So, the value of the element will be the value of a

property and vice-versa.
The property set via ng-model can Demo:

be accessed in a controller using model.html
$scope object.
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.
Note :
Variables initialized in ng-init are different

from the properties defined using ng-model
directive. The variables initialized in ng-init
are not attached to $scope object whereas
ng-model properties are attached to $scope
object.
Module 3 : Built-In AngularJS Directives : ng-bind
The ng-bind directive binds the model

property declared via $scope or ng-model
directive or the result of an expression to the
HTML element.
Demo: bind.html
Module 3 : AngularJS Expressions DEMO: ANGULAR->JS-
>index2.html
 AngularJS expressions can be written inside double

braces: {{ expression }}.
 AngularJS expressions can also be written inside a directive: ng-
bind="expression".
 AngularJS expressions are much like JavaScript
expressions: They can contain literals, operators, and
variables.
Example {{ 5 + 5 }} or {{ firstName + " " + lastName }}
Module 3 : AngularJS Data binding
Data binding in AngularJS is the synchronization between the model
and the view components.
AngularJS follows Two-Way data binding model.
 Data binding lets you treat the

model as the single-source-of-truth
in your application.
 The view is a projection of the

model.
 If the model is changed, the view

reflects the change and vice versa.
 Data Binding means Instant

Output , without refreshing the web
page
Module 3 : AngularJS Data binding
DEMO
AngularJS Data binding with
Module 3 :
styling
DEMO
databindstyle.html
databindselect.html
Module 3 : AngularJS ng-repeat
The ng-repeat directive repeats an HTML element .
The ng-repeat directive actually clones HTML

elements once for each item in a collection.
The ng-repeat directive used on an array of objects
repeatdir.html
Module 3 : AngularJS Directives
Module 3 : AngularJS Module and Controller
Module 3 : AngularJS Module
 A module in AngularJS is a container of the different parts of an
application such as controller, service, filters, directives etc.
 The module is a container for the application controllers.
 Controllers always belong to a module.
Creating a Module
A module is created by using the AngularJS

function angular.module
var myApp = angular.module("myApp", []);
Module 3 : AngularJS Module
Module 3 : AngularJS Controller
Module 3 : AngularJS Controller
 The controller in AngularJS is a JavaScript function that
maintains the application data and behavior using $scope
object.
 A controller is defined using ng-controller directive.
 The job of the controller is to build a model for the view to

display .
How to create a controller in angular ?
var myController= function ($scope) Controller.html

Controller2.htmk
{
$scope.message=“AngularJS” ;
}
AngularJS Modules and
Module 3 :
Controller
AngularJS Modules and
Module 3 :
Controller
Here, module and controller are added in View using ng-App and
ng-controller directive of AngularJS.
Module 3 : AngularJS Controller Example
Name of the
controller
property of
studentContr
oller object
properties of
$scope.student object
Module 3 : AngularJS Custom Directives
 Custom directives are used in AngularJS to extend the functionality of

HTML.
 Custom directives are defined using "directive" function.
 A custom directive simply replaces the element for which it is activated.
 AngularJS application during bootstrap finds the matching elements and

do one time activity using its compile() method of the custom directive
then process the element using link() method of the custom directive
based on the scope of the directive.
Module 3 : AngularJS Custom Directives
AngularJS provides support to create custom directives for following type

of elements.
1. Element directives − Directive activates when a matching element is

encountered.
2. Attribute − Directive activates when a matching attribute is encountered.
3. CSS − Directive activates when a matching css style is encountered.
4. Comment − Directive activates when a matching comment is encountered.
custom.js
customdir.html
Module 3 : AngularJS Filters
AngularJS Filters allow us to format the data to

display on UI without changing original format.
Filters can be used with an expression or directives

using pipe | sign.
{{expression | filterName:parameter }}
Uppercase/lowercase filter
The uppercase filter converts the string to upper case
and lowercase filter converts the string to lower case.
Ulfilter.html
Filter
Filter selects items from an array based on the

specified criteria and returns a new array.
{{ expression | filter : filter_criteria }}
Filter.html
Module 3 : AngularJS Filters : OrderBy
The orderBy filter sorts an array based on

specified expression predicate.
{{expression | orderBy: predicate_expression :

reverse}}
Module 3 : AngularJS scope
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.
How to Use the Scope?
When you make a controller in AngularJS, you pass

the $scope object as an argument:
scope.html
Module 3 : AngularJS 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.
• 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.
• $rootscope is available globally (for all Controllers), whereas $scope is

available only to the Controller that has created it.
• The $rootScope is the top-most scope. An app can have only one $rootScope
which will be shared among all the components of an app. Hence it acts like a
global variable. All other $scopes are children of the $rootScope.
rootscope.html
Module 3 : AngularJS Dependency Injection
Dependency Injection in AngularJS is a software design pattern

that implements inversion of control for resolving dependencies.
It decides how components hold their dependencies. It can be

used while defining the components .
https://www.guru99.com/angularjs-dependency-injection.html
di.html
Module 3 : AngularJS Services
What is a Service?
•In AngularJS, a service is a function, or object, that is
available for your AngularJS application.
•AngularJS has about 30 built-in services.
$location Service :
The $location service has methods which return

information about the location of the current web
page.
$location service is passed in to the controller

as an argument
servicelocation.html
The $http Service
Most common used services in AngularJS applications.
 $http is an AngularJS service for reading data f

remote servers.
This service makes a request to the server,

and lets your application handle the response.
httpservice.html
 AngularJS includes a logging service called $log, which logs the messages to the client
browser's console.
 The $log service includes different methods to handle the log for error, information,
warning or debug information. It can be useful in debugging and auditing.
 The main purpose of all AngularJS logging services is to simplify debugging and
troubleshooting.
 To reveal the location of the calls to $log in the JavaScript console; you can "blackbox"
the AngularJS source in your favorite browser. To blackbox in the browser, go to the
page, right click it, “Inspect” it in developer mode, and then read the console.
Some methods that we will use for logging in AngularJS $log are:
1. log(); to write a log message

2. info(); to write an information message logservice.html
3. warn(); to write a warning message
4. error(); to write an error message
5. debug(); to write a debug message
Module 3 : AngularJS $log Services
logservice.html
The $timeout Service
The $timeout service is AngularJS version of

the window.setTimeout function.
Timeoutser.html
Module 3 : AngularJS Form Validation
 AngularJS can validate input data.
 AngularJS offers client-side form validation.
 AngularJS monitors the state of the form and input fields (input,
textarea, select), and lets you notify the user about the current state.
 AngularJS also holds information about whether they have been
touched, or modified, or not.
 You can use standard HTML5 attributes to validate input, or you can
make your own validation functions.
Form State and Input State: AngularJS update the state of

both the form and the input fields.
Input fields have the following states:

•$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
•$invalid The field content is not valid
•$valid The field content is valid
They are all properties of the input field, and are either true or false.
Form State: Forms have the following states:
•$pristine No fields have been modified yet

•$dirty One or more have been modified
•$invalid The form content is not valid
•$valid The form content is valid
•$submitted The form is submitted
They are all properties of the form, and are either true or false.

https://www.guru99.com/angularjs-validation.html
Module 3 : Single-page application
A single-page application (SPA) is a web application or website that interacts with
the user by dynamically rewriting the current web page with new data from the web
server, instead of the default method of a web browser loading entire new pages.
The goal is faster transitions that make the website feel more like a native app.
In a SPA, a page refresh never occurs; instead, all necessary HTML, JavaScript,
and CSS code is either retrieved by the browser with a single page load, or the
appropriate resources are dynamically loaded and added to the page as necessary,
usually in response to user actions.
Module 3 : Single-page application
 Single Page Applications (SPAs) are web applications that will works or loads on
a single HTML page and dynamically update the page based on user interaction.
 That means, changing the content on what we want to route.
 The SPA only sends what you need with each click, and your browser renders
that information. This is different than a traditional page load where the server
re-renders a full page with every click you make and sends it to your browser.
 This client-side method makes load time much faster for users and makes the
amount of information a server has to send a lot less and a lot more cost
efficient.
Module 3 : AngularJS Routing
What is Routing in AngularJS?
If you want to navigate to different pages in your

application, but you also want the application to be a
SPA (Single Page Application),
with no page reloading, you can use
the ngRoute module.
The ngRoute module routes your application to different

pages without reloading the entire application.
 We have to download angular-route.js script that contains the ngRoute module

from AngularJS official website to use the routing feature
 You can also use the CDN in your application to include this file.
 If you want to include it from Google CDN, then use below code.
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-
route.min.js"></script>
 Then load the ngRoute module in your AngularJS application by adding it as a
dependent module as shown below.
angular.module('appName', ['ngRoute’]);
Module 3 : Where Does it goes
ngView: ngView directive is used to display the HTML templates or

views in the specified routes. Every time the current route changes,
the included view changes with it according to the configuration of
the $route service.
Applications can only have one ng-view directive,
and this will be the placeholder for all views provided by the route.
Module 3 : $routeProvider
• $routeProvider is used to configure the routes. We use the

ngRoute config() to configure the $routeProvider. The config()
takes a function which takes the $routeProvider as parameter and
the routing configuration goes inside the function.
• $routeProvider has a simple API, accepting either the when() or
otherwise() method.
Module 3 : Template Url and Template
templateUrl:"views/page1.html"
template:"<h1>Welcome to AngularJS Routing</h1"
https://www.guru99.com/angularjs-views.html
Module 3 : ng-view
• AngularJS View is a content which is displayed to the user. According to a user

request, the view of an application is displayed to the user. Since in one single
page application, it can have a number of views. Therefore, according to the
user’s choice, a view is shown.
• Using the combination of views and routes, an application can be divided in
logical views and bind different views to controllers.
• Our application become more manageable by dividing it into different views
and using routing to load different views of an application.
https://www.guru99.com/angularjs-views.html
Module 3 : ng-view
Module 3 : Angular ng-style Directive
 The ng-style directive specifies the style

attribute for the HTML element.
 The value of the ng-style attribute must be
an object, or an expression returning an
object.
 The object consists of CSS properties and
values, in key value pairs.
Module 3 : Angular ng-style Directive
<body ng-app="myApp" ng-
controller="myCtrl">
Syntax :
<h1 ng-style="myObj">Welcome to ng-style
<element ng-
directive</h1>
style="expression"></
element>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.myObj = {
"color" : "white",
"background-color" : "coral",
"font-size" : "60px",
"padding" : "50px"
}
});
</script>
</body>
https://riptutorial.com/angularjs/topic/3032/built-in-helper-functions
Module 3 :Built-in helper Functions
angular.copy
The angular.copy function takes an object, array or a value and

creates a deep copy of it.
angular.copy()
Objects:
let obj = {name: "vespa", occupation: "princess"};
let cpy = angular.copy(obj);
cpy.name = "yogurt"
// obj = {name: "vespa", occupation: "princess"}
// cpy = {name: "yogurt", occupation: "princess"}
angular.equals
The angular.equals function compares and determines if 2
objects or values are equal,
angular.equals performs a deep comparison and returns true
if and only if at least 1 of the following conditions is met.
angular.equals(value1, value2)
1.If the objects or values pass the === comparison
2.If both objects or values are of the same type, and all of their properties
are also equal by using angular.equals
3.Both values are equal to NaN
4.Both values represent the same regular expression's result.
angular.equals
angular.equals(1, 1) // true
angular.equals(1, 2) // false
angular.equals({}, {}) // true,
note that {}==={} is false
angular.equals({a: 1}, {a: 1}) // true
angular.equals({a: 1}, {a: 2}) // false
angular.equals(NaN, NaN) // true
angular.forEach
The angular.forEach accepts an object and an iterator function. It then runs the iterator
function over each enumerable property/value of the object. This function also works on
arrays.
angular.forEach(object, function(value, key) { // function});
angular.forEach({"a": 12, "b": 34}, (value, key) => console.log("key: " + key + ",
value: " + value))
// key: a, value: 12
// key: b, value: 34
angular.fromJson
The function angular.fromJson will deserialize a valid JSON string and return an Object or
an Array.
angular.fromJson(string|object)
angular.fromJson([1, 2])
// [1, 2]
typeof angular.fromJson(new Date())
// "object"
angular.identity
The angular.identity function returns the first argument passed to it.

angular.identity(argument)
angular.identity(42)
// 42
angular.isArray
The angular.isArray function returns true if and only if the object

or value passed to it is of the type Array.
angular.isArray(value)
Examples
angular.isArray([]) // true
angular.isArray([2, 3]) // true
angular.isArray({}) // false
angular.isArray(17) // false
Angular.isDate
The angular.isDate function returns true if and only if the object
passed to it is of the type Date.
angular.isDate(value)
angular.isFunction:
The function angular.isFunction determines and returns true if
and only if the value passed to is a reference to a function.
The function returns a reference to the now extended destination

object
angular.isFunction(fn)
angular.merge:
The function angular.merge takes all the enumerable properties from the source object
to deeply extend the destination object.
The function returns a reference to the now extended destination object
angular.merge(destination, source)
Module 3 :AngularJS with Typescript
https://www.dotnetcurry.com/angularjs/1303/using-typescript-
angularjs-modules-controllers
88

Mrs. Sujata Oak Assistant Professor Department of It: Itc602-Web X.O Module 3: Introduction To Angularjs

Uploaded by

Copyright:

Available Formats

Mrs. Sujata Oak Assistant Professor Department of It: Itc602-Web X.O Module 3: Introduction To Angularjs

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Mrs. Sujata Oak Assistant Professor Department of It: Itc602-Web X.O Module 3: Introduction To Angularjs

Uploaded by

Copyright:

Available Formats

ITC602- Web X.

Mrs. Sujata Oak

 Angular JS is an open source front-end JavaScript framework that is

 Angular JS is developed by Google.

 It is an excellent framework for building single page web

 Angular JS start with <script> tag.

 When you show ng-* that means its created in AngularJS

 Its expression written in {{}} double curly brackets.

 Angular JS provide direct output without refresh the webpage.

 It allows developers to use HTML as the template language and extend

 AngularJS was created by Misko Heavery.

 AngularJS extends HTML attributes with Directives, and binds data to

1. Angular version 1.0 which is known as AngularJS was released in

HTML, CSS AND JS

• AngularJS is a efficient framework that can create Rich Internet Applications

• AngularJS provides developers an options to write client side applications

• Applications written in AngularJS are cross-browser compliant. AngularJS

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

• AngularJS is a framework to build large scale, high-performance, and easy to-

• To download AngularJS -open the link https://angularjs.org/

• To download AngularJS -open the link https://angularjs.org/

 MVC stands for Model View

 It is a software design pattern for

developing web applications.

 It is very popular because it isolates the

application logic from the user

• Model − It is the lowest level of

AngularJS is a MVC based framework.

 Open source JavaScript MVC framework.

• Model View Controller: In Angular JS, it is very easy to develop application in a

AngularJS extend HTML with new attributes called Directives.

AngularJS has a set of built-in directives which offers functionality to

AngularJS directives are extended HTML attributes with the prefix ng-

The ng-app directive defines and link an AngularJS application.

Most of the directives in AngularJS are starting

AngularJS includes various built-in directives.

You can create custom directives for your

 The ng-app directive is a starting point of

 It initializes the AngularJS framework automatically.

 AngularJS framework will first check for ng-app

 Typically ng-app directives should be placed at the

 The AngularJS framework will only process the DOM

 The ng-init directive can be used to initialize

 The ng-model directive is used for two-way data

 It binds <input>, <select> or <textarea> elements

 So, the value of the element will be the value of a

The property set via ng-model can Demo:

The ng-model directive can also:

Provide type validation for application data (number, email,

Variables initialized in ng-init are different

The ng-bind directive binds the model

 AngularJS expressions can be written inside double

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

AngularJS follows Two-Way data binding model.

 Data binding lets you treat the

 The view is a projection of the

 If the model is changed, the view

 Data Binding means Instant

The ng-repeat directive repeats an HTML element .