MODULE 3:

Introduction to AngularJS
 Points to be covered
• Overview of AngularJS
• Need of AngularJS in real web sites
• AngularJS modules, AngularJS built-in directives
• AngularJS custom directives, AngularJS expressions
• Angular JS Data Binding, AngularJS filters
• AngularJS controllers, AngularJS scope
• AngularJS dependency injection, Angular JS Services
• Form Validation
• Routing using ng-Route, ng-Repeat, ng-style, ng-view
• Built-in Helper Functions, Using Angular JS with Typescript
 Points to be covered
• Overview of AngularJS
• Need of AngularJS in real web sites
• AngularJS modules, AngularJS built-in directives
• AngularJS custom directives, AngularJS expressions
• Angular JS Data Binding, AngularJS filters
• AngularJS controllers, AngularJS scope
• AngularJS dependency injection, Angular JS Services
• Form Validation
• Routing using ng-Route, ng-Repeat, ng-style, ng-view
• Built-in Helper Functions, Using Angular JS with Typescript
What is an AngularJS??
• MVC JavaScript Framework by Google
• Rich Web Application Development
• Extends HTML DOM with additional attributes
• Open source
• Static HTML to Dynamic HTML
• Single Page Application
• Licensed under the Apache license version 2.0
• Sites- Nasa.gov, stackoverflow.com, Netflix, Youtube
AngularJS MVC Architecture
Definition of AngularJS

AngularJS is a structural framework for dynamic web

applications. It lets you use HTML as your template
language and lets you extend HTML's syntax to express
your application components clearly and succinctly. Its data
binding and dependency injection eliminate much of the
code you currently have to write. And it all happens within
the browser, making it an ideal partner with any server
technology.
History
• Misko Hevery and Adom Abrons
in 2009.
• GetAngular – frontend and backend
• Project – Google Feedback
• 6 months – 17000 lines of code
• 3 weeks – rewrite the app using GetAngular.
• Lines of code = 1500.
 Features - General
• Framework to create RIA –Gmail, Weather app, YouTube.

• Client-side applications in MVC way

• Cross-browser compliant

• Open source, completely free, and used by thousands of developers

around the world.
 Features - Core
• Data-binding − synchronization of data between model and
view components.

• Scope − objects.

Act as a glue between controller and view

• Controller − function.

• Services − Built-in services

• Filters − Subset of items from an array and returns a new array.

 Features – Core(cont..)
• Directives − markers on DOM elements
create custom HTML tags
built-in directives such as ng-bind, ng-model, etc.
• Templates − rendered with information from the controller and model.
• Routing − Switching views.
• Model View Whatever - distinct responsibilities.
• Deep Linking − allows to encode the state of application in the URL.
• Dependency Injection − helps to create, understand, and test the
applications easily.
 Tools
• AngularJS library
• To download visit angularjs.org
 Points to be covered
• Overview of AngularJS
• Need of AngularJS in real web sites
• AngularJS modules, AngularJS built-in directives
• AngularJS custom directives, AngularJS expressions
• Angular JS Data Binding, AngularJS filters
• AngularJS controllers, AngularJS scope
• AngularJS dependency injection, Angular JS Services
• Form Validation
• Routing using ng-Route, ng-Repeat, ng-style, ng-view
• Built-in Helper Functions, Using Angular JS with Typescript
Need of AngularJS in real web sites
• Major community
• Readable code
• Customizable
• Flexible
• Fast for small
• Charge dependency
• Pre-made solutions
• Easy-testing
 Points to be covered
• Overview of AngularJS
• Need of AngularJS in real web sites
• AngularJS modules, AngularJS built-in directives
• AngularJS custom directives, AngularJS expressions
• Angular JS Data Binding, AngularJS filters
• AngularJS controllers, AngularJS scope
• AngularJS dependency injection, Angular JS Services
• Form Validation
• Routing using ng-Route, ng-Repeat, ng-style, ng-view
• Built-in Helper Functions, Using Angular JS with Typescript
First App in AngularJS
Tools
• AngularJS library
• Editor/IDE
• Web Server
• Browser
 Include AngularJS library from CDN
• AngularJS library
• To download visit angularjs.org
Tools 1)Sublime Text
• AngularJS library 2)Visual Studio
• Editor/IDE
• Web Server 3)Eclipse
• Browser
Online 4)Ultra Edit
Editor
5)Aptana Studio 3
Plnkr.co
Jsbin.com
Tools 1)Sublime Text
• AngularJS library
2)Visual Studio
• Editor/IDE
• Web Server 3)Eclipse
• Browser
Online 4)Ultra Edit
Editor
5)Aptana Studio 3
Plnkr.co
Jsbin.com

➢Angular seed Project - Github

 First App
• AngularJS application consists of following three important parts −

• 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.
First App - steps
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
 First App - steps
Step 1: Load framework
<script src ="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>

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
 First App - steps
Step 1: Load framework
<script src ="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>

Step 2: Define AngularJS application using ng-app directive

<div ng-app = ""> ... </div>

Step 3: Define a model name using ng-model directive

Step 4: Bind the value of above model defined using ng-bind directive
 First App - steps
Step 1: Load framework
<script src ="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>

Step 2: Define AngularJS application using ng-app directive

<div ng-app = ""> ... </div>

Step 3: Define a model name using ng-model directive
<p>Enter your Name: <input type = "text" ng-model = "name"></p>

Step 4: Bind the value of above model defined using ng-bind directive
 First App - steps
Step 1: Load framework
<script src ="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
Step 2: Define AngularJS application using ng-app directive
<div ng-app = ""> ... </div>
Step 3: Define a model name using ng-model directive
<p>Enter your Name: <input type = "text" ng-model = "name"></p>
Step 4: Bind the value of above model defined using ng-bind directive
<p>Hello <span ng-bind = "name"></span>!</p>
 First App – test.html
<html> <head>
<title>AngularJS First Application</title> </head>
<body>
<h1>Sample Application</h1>
<div ng-app = "">
<p>Enter your Name: <input type = "text" ng-model = "name"></p>
<p>Hello <span ng-bind = "name"></span>!</p>
</div>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
</body>
</html>
• Open test.html in browser
 Points to be covered
