ITC602- Web X.

O
Module 3 : Introduction to AngularJS

Mrs. Sujata Oak

Assistant Professor
Department of IT
Module 4 : Introduction to AngularJS

2 Module 5 : AngularJS
Module 4 : Introduction to AngularJS

THEORY

Module 5 : AngularJS
3
Module 4 : Introduction to AngularJS

Practical

4 Module 5 : AngularJS
 Lecture 27

Introduction to AngularJS
Module 3 : AngularJS

7 Module 3 : AngularJS
 Module 3 : Introduction to 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.

8 Module 3 : AngularJS
 Module 3 : Introduction to AngularJS

 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/

9 Module 3 : AngularJS
 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
10 Module 3 : AngularJS
Module 3 : Prerequisites

HTML, CSS AND JS

Basics of Typescript.

11 Module 3 : AngularJS
 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.

12 Module 3 : AngularJS
 Module 3 : AngularJS Environment setup

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

13 Module 3 : AngularJS
 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.

14 Module 3 : AngularJS
Module 3 : AngularJS Environment setup : CLI

15 Module 3 : AngularJS
Module 3 : AngularJS Environment setup : CLI

16 Module 3 : AngularJS
 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 

17 Module 3 : AngularJS
 Module 3 : AngularJS MVC Architecture

• 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.
18 Module 3 : AngularJS
 Module 3 : AngularJS MVC Architecture

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.

19 Module 3 : AngularJS
 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.

20 Module 3 : AngularJS
 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.
21 Module 3 : AngularJS
 "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.

22 Module 3 : AngularJS
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.

23 Module 3 : AngularJS
Module 3 : Built-In AngularJS Directives

https://docs.angularjs.org/api/ng/directive

24 Module 3 : AngularJS
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.

25 Module 3 : AngularJS
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

26 Module 3 : AngularJS
Module 3 : Built-In AngularJS Directives : ng-init

 The ng-init directive can be used to initialize

variables in AngularJS application.

Demo: nginit.html

27 Module 3 : AngularJS
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. 

28 Module 3 : AngularJS
Module 3 : Built-In AngularJS Directives : ng-model

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.

29 Module 3 : AngularJS
Module 3 : Built-In AngularJS Directives : ng-model

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.

30 Module 3 : AngularJS
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

31 Module 3 : AngularJS
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 }}

32 Module 3 : AngularJS
 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
33 Module 3 : AngularJS
Module 3 : AngularJS Data binding

DEMO

34 Module 3 : AngularJS
 AngularJS Data binding with
Module 3 :

styling

DEMO
databindstyle.html
databindselect.html

35 Module 3 : AngularJS
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

36 Module 3 : AngularJS
Module 3 : AngularJS Directives

37 Module 3 : AngularJS
Module 3 : AngularJS Module and Controller

38 Module 3 : AngularJS
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", []);

39 Module 3 : AngularJS
Module 3 : AngularJS Module

40 Module 3 : AngularJS
Module 3 : AngularJS Controller

41 Module 3 : AngularJS
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” ;
}
42 Module 3 : AngularJS
 AngularJS Modules and
Module 3 :

Controller

43 Module 3 : AngularJS
 AngularJS Modules and
Module 3 :

Controller

Here, module and controller are added in View using ng-App and
ng-controller directive of AngularJS.

44 Module 3 : AngularJS
Module 3 : AngularJS Controller Example

Name of the
controller

property of
studentContr
oller object

properties of
$scope.student object

45 Module 3 : AngularJS
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.

46 Module 3 : AngularJS
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

47 Module 3 : AngularJS
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 }}

48 Module 3 : AngularJS
Module 3 : AngularJS Filters

49 Module 3 : AngularJS
Module 3 : AngularJS Filters

Uppercase/lowercase filter
The uppercase filter converts the string to upper case
and lowercase filter converts the string to lower case.

Ulfilter.html

50 Module 3 : AngularJS
Module 3 : AngularJS Filters

Filter

Filter selects items from an array based on the

specified criteria and returns a new array.

{{ expression | filter : filter_criteria }}

Filter.html

51 Module 3 : AngularJS
Module 3 : AngularJS Filters : OrderBy

The orderBy filter sorts an array based on

specified expression predicate.

{{expression | orderBy: predicate_expression :

reverse}}

52 Module 3 : AngularJS
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

53 Module 3 : AngularJS
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

54 Module 3 : AngularJS
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

55 Module 3 : AngularJS
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.

56 Module 3 : AngularJS
Module 3 : AngularJS 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

57 Module 3 : AngularJS
Module 3 : AngularJS Services
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

58 Module 3 : AngularJS
Module 3 : AngularJS Services
 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

59 Module 3 : AngularJS
Module 3 : AngularJS $log Services

logservice.html

60 Module 3 : AngularJS
Module 3 : AngularJS Services
The $timeout Service

The $timeout service is AngularJS version of

the window.setTimeout function.

Timeoutser.html

61 Module 3 : AngularJS
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.

62 Module 3 : AngularJS
Module 3 : AngularJS Form Validation

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.

63 Module 3 : AngularJS
Module 3 : AngularJS Form Validation

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

64 Module 3 : AngularJS
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.

65 Module 3 : AngularJS
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.

66 Module 3 : AngularJS
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.

67 Module 3 : AngularJS
Module 3 : AngularJS Routing

 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’]);

68 Module 3 : AngularJS
Module 3 : AngularJS Routing

69 Module 3 : AngularJS
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.

70 Module 3 : AngularJS
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.
71 Module 3 : AngularJS
Module 3 : Template Url and Template

templateUrl:"views/page1.html"

template:"<h1>Welcome to AngularJS Routing</h1"

72 Module 3 : AngularJS
 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.

73 Module 3 : AngularJS
 https://www.guru99.com/angularjs-views.html
Module 3 : ng-view

74 Module 3 : AngularJS
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.

75 Module 3 : AngularJS
 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>

76 Module 3 : AngularJS
 https://riptutorial.com/angularjs/topic/3032/built-in-helper-functions

Module 3 :Built-in helper Functions

77 Module 3 : AngularJS
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"}

78 Module 3 : AngularJS
Module 3 :Built-in helper Functions
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.

79 Module 3 : AngularJS
Module 3 :Built-in helper Functions
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

80 Module 3 : AngularJS
 Module 3 :Built-in helper Functions
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

81 Module 3 : AngularJS
Module 3 :Built-in helper Functions
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"

82 Module 3 : AngularJS
Module 3 :Built-in helper Functions
angular.identity

The angular.identity function returns the first argument passed to it.

angular.identity(argument)

angular.identity(42)
// 42

83 Module 3 : AngularJS
Module 3 :Built-in helper Functions
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

84 Module 3 : AngularJS
Module 3 :Built-in helper Functions

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)

85 Module 3 : AngularJS
Module 3 :Built-in helper Functions
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)

86 Module 3 : AngularJS
Module 3 :AngularJS with Typescript

https://www.dotnetcurry.com/angularjs/1303/using-typescript-
angularjs-modules-controllers

87 Module 3 : AngularJS
88