• Overview of AngularJS
• Need of AngularJS in real web sites
• AngularJS modules, AngularJS built-in directives
• AngularJS custom directives, AngularJS expressions
• Angular JS Data Binding, AngularJS filters
• AngularJS controllers, AngularJS scope
• AngularJS dependency injection, Angular JS Services
• Form Validation
• Routing using ng-Route, ng-Repeat, ng-style, ng-view
• Built-in Helper Functions, Using Angular JS with Typescript
AngularJS modules
• Defines an application.
• Container for controller, services, filters, directives etc.
• Main() method
• Separates logic from code.
• Separate .js files
 AngularJS modules – How to create??
• The angular object's module() method is used to create a
module.
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>

Module Array of
Name dependent
modules
AngularJS modules – How to create??
• Add controller module in myapp module
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
Name
app.controller("myCtrl", function($scope) {
$scope.firstName = "Ajeet"; Controller
$scope.lastName = "Maurya"; }); Definition

</script>
AngularJS modules – How to create??

<div ng-app="myApp“ ng-controller=“myctrl” >

{{ firstName + " " + lastName }}

</div>
 AngularJS modules – How to create??
<div ng-app="myApp“ ng-controller=“myctrl”>
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "Ajeet";
$scope.lastName = "Maurya"; });
</script>
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.j
s"></script>
<body>
<div ng-app="myApp” ng-controller=“myCtrl”>
{{firstName+" "+lastName}}
</div>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.firstName="Riya";
$scope.lastName="Mishra";});
</script>
</body>
</html>
Separate Javascript files for each module
app.js
var app = angular.module("myApp",[]);

ctrl.js
app.controller("myCtrl",function($scope){
$scope.firstName="Riya";
$scope.lastName="Mishra";});
Separate Javascript files for each module
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/
angular.min.js"></script>
<body>
<div ng-app="myApp" ng-
controller="myCtrl">
{{firstName+" "+lastName}}
</div>
<script src = "app.js"></script>
<script src = "ctrl.js"></script>
</body>
</html>
 Points to be covered
• Overview of AngularJS
• Need of AngularJS in real web sites
• AngularJS modules, AngularJS built-in directives
• AngularJS custom directives, AngularJS expressions
• Angular JS Data Binding, AngularJS filters
• AngularJS controllers, AngularJS scope
• AngularJS dependency injection, Angular JS Services
• Form Validation
• Routing using ng-Route, ng-Repeat, ng-style, ng-view
• Built-in Helper Functions, Using Angular JS with Typescript
AngularJS expressions
• To bind application data to HTML.

• Double braces: {{ expression }}

• similar to ng-bind directives: ng-bind=”expression”.

• literals, operators, and variables

• {{ 4 + 4 }} or {{ Name + " " + roll_No }}

<html>
<script
src="http://ajax.googleapis.com/ajax/libs/an
gularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
{{2+3}}<br>
{{3/3}}<br>
{{2*3}}<br>
{{2-3}}
</div>
</body>
</html>
AngularJS expressions
• Similar to JS expressions except:
• Cannot contain control flow statements, exceptions, regular expressions
• Cannot declare function
• Cannot contain Bitwise, comma, void
• Cannot contain return keyword
• No use of new keyword
• Filters
<div ng-app="">
{{100}}<br>
{{true}}<br>
{{2.5}}<br>
{{true+false}}
</div>
Variables declared via ng-init directive
<div ng-app ng-init="pi=3.14;r=4">
Area of circle = {{pi*r*r}}<br>
</div>

<div ng-app ng-init="name='ABC'; roll=23">

Details = {{name+" "+roll}}<br>
</div>
<div ng-app ng-init="Student={name:'ABC', roll:23}">
Details = {{Student.name+" "+Student.roll}}<br>
</div>

<div ng-app ng-init="marks=[23, 30, 27]">

Details = {{marks[0]}}<br>
.

AngularJS built-in directives

• Extend HTML with new attributes-directives.
• Special attributes starting with ng- prefix.
• Markers on a DOM element –
• Attribute
• Element name
• Comment
• CSS class
ng-app ng-init ng-model ng-click

ng-controller ng-bind ng-repeat

ng- ng- ng-if

readonly disabled
 Starting Point
ng-app
Initializes Framework
Bootstraps
Compiles HTML code
Root
Processing of DOM elements
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/an
gularjs/1.4.8/angular.min.js"></script>
<body>
<div>
{{3+2}}
</div>
<div ng-app="">
{{2+2}}
</div>
<div>
{{4+2}}
</div>
</body></html>
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/an
gularjs/1.4.8/angular.min.js"></script>
<body>
<div> Angular
{{3+2}} Feature is not
</div> supported
<div ng-app="">
{{2+2}}
</div>
<div> Angular
{{4+2}} Feature is not
</div> supported
</body></html>
ng-app Application Module name
with
Separates controllers, services,
Module
name filters
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs
/1.4.8/angular.min.js"></script>
<body>
<div ng-app="newapp">
{{2+2}}
</div>
<script>
var app = angular.module("newapp",[]);
</script>
</body>
</html>
ng-app ng-init ng-model ng-click

ng-controller ng-bind ng-repeat

ng- ng- ng-if

ng-show disabled
readonly
 ng-init Initialize variables

<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/ang
ular.min.js"></script>
<body>
<div ng-app="newapp" ng-init = "name='Reva';
PID=23;marks=[34, 45]">
{{name}}
{{PID}}
{{marks}}
</div>
<script>
var app = angular.module("newapp",[]);
</script></body></html>
ng-app ng-init ng-model ng-click

ng-controller ng-bind ng-repeat

ng- ng- ng-if

ng-show disabled
readonly
 • Two-way data binding
• <input>, <select>, <textarea>=>property
ng-model • ng-init variables=> different
• ng-model properties- attached to $scope
object
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angula
rjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<input type="text" ng-model = "name" />
<H1>Hello, {{name}}</H1>
</div>
</body>
</html>
ng-app ng-init ng-model ng-click

ng-controller ng-bind ng-repeat

ng- ng- ng-if

ng-show disabled
readonly
ng-bind • Binds model property declared via $scope
or ng-model directive or result of expression
to an element.

• Updates element

• <span ng-bind = “10+5”></span>

<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularj
s/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<input type="text" ng-model = "name" /><br>
Hello, <span ng-bind="name"></span>
</div>
</body>
</html>
ng-app ng-init ng-model ng-click

ng-controller ng-bind ng-repeat

ng- ng- ng-if

ng-show disabled
readonly
 • The ng-repeat directive repeats a set of HTML, a
ng-repeat 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.

<div ng-app ng-

init="name=['Sachin','Dhoni','Sehwag']">
<li ng-repeat = "nm in name">
{{nm}}
</li>
</div>
ng-app ng-init ng-model ng-click

ng-controller ng-bind ng-repeat

ng- ng- ng-if

ng-show disabled
readonly
 • Apply custom behaviour when an element
ng-click is clicked.
• Normally used for buttons
• Pop up alerts

<button ng-click = "count=count+1"

ng-init="count=0" > Increment </button>
<br>
<H1>The count value is {{count}}</H1>
</div>
ng-app ng-init ng-model ng-click

ng-controller ng-bind ng-repeat

ng- ng- ng-if

ng-show disabled
readonly
 ng-
readonly

<div ng-app>
Readonly: <input ng-readonly="true" type="text"
value="This is readonly">
</div>
ng-app ng-init ng-model ng-click

ng-controller ng-bind ng-repeat

ng- ng- ng-if

ng-show disabled
readonly
 ng-
• Disables HTML element
disabled

<div ng-app>
Disabled: <input ng-disabled="true" type="text"
value="This is disabled">
</div>
ng-app ng-init ng-model ng-click

ng-controller ng-bind ng-repeat

ng- ng- ng-if

ng-show disabled
readonly
 ng-if • Creates or remove HTML element

<div ng-app>
Click Me:<input type="checkbox" ng-model="checked">
New:<input ng-if = "checked" type="text">
</div>
 Points to be covered
• Overview of AngularJS
• Need of AngularJS in real web sites
• AngularJS modules, AngularJS built-in directives
• AngularJS custom directives, AngularJS expressions
• Angular JS Data Binding, AngularJS filters
• AngularJS controllers, AngularJS scope
• AngularJS dependency injection, Angular JS Services
• Form Validation
• Routing using ng-Route, ng-Repeat, ng-style, ng-view
• Built-in Helper Functions, Using Angular JS with Typescript
 AngularJS custom directives
• Extends the functionality of HTML.
• Defined using "directive" function.
• Replaces the element for which it is activated.
• During bootstrap finds the matching elements
• Scope of the directive
• Custom directives for following type of elements:
Element Class
Attribute Comment
AngularJS custom directives
• Make an HTML element with the same tag name as the new
directive.
• Naming a directive - camel case name,
e.g. w3TestDirective
While invoking use - separated name
w3-test-directive
 Example
<body ng-app="myApp"> First Directive!!
<first-Test></first-Test>
<script>
var app = angular.module("myApp", []);
app.directive(“ firstTest ", function() {
return {
template : "<h1>First Directive!!</h1>"
};
}
);
</script>
</body>
Invoking a directive by using:
• As a tag name
<test-directive></test-directive>
• As a class name
<div class="test-directive"></div>
• As an attribute
<div test-directive></div>
• As a comment
<!-- directive: test-directive -->
 Restrictions
Restrict your directives to only be invoked by some of the
methods.

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

app.directive(“testDirective", function() {
return {
restrict : "A",
template : "<h1>Made by a directive!</h1>"
};
});
Restrictions
The legal restrict values are:
E for Element name
A for Attribute
C for Class
M for Comment

By default the value is EA, meaning that both Element names and attribute
names can invoke the directive.
 Example
<body ng-app="myApp"> First Directive!!
<first-Test></first-Test>
<script>
var app = angular.module("myApp", []);
app.directive(“ firstTest ", function() {
return {
template : "<h1>First Directive!!</h1>"
};
}
);
</script>
</body>
Attribute
Made by a directive!
<body ng-app="myApp">
<div w3-Test-Directive></div>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
return {
template : "<h1>Made by a directive!</h1>"
};
});
</script>
</body>
Class
Made by a directive!
<body ng-app="myApp">
<div class="test-Directive"></div>
<script>
var app = angular.module("myApp", []);
app.directive("testDirective", function() {
return {
restrict : "C",
template : "<h1>Made by a directive!</h1>"
};
});
</script>
</body>
Comment Made by a directive!
<body ng-app="myApp">
<!-- directive: w3-Test-Directive -->
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
return {
restrict : "M",
template : "<h1>Made by a directive!</h1>"
};
});
</script>
 Points to be covered
• Overview of AngularJS
• Need of AngularJS in real web sites
• AngularJS modules, AngularJS built-in directives
• AngularJS custom directives, AngularJS expressions
• Angular JS Data Binding, AngularJS filters
• AngularJS controllers, AngularJS scope
• AngularJS dependency injection, Angular JS Services
• Form Validation
• Routing using ng-Route, ng-Repeat, ng-style, ng-view
• Built-in Helper Functions, Using Angular JS with Typescript
Angular JS Data Binding
• software development technologies
• Bridge between the view and business logic of the application.
• Two-Way data binding model
• One-Way Data Binding => Value is taken from the data model and inserted
into an HTML element. No way to update model from view.
Angular JS Data Binding
• Two-Way Data Binding: Automatic synchronization of data between the
model and view components.
• view is a projection of the model
• If the model is changed, the view reflects the change and vice versa.
 First App – test.html
<html> <head>
<title>AngularJS First Application</title> </head>
<body> ng-app = "">
<h1>Sample Application</h1>
<div
<p>Enter your Name: <input type = "text" ng-model = "name"></p>
<p>Hello <span ng-bind = "name"></span>!</p>
</div>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
</body>
</html>
• Open test.html in browser
 Points to be covered
• Overview of AngularJS
• Need of AngularJS in real web sites
• AngularJS modules, AngularJS built-in directives
• AngularJS custom directives, AngularJS expressions
• Angular JS Data Binding, AngularJS filters
• AngularJS controllers, AngularJS scope
• AngularJS dependency injection, Angular JS Services
• Form Validation
• Routing using ng-Route, ng-Repeat, ng-style, ng-view
• Built-in Helper Functions, Using Angular JS with Typescript
AngularJS controllers
• Control the flow of data
• ng-controller directive.
• A JavaScript object containing attributes/properties and functions.
• $scope as a parameter
AngularJS controllers
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "Aryan";
$scope.lastName = "Khanna";
});
</script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<br>
Full Name: {{firstName + " " + lastName}}

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "Aryan";
$scope.lastName = "Khanna";
});
</script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "Aryan";
$scope.lastName = "Khanna";
});
</script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
FullName: {{fullname()}}

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "Aryan";
$scope.lastName = "Khanna";
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
}; }); </script>
 Points to be covered
• Overview of AngularJS
• Need of AngularJS in real web sites
• AngularJS modules, AngularJS built-in directives
• AngularJS custom directives, AngularJS expressions
• Angular JS Data Binding, AngularJS filters
• AngularJS controllers, AngularJS scope
• AngularJS dependency injection, Angular JS Services
• Form Validation
• Routing using ng-Route, ng-Repeat, ng-style, ng-view
• Built-in Helper Functions, Using Angular JS with Typescript
 AngularJS scope
• Binding part between the HTML (view) and the JavaScript
(controller).

• An object with the available properties and methods.

• Available for both the view and the controller.

 How to Use the Scope?
When you make a controller in AngularJS, you pass the $scope object as an argument:

<div ng-app="myApp“ ng-controller=“myCtrl”>

{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "Ajeet";
$scope.lastName = "Maurya"; });
</script>
 AngularJS scope
• The view (HTML) gets access to the properties added to the scope
• View - do not use the prefix $scope
• Refer to the property name {{carname}}

AngularJS application consist of:

• View
• Model
• Controller
Scope is the Model.
JavaScript object with properties and methods available for both the view and
the controller.
AngularJS scope
• Changes in the view- Updation in the model and the controller.

<div ng-app="myApp" ng-controller="myCtrl">

<input ng-model="name">
<h1>My name is {{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
</script>
AngularJS scope
• Scope
• ng-repeat directive, each repetition has access to the current
repetition object:
AngularJS scope
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Emil", "Tobias", "Linus"];
});
</script>
 Root Scope
• $rootScope - created on the HTML element
• Available in the entire application.
• same variable name in both the current scope and in the rootScope
• application uses the one in the current scope
<body ng-app="myApp">
<p>The rootScope's favorite color:</p> <script>
<h1>{{color}}</h1> var app = angular.module('myApp', []);
<div ng-controller="myCtrl"> app.run(function($rootScope) {
<p>The scope of the controller's favorite $rootScope.color = 'blue';
color:</p> });
<h1>{{color}}</h1> app.controller('myCtrl',
</div> function($scope) {
<p>The rootScope's favorite color is $scope.color = "red";
still:</p> });
<h1>{{color}}</h1> </script>
Output=>
 Points to be covered
• Overview of AngularJS
• Need of AngularJS in real web sites
• AngularJS modules, AngularJS built-in directives
• AngularJS custom directives, AngularJS expressions
• Angular JS Data Binding, AngularJS filters
• AngularJS controllers, AngularJS scope
• AngularJS dependency injection, Angular JS Services
• Form Validation
• Routing using ng-Route, ng-Repeat, ng-style, ng-view
• Built-in Helper Functions, Using Angular JS with Typescript
AngularJS filters
• Making the formatting and working with data easier.
• Basic Syntax:
• expressions by using the pipe (|) character
• e.g. {{ fullName | uppercase }}
Pre-built filters in AngularJS
• currency The number is formatted to currency format.
• date The date is specified to a specific format.
• filter The array is filtered on the basis of the provided criteria.
• limitTo The array or an string is limited into a specified number
of elements/characters.
• number A number if formatted to a string.
• orderBy The array is ordered by an expression.
• lowercase This filter converts a string to lowercase letters.
• uppercase This filter converts a string to uppercase letters.
• json It converts a JavaScript object into a JSON string.
 Currency - Formats a number as currency.
<body>

<div ng-app="myApp" ng-controller="costCtrl">

<h1>Currency Format</h1>
<h2>Price: {{ price | currency }}</h2>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('costCtrl', function($scope) {
$scope.price = 20;
});
</script> </body>
Date Filter - Formats a date to a specified format.
<body>

<div ng-app="myApp" ng-controller="datCtrl">

<h1>Date Filter</h1>
<p>Date = {{ today | date }}</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('datCtrl', function($scope) {
$scope.today = new Date();
});
</script>

</body>
Filter - Display only the required objects.
Selects a subset of an array.
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<h1>filter </h1>
<ul>
<li ng-repeat="x in names | filter : 'a'">
{{ x }}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', [])
App.controller('namesCtrl',
function($scope) {
$scope.names = ['Jani','Carl','Margareth','Hege' ];
});
limitTo - returns an array or a string containing
only a specified number of elements.
• Syntax=>
{{ object | limitTo : limit : begin }}
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<h1>filter </h1>
<ul>
<li ng-repeat="x in names | limitTo:3:1">
{{ x }}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', [])
App.controller('namesCtrl',
function($scope) {
$scope.names = ['Jani','Carl','Margareth','Hege' ];
});
</script> </body>
orderBy Filter: Sorting an array. Strings (default
alphabetically) and numbers (default ascending)
<body>
<div ng-app="myApp" ng-controller="orderCtrl">
<ul>
<li ng-repeat="x in cars | orderBy">

{{x}}

</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('orderCtrl', function($scope) {
$scope.cars = ["Dodge", "Fiat", "Audi", "Volvo", "BMW", "Ford"];
});
</script>

<p>The array items are displayed alphabetically.</p>

</body>
number Filter:
Probably the simplest filter. It simply formats a number to a
string.

Syntax:
{{ string | number : fractionsize}}
<body>

<div ng-app="myApp" ng-controller="nCtrl">

<h1>number Filter </h1>
<h2>Rs.{{money | number : 3}}</h2>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('nCtrl', function($scope) {
$scope.money = 999999;
});
</script>
</body>
lowercase Filter:
This filter simply converts a string to lowercase letters.
<body>
<h2>lowercase</h2>
<div ng-app="myApp" ng-controller="myCtrl">
<strong>Input:</strong>
<br>
<input type="text" ng-model="string">
<br>
<br> {{string|lowercase}}
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.string = "";
}); </script>
lowercase Filter:
This filter simply converts a string to uppercase letters.
<body>
<h2>Uppercase</h2>
<div ng-app="myApp" ng-controller="myCtrl">
<strong>Input:</strong>
<br>
<input type="text" ng-model="string">
<br>
<br> {{string|uppercase}}
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.string = "";
}); </script>
Json filter - This filter simply converts a JavaScript object into a JSON string,
and this is very much useful while the debugging of applications.

Syntax:
{{ object | json : spacing }}
<body>
<div ng-app="myApp" ng-controller="jsCtrl">
<h1>Carnames:</h1>
<pre>{{cars | json}}</pre>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('jsCtrl', function($scope) {
$scope.cars = ["Audi", "BMW", "Ford"];
});
</script>
 Points to be covered
• Overview of AngularJS
• Need of AngularJS in real web sites
• AngularJS modules, AngularJS built-in directives
• AngularJS custom directives, AngularJS expressions
• Angular JS Data Binding, AngularJS filters
• AngularJS controllers, AngularJS scope
• AngularJS dependency injection, Angular JS Services
• Form Validation
• Routing using ng-Route, ng-Repeat, ng-style, ng-view
• Built-in Helper Functions, Using Angular JS with Typescript
 AngularJS dependency injection
• Divide your application into multiple different types of components.

• Components can be injected into each other as dependencies.

• Dependencies instead of coding them within the component.

• Design pattern that specifies how components get holds of their

dependencies.

• Easier to reuse, configure and test.

Example – without DI
var employee = function(empName, designation){
this.empName = empName;
this.designation = designation;
}
function addEmp(){
var emp = new employee(“John”, “Manager”);}

addEmp();
Example – Code using DI
var employee = function(empName, designation){
this.empName = empName;
this.designation = designation;
}
function addEmp(){
..code
}
var emp = new employee(“John”, “Manager”);
addEmp(emp);
AngularJS dependency injection
• Core components
• Value
• Factory
• Service
• Provider
• Constant
 AngularJS dependency injection
• Core components
• Value: Number, String or JavaScript object.
• Pass values in factories, services or controllers

//define a module
var myModule = angular.module("myModule", []);
//create a value object and pass it a data.
myModule.value("numberValue", 100);
myModule.value("stringValue", "abc");
myModule.value("objectValue", { val1 : 123, val2 : "abc"} );

method name value

Injecting a value
var myModule = angular.module("myModule", []);
myModule.value("numberValue", 100);
myModule.controller("MyController", function($scope, numberValue) {
console.log(numberValue);
});
 AngularJS dependency injection
• Core components
• Factory
Function that is used to return value.
Uses a factory function to calculate and return the value.
var myModule = angular.module("myModule", []);
myModule.factory("myFactory", function() {
return "a value";
});
myModule.controller("MyController", function($scope, myFactory)
{
console.log(myFactory); });
AngularJS dependency injection
• Core components
• Service
• JavaScript object
• Set of functions
• Created by using service() function.
 Example
var myModule = angular.module("myModule", []);
myModule.service("myService", function() {
this.doIt = function(){
console.log(“done”); }
});
myModule.controller("MyController", function($scope, myService)
{
myService.doIt();
});
 AngularJS dependency injection
• Core components
• Provider - Used internally to create services, factory etc. during config
phase.
• special factory method with a get() function
• return the value/service/factory.
//define a module
var mainApp = angular.module("mainApp", []);
...
//create a service using provider which defines a method square to return squa
re of a number.
mainApp.config(function($provide) {
$provide.provider('MathService', function() {
this.$get = function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b;
}
return factory;
};
}); });
 (cont..)
mainApp.controller(“mycontroller”, function($scope,MathService){
$scope.task = function(){
MathService.Multiply();
}
});
 AngularJS dependency injection
• Core components
• Constant - Cannot inject values into the module.config() function.
• constants are used to pass values at config phase.
mainApp.constant("configParam", "constant value");
var app = angular.module("myapp", []);

//Define Constant
app.constant('clientId', '123456');

//Use constant in provider

app.config(['testProvider', 'clientId', function (testProvider, client
Id) {

}]);

//Use constant at Controller

app.controller('TestController', ['$scope', "clientId", function DemoC
ontroller($scope, clientId) {
$scope.clientId = clientId;
}]);
 Points to be covered
• Overview of AngularJS
• Need of AngularJS in real web sites
• AngularJS modules, AngularJS built-in directives
• AngularJS custom directives, AngularJS expressions
• Angular JS Data Binding, AngularJS filters
• AngularJS controllers, AngularJS scope
• AngularJS dependency injection, Angular JS Services
• Form Validation
• Routing using ng-Route, ng-Repeat, ng-style, ng-view
• Built-in Helper Functions, Using Angular JS with Typescript
Form Validation
• Create a form enriches with data binding and validation of input
controls.
• Collection of controls
• Input controls used in AngularJS forms:
• input elements
• select elements
• button elements
• textarea elements
 Data Binding
• First App - data-binding by using the ng-model
<html> <head>
<title>AngularJS First Application</title> </head>
<body> ng-app = "">
<h1>Sample Application</h1>
<div><form>
<p>Enter your Name: <input type = "text" ng-model = "name"></p></form>
<p>Hello <span ng-bind = "name"></span>!</p>
</div>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
</body>
</html>
 Checkbox
- value true or false

<body>
<div ng-app="">
<form>
Check to show a header:
<input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">My Header</h1>
</div>
Radiobuttons
<body ng-app="">
<form>
Pick a topic:
<input type="radio" ng-model="myVar" value="dogs">Dogs
<input type="radio" ng-model="myVar" value="cats">Cats
</form>
<div ng-switch="myVar">
<div ng-switch-when="dogs">
<h1>Dogs</h1>
<p>Welcome to a world of dogs.</p>
</div>
<div ng-switch-when="cats">
<h1>Cars</h1>
<p>Read about cats.</p> </div></div>
 <body ng-app="">

Selectbox <form>
Select a topic:
<select ng-model="myVar">
<option value="">
<option value="IAT1">IAT1
<option value="IAT2">IAT2
</select>
</form>
<div ng-switch="myVar">
<div ng-switch-when="IAT1">
<h1>IAT1</h1>
<p>IAT1 Portion</p>
</div>
<div ng-switch-when="IAT2">
<h1>IAT2</h1>
<p>IAT2 Portion</p>
</div> </body>
<div ng-app="myApp" ng-controller="formCtrl">
<form novalidate>
First Name:<br>
<input type="text" ng-model="user.firstName"><br>
Last Name:<br>
<input type="text" ng-model="user.lastName">
<br><br>
<button ng-click="reset()">RESET</button>
</form>
<p>form = {{user}}</p>
<p>master = {{master}}</p>
</div> <script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.master = {firstName: "John",
lastName: "Doe"};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
});
</script>
 Points to be covered
• Overview of AngularJS
• Need of AngularJS in real web sites
• AngularJS modules, AngularJS built-in directives
• AngularJS custom directives, AngularJS expressions
• Angular JS Data Binding, AngularJS filters
• AngularJS controllers, AngularJS scope
• AngularJS dependency injection, Angular JS Services
• Form Validation
• Routing using ng-Route, ng-Repeat, ng-style, ng-view
• Built-in Helper Functions, Using Angular JS with Typescript
Angular JS Services
• Function or object

• 30 built-in services

• E.g. $location

• Why to use Services?

• $location : window.location object
Built-in Services
$location Service
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>The url of this page is:</p>
<h3>{{myUrl}}</h3>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
</script>
The $http Service
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>Today's welcome message is:</p>
<h1>{{myWelcome}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("welcome.htm").then(function (response) {
$scope.myWelcome = response.data;
});
});
</script>
 <body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>The message will change after three seconds:</p>
<h1>{{message}}</h1>
</div>
The
$timeout <script>
Service var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
$scope.message = "Hi!";
$timeout(function () {
$scope.message = "Hello";
},3000);
});
</script>
Initially

After 3 seconds
 $log Service
• Logs the messages to the browser's console.

• log the error, information, warning or debug information.

<body ng-app="myApp" >
<div ng-controller="myController">
</div>
<script>
var myApp = angular.module('myApp', []);
myApp.controller("myController", function ($log) {
$log.log('This is log.');
$log.error('This is error.');
$log.info('This is info.');
$log.warn('This is warning.');
$log.debug('This is debugging.');
});
</script>
</body>
Output=>
$window Service
• Browser window object.
• In JS - window is a global object.
• $window service -wrapper around window object
<body ng-app="myApp" ng-controller="myController">
<button ng-click="DisplayAlert('Hello World!')">Display
Alert</button>
<script>
var myApp = angular.module('myApp', []);
myApp.controller("myController", function ($scope,
$window) {
$scope.DisplayAlert = function (message) {
$window.alert(message);
}
});
</script>
</body>
 Points to be covered
• Overview of AngularJS
• Need of AngularJS in real web sites
• AngularJS modules, AngularJS built-in directives
• AngularJS custom directives, AngularJS expressions
• Angular JS Data Binding, AngularJS filters
• AngularJS controllers, AngularJS scope
• AngularJS dependency injection, Angular JS Services
• Form Validation
• Routing using ng-Route, ng-Repeat, ng-style, ng-view
• Built-in Helper Functions, Using Angular JS with Typescript
Questions
Module 3
1) AngularJS Definition
AngularJS is a structural framework for dynamic web applications. It lets you use
HTML as your template language and lets you extend HTML's syntax to express
your application components clearly and succinctly. Its data binding and
dependency injection eliminate much of the code you currently have to write.
And it all happens within the browser, making it an ideal partner with any server
technology.

2) Core Features
● Data-binding − It is the automatic synchronization
of data between model and view components.
● Scope − These are objects that refer to the model.
They act as a glue between controller and view.
● Controller − These are JavaScript functions bound
to a particular scope.
● Services − AngularJS comes with several built-in
services such as $http to make a
XMLHttpRequests. These are singleton objects
which are instantiated only once in app.
● Filters − These select a subset of items from an
array and returns a new array.
● Directives − Directives are markers on DOM
elements such as elements, attributes, css, and
more. These can be used to create custom HTML
tags that serve as new, custom widgets. AngularJS
has built-in directives such as ngBind, ngModel,
etc.
● Templates − These are the rendered view with
information from the controller and model. These
can be a single file (such as index.html) or
multiple views in one page using partials.
● Routing − It is concept of switching views.
● Model View Whatever − MVW is a design pattern for
dividing an application into different parts
called Model, View, and Controller, each with
distinct responsibilities. AngularJS does not
 implement MVC in the traditional sense, but
rather something closer to MVVM (Model-View-
ViewModel). The Angular JS team refers it
humorously as Model View Whatever.
● Deep Linking − Deep linking allows to encode the
state of application in the URL so that it can be
bookmarked. The application can then be restored
from the URL to the same state.
● Dependency Injection − AngularJS has a built-in
dependency injection subsystem that helps the
developer to create, understand, and test the
applications easily.

3) Need of AngularJS in real websites.

• Major community
• Readable code
• Customizable
• Flexible
• Fast for small
• Charge dependency
• Pre-made solutions
• Easy-testing

4) Steps to create First application in angularJS

Step 1: Load framework
<script src
="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
Step 2: Define AngularJS application using ng-app directive
<div ng-app = ""> ... </div>
Step 3: Define a model name using ng-model directive
<p>Enter your Name: <input type = "text" ng-model = "name"></p>
Step 4: Bind the value of above model defined using ng-bind directive
<p>Hello <span ng-bind = "name"></span>!</p>

Complete Code is as=>

<html> <head>
<title>AngularJS First Application</title> </head>
<body>
<h1>Sample Application</h1>
<div ng-app = "">
<p>Enter your Name: <input type = "text" ng-model = "name"></p>
<p>Hello <span ng-bind = "name"></span>!</p>
</div>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
</body>
</html>
Open this file in browser

ng-app –
ng-app directive defines the root element. It starts an AngularJS
Application and automatically initializes or bootstraps the application
when web page containing AngularJS Application is loaded. It is also
used to load various AngularJS modules in AngularJS Application.
ng-bind –
The ng-bind Directive in AngularJS is used to bind/replace the text content of
any particular HTML element with the value that is entered in the given
expression. The value of specified HTML content updates whenever the value of
the expression changes in the ng-bind directive.
ng-model –
The ng-model directive is a directive that is used to bind the values of the HTML
controls (input, select, and textarea) or any custom form controls, and stores the
required user value in a variable and we can use that variable whenever we require
that value.

5) Application using ng-app, ng-controller and module() method.

Code=>
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></scri
pt>
<body>
<div ng-app="myApp” ng-controller=“myCtrl”>
{{firstName+" "+lastName}}
</div>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.firstName="Riya";
$scope.lastName="Mishra";});
</script>
</body>
</html>
Output=>

ng-app - ng-app directive defines the root element. It starts an

AngularJS Application and automatically initializes or bootstraps the
application when web page containing AngularJS Application is
loaded. It is also used to load various AngularJS modules in
AngularJS Application.
ng-controller - The ng-controller Directive in AngularJS is used to add a
controller to the application. It can be used to add methods, functions, and
variables that can be called on some event like click, etc to perform certain
actions.

module() – In AngularJS, a module defines an application. It is a container for

the different parts of your application like controller, services, filters, directives
etc.A module is used as a Main() method. Controller always belongs to a module.
Syntax=>
<script>
var app = angular.module("myApp", []);
</script>
‘myapp’=module name
[] => List of dependent modules

6) Application in angularJS using ng-app, ng-init and expressions.

Code=>
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></scri
pt>
<body>
<div ng-app="newapp" ng-init = "name='Reva'; PID=23;marks=[34, 45]">
{{name}}
{{PID}}
{{marks}}
</div>
<script>
var app = angular.module("newapp",[]);
</script></body></html>
Output=>

7) AngularJS expressions.
In AngularJS, expressions are used to bind application data to HTML. AngularJS
resolves the expression, and return the result exactly where the expression is
written. Expressions are written inside double braces {{expression}}.They can
also be written inside a directive:
ng-bind="expression".

AnularJS expressions are very similar to JavaScript expressions. They can

contain literals, operators, and variables. For example:
{{ 5 + 5 }} or {{ firstName + " " + lastName }}

Example=>
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></scri
pt>
<body>
<div ng-app="">
{{2+3}}<br>
{{3/3}}<br>
{{2*3}}<br>
{{2-3}}
</div>
</body>
</html>

If you remove the directive "ng-app", HTML will display the expression without
solving it. You can also write expressions wherever you want, AngularJS will
resolve the expression and return the result.
AngularJS numbers are similar to JavaScript numbers.
Example=>
<div ng-app ng-init="pi=3.14;r=4">
Area of circle = {{pi*r*r}}<br>
</div>
Output=>

AngularJS Strings=>
<div ng-app ng-init="name='ABC'; roll=23">
Details = {{name+" "+roll}}<br>
</div>
Output=>

Object=>
<div ng-app ng-init="Student={name:'ABC', roll:23}">
Details = {{Student.name+" "+Student.roll}}<br>
</div>
Output=>

Array=>
<div ng-app ng-init="marks=[23, 30, 27]">
Details = {{marks[0]}}<br></div>
Output=>

AngularJS expressions and JavaScript expressions both can contain

literals, operators and variables.

Difference between AngularJS expressions and JS expressions

1. Used in HTML : Angular expressions can be used inside HTML while

JavaScript expressions do not.
2. Filters : Angular expressions works with filters while JavaScript
expressions do not.
3. Context : Angular expressions do not have direct access of global
variables while JavaScript expressions have direct access. Global
 variables are window , document or location . The benefit of this in
AngularJS is it prevent from accidental access to the global state.
4. Forgiving : Angular JS forgiving the undefined and null for evaluated
expression, while in JavaScript, it generates ReferenceError or
TypeError.
5. No Control Flow Statements : We cannot use control flow statements
in angular expression. We can use only ternary operator.
6. No function declarations : We cannot declare functions in Angular
expression while in JavaScript expression we can do.
7. No RegExp Creation With Literal Notation : We cannot create
regular expression in Angular expression while in JavaScript
expression we can do.
8. No Comma And Void Operators : In Angular expression, we cannot
use comma or void operators.
9. One time binding : Angular JS supports one time binding. If you use
:: in an expression , then it will create one time binding. The benefit of
one time binding is it reduce the number of expression being watched
that makes the digest loop faster that improved the final result
performance. It also free the resources once binding is stabilized. It is
used when we do not require to change value once its set.

8) Angular modules.

In AngularJS, a module defines an application. It is a container for the different

parts of your application like controller, services, filters, directives etc. A module
is used as a Main() method. Controller always belongs to a module.

AngularJS supports modular approach. We can create two

types of modules −

● Application Module − used to initialize an

application with controller(s).
● Controller Module − used to define the
controller.

The angular object's module() method is used to create an applicatiom module. It

is also called AngularJS function angular.module().
Syntax=>
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>

Here, "myApp" specifies an HTML element in which the application will run.
Now we can add controllers, directives, filters, and more, to AngularJS
application.

Add controller to a module=>

<div ng-app="myApp" ng-controller = “myctrl”>...</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "Ajeet";
$scope.lastName = "Maurya"; });
</script>

Complete code=>
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<body>
<div ng-app="myApp” ng-controller=“myCtrl”>
{{firstName+" "+lastName}}
</div>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.firstName="Riya";
$scope.lastName="Mishra";});
</script>
</body>
</html>
Output⇒
In AngularJS applications, we can put the module and the controllers in
JavaScript files too.
app.js
var app = angular.module("myApp",[]);

ctrl.js
app.controller("myCtrl",function($scope){
$scope.firstName="Riya";
$scope.lastName="Mishra";});

index.html
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></scri
pt>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{firstName+" "+lastName}}
</div>
<script src = "app.js"></script>
<script src = "ctrl.js"></script>
</body>
</html>

9) ng-init, ng-readonly, ng-disabled, ng-if directives with example.

ng-init=>
The ng-init directive initializes an AngularJS Application data. It is used to assign
values to the variables.
Example=>
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></scri
pt>
<body>
<div ng-app="newapp" ng-init = "name='Reva' PID=23 marks=[34, 45]">
{{name}}
{{PID}}
{{marks}}
</div>
<script>
var app = angular.module("newapp",[]);
</script></body></html>
Output=>

ng-model directive
The ng-model directive defines the model/variable to be used in AngularJS
Application. The ngModel directive is a directive that is used to bind the values
of the HTML controls (input, select, and textarea) or any custom form controls,
and stores the required user value in a variable and we can use that variable
whenever we require that value. It also is used during form validations. The
various form input types (text, checkbox, radio, number, email, URL, date,
datetime-local time, month, week) can be used with the ngModel directive. This
directive is supported by <input>, <select> & <textarea>.
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></scri
pt>
<body>
<div ng-app="">
<input type="text" ng-model = "name" />
<H1>Hello, {{name}}</H1>
</div>
</body>

</html>

The ng-repeat directive repeats HTML elements for each item in a collection.
Angular-JS ng-repeat directive is a handy tool to repeat a set of HTML code for
a number of times or once per item in a collection of items. ng-repeat is mostly
used on arrays and objects.
<div ng-app ng-init="name=['Sachin','Dhoni','Sehwag']">
<li ng-repeat = "nm in name">
{{nm}}
</li>
</div>
Output=>
ng-click =>

The AngularJS ng-click directive facilitates you to specify custom behavior when
an element is clicked. So, it is responsible for the result what you get after
clicking.

It is supported by all HTML elements.

Syntax:
<element ng-click="expression"></element>
expression: It specifies an expression that is executed when an element is
clicked.
Example
<button ng-click = "count=count+1" ng-init="count=0"> Increment </button>
<br>
<H1>The count value is {{count}}</H1>
</div>

Output=>
ng-readonly=>
The ng-readonly Directive in AngularJS is used to specify the readonly attribute
of an HTML element. The HTML element will be readonly only if the expression
inside the ng-readonly directive returns true. The ng-readonly directive is
required to change the value between true and false. In case, if the readonly
attribute is set to false, then the presence of the readonly attribute makes the
element readonly, irrespective of its value.
Syntax:
<element ng-readonly="expression">
Contents...
</element>
Example=>
<div ng-app>
Readonly: <input ng-readonly="true" type="text" value="This is readonly">
</div>

Output=>

ng-disabled
The ng-disabled Directive in AngularJS is used to enable or disable the HTML
elements. If the expression inside the ng-disabled attribute returns true then the
form field will be disabled or vice versa. It is usually applied on the form field
(i.e, input, select, button, etc). The value of the disabled attribute can’t be set to
false, that in turn, disabled the elements, regardless of their value, in the
presence of the disabled attribute in HTML.
Example=>
<div ng-app>
Disabled: <input ng-disabled="true" type="text" value="This is disabled">
</div>
ng-if directive
The ng-if Directive in AngularJS is used to remove or recreate a portion of the
HTML element based on an expression. The ng-if is different from the ng-hide
directive because it completely removes the element in the DOM rather than just
hiding the display of the element. If the expression inside it is false then the
element is removed and if it is true then the element is added to the DOM.
<div ng-app>
Click Me:<input type="checkbox" ng-model="checked">
New:<input ng-if = "checked" type="text">
</div>
• Overview of AngularJS

https://www.geeksforgeeks.org/angularjs/

https://www.w3schools.com/angular/angular_intro.asp

https://www.tpointtech.com/what-is-angularjs

First App

https://www.tpointtech.com/angularjs-first-application

• AngularJS modules

https://www.geeksforgeeks.org/angularjs-modules/?ref=lbp

https://www.w3schools.com/angular/angular_modules.asp

• AngularJS built-in directives

https://www.geeksforgeeks.org/angularjs-ng-model-directive/?ref=lbp
https://www.w3schools.com/angular/angular_directives.asp
https://www.w3schools.com/angular/angular_model.asp
https://www.w3schools.com/angular/angular_directives.asp

• AngularJS custom directives

https://www.tutorialspoint.com/angularjs/angularjs_custom_directives.htm

https://docs.angularjs.org/guide/directive

https://www.csharp.com/UploadFile/f0b2ed/angularjs-custom-directives/

• AngularJS expressions

https://www.geeksforgeeks.org/angularjs-expressions/?ref=lbp

https://www.w3schools.com/angular/angular_expressions.asp
• Angular JS Data Binding

https://www.tpointtech.com/angularjs-data-binding

https://www.w3schools.com/angular/angular_databinding.asp

https://www.geeksforgeeks.org/angularjs-data-binding/?ref=lbp

• AngularJS filters

https://www.w3schools.com/angular/angular_filters.asp

• AngularJS controllers, AngularJS scope

https://www.geeksforgeeks.org/angularjs-controllers/?ref=lbp

https://www.geeksforgeeks.org/angularjs-scope/?ref=lbp

https://www.w3schools.com/angular/angular_controllers.asp

https://www.w3schools.com/angular/angular_scopes.asp

• AngularJS dependency injection

https://docs.angularjs.org/guide/di

https://www.tpointtech.com/angularjs-dependency-injection

https://www.tutorialspoint.com/angularjs/angularjs_dependency_injection.htm

• Angular JS Services

https://www.geeksforgeeks.org/angularjs-services/?ref=lbp

https://www.w3schools.com/angular/angular_services.asp

https://www.csharp.com/article/angularjs-services-with-examples/

• Form Validation

https://www.geeksforgeeks.org/angularjs-form-validation/?ref=lbp
 https://www.w3schools.com/angular/angular_validation.asp

• Routing using ng-Route, ng-Repeat, ng-style, ng-view

• https://www.w3schools.com/angular/angular_routing.asp

• https://www.geeksforgeeks.org/how-to-execute-a-routing-in-the-angularjs-
framework/

• Built-in Helper Functions

• https://docs.angularjs.org/api/ng/function