Angular JS Notes

AngularJS
AngularJS version 1.0 was released in 2012.
Miško Hevery, a Google employee, started to work with AngularJS

in 2009.
AngularJS is a JavaScript framework. It can be added to an

HTML page with a <script> tag.
AngularJS extends HTML attributes with Directives, and binds

data to HTML with Expressions.
 AngularJS is a JavaScript Framework
 AngularJS is a JavaScript framework written in JavaScript.
 AngularJS is distributed as a JavaScript file, and can be

added to a web page with a script tag:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs
/1.6.9/angular.min.js"></script>
 AngularJS Extends HTML
 AngularJS extends HTML with ng-directives.
 The ng-app directive defines an AngularJS application.
 The ng-model directive binds the value of HTML controls

(input, select, textarea) to application data.
 The ng-bind directive binds application data to the HTML

view.
AngularJS Example
<!DOCTYPE html>
<html>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
</body>
</html>
Example explained:
AngularJS starts automatically when the web page has loaded.
 The ng-app directive tells AngularJS that the <div> element

is the "owner" of an AngularJS application.
 The ng-model directive binds the value of the input field to

the application variable name.
 The ng-bind directive binds the content of the <p> element

to the application variable name.
AngularJS Directives
As you have already seen, AngularJS directives are HTML
attributes with an ng prefix.
 The ng-init directive initializes AngularJS application

variables.
AngularJS Example
<div ng-app="" ng-init="firstName='John'">
<p>The name is <span ng-bind="firstName"></span></p>
</div>
Alternatively with valid HTML:
AngularJS Example
<div data-ng-app="" data-ng-init="firstName='John'">
<p>The name is <span data-ng-bind="firstName"></span></p>
</div>
You can use data-ng-, instead of ng-, if you want to make your
page HTML valid.
AngularJS Expressions
AngularJS expressions are written inside double braces:
{{ expression }}.
AngularJS will "output" data exactly where the expression is

written:
AngularJS Example
<!DOCTYPE html>
<html>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
 AngularJS expressions bind AngularJS data to HTML the

same way as the ng-bind directive.
AngularJS Example
<!DOCTYPE html>
<html>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p>{{name}}</p>
</div>
</body>
</html>
AngularJS Applications
AngularJS modules define AngularJS applications.
AngularJS controllers control AngularJS applications.
The ng-app directive defines the application, the ng-

controller directive defines the controller.
AngularJS Example
<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}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>
AngularJS modules define applications:
AngularJS Module
AngularJS controllers control applications:

AngularJS Controller
$scope.firstName= "John";
$scope.lastName= "Doe";
});
AngularJS Expressions
AngularJS expressions can be written inside double

braces: {{ expression }}.
AngularJS expressions can also be written inside a directive: ng-

bind="expression".
AngularJS will resolve the expression, and return the result

exactly where the expression is written.
AngularJS expressions are much like JavaScript

expressions: They can contain literals, operators, and variables.
Example {{ 5 + 5 }} or {{ firstName + " " + lastName }}
If you remove the ng-app directive, HTML will display the

expression as it is, without solving it
Some example using ng-bind:
Example
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: <span ng-bind="quantity *

cost"></span></p>
</div>
AngularJS strings are like JavaScript strings:
Example
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is {{ firstName + " " + lastName }}</p>
</div>
Same example using ng-bind:
Example
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is <span ng-bind="firstName + ' ' +

lastName"></span></p>
</div>
AngularJS Objects
AngularJS objects are like JavaScript objects:
Example
<div ng-app="" ng-
init="person={firstName:'John',lastName:'Doe'}">
<p>The name is {{ person.lastName }}</p>
</div>
Example
<div ng-app="" ng-
init="person={firstName:'John',lastName:'Doe'}">
<p>The name is <span ng-bind="person.lastName"></span></p>
</div>
AngularJS Arrays
AngularJS arrays are like JavaScript arrays:
Example
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is {{ points[2] }}</p>
</div>
Example
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is <span ng-bind="points[2]"></span></p>
</div>
AngularJS Modules
An AngularJS module defines an application.
The module is a container for the different parts of an application.
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
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
Adding a Controller
Add a controller to your application, and refer to the controller
with the ng-controller directive:
Example
{{ firstName + " " + lastName }}
</div>
<script>
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
AngularJS Directives
AngularJS directives are extended HTML attributes with the
prefix ng-.
The ng-app directive initializes an AngularJS application.
The ng-init directive initializes application data.
The ng-model directive binds the value of HTML controls (input,

select, textarea) to application data.
Repeating HTML Elements
The ng-repeat directive repeats an HTML element:
Example
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
Create New Directives
In addition to all the built-in AngularJS directives, you can create
your own directives.
New directives are created by using the .directive function.
To invoke the new directive, make an HTML element with the

same tag name as the new directive.
When naming a directive, you must use a camel case

name, w3TestDirective, but when invoking it, you must
use - separated name, w3-test-directive:
Example
<body ng-app="myApp">
<w3-test-directive></w3-test-directive>
<script>
app.directive("w3TestDirective", function() {
return {
template : "<h1>Made by a directive!</h1>"
};
});
</script>
</body>
The ng-model Directive

With the ng-model directive you can bind the value of an input
field to a variable created in AngularJS.
The binding goes both ways. If the user changes the value inside
the input field, the AngularJS property will also change its value:
The ng-model directive can provide type validation for application
data (number, e-mail, required):
If the property in the ng-model attribute does not exist, AngularJS
will create one for you.
The ng-model directive can provide status for application data

(valid, dirty, touched, error):
Example
<form ng-app="" name="myForm" ng-init="myText =
'post@myweb.com'">
Email:
<input type="email" name="myAddress" ng-
model="myText" required>
<h1>Status</h1>
{{myForm.myAddress.$valid}}
{{myForm.myAddress.$dirty}}
{{myForm.myAddress.$touched}}
</form>
The ng-model directive provides CSS classes for HTML elements,

depending on their status
Data binding in AngularJS is the synchronization between the

model and the view.
Two-way Binding
Data binding in AngularJS is the synchronization between the
model and the view.
When data in the model changes, the view reflects the change,
and when data in the view changes, the model is updated as well.
This happens immediately and automatically, which makes sure
that the model and the view is updated at all times.
AngularJS Controllers
AngularJS applications are controlled by controllers.
The ng-controller directive defines the application controller.
A controller is a JavaScript Object, created by a standard

JavaScript object constructor.
AngularJS will invoke the controller with a $scope object.
In AngularJS, $scope is the application object (the owner of

application variables and functions).
Controllers In External Files

In larger applications, it is common to store controllers in
external files.
Just copy the code between the <script> tags into an external file
named personController.js
Example : <script src="personController.js"></script>
AngularJS Scope
The scope is the binding part between the HTML (view) and the
JavaScript (controller).
The scope is an object with the available properties and methods.
The scope is available for both the view and the controller.
How to Use the Scope?
When you make a controller in AngularJS, you pass

the $scope object as an argument:
Example
Properties made in the controller, can be referred to in the view:

<h1>{{carname}}</h1>
</div>
<script>
$scope.carname = "Volvo";
});
</script>
When adding properties to the $scope object in the controller, the

view (HTML) gets access to these properties.
In the view, you do not use the prefix $scope, you just refer to a
property name, like {{carname}}.
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.
AngularJS Filters
AngularJS provides filters to transform data:
 currency Format a number to a currency format.

 date Format a date to a specified format.
 filter Select a subset of items from an array.
 json Format an object to a JSON string.
 limitTo Limits an array/string, into a specified number of
elements/characters.
 lowercase Format a string to lower case.
 number Format a number to a string.
 orderBy Orders an array by an expression.
 uppercase Format a string to upper case.
Adding Filters to Expressions

Filters can be added to expressions by using the pipe
character |, followed by a filter.
The uppercase filter format strings to upper case:

Example
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ lastName | uppercase }}</p>
</div>
Adding Filters to Directives

Filters are added to directives, like ng-repeat, by using the pipe
character |, followed by a filter:
Example
The orderBy filter sorts an array:
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
What is a Service?
In AngularJS, a service is a function, or object, that is available
for, and limited to, your AngularJS application.
AngularJS has about 30 built-in services. One of them is

the $location service.
The $location service has methods which return information
about the location of the current web page:
Example
Use the $location service in a controller:

app.controller('customersCtrl', function($scope, $location)
{
$scope.myUrl = $location.absUrl();
});
The $timeout Service

The $timeout service is AngularJS' version of
the window.setTimeout function.
The $interval Service

The $interval service is AngularJS' version of
the window.setInterval function
AngularJS $http
$http is an AngularJS service for reading data from remote
The AngularJS $http service makes a request to the server, and

returns a response.
Methods
The example above uses the .get method of the $http service.
The .get method is a shortcut method of the $http service. There

are several shortcut methods:
 .delete()
 .get()
 .head()
 .jsonp()
 .patch()
 .post()
 .put()
Properties
The response from the server is an object with these properties:
 .config the object used to generate the request.

 .data a string, or an object, carrying the response from the
server.
 .headers a function to use to get header information.
 .status a number defining the HTTP status.
 .statusText a string defining the HTTP status.
Example
app.controller('myCtrl', function($scope, $http) {
$http.get("welcome.htm")
.then(function(response) {
$scope.content = response.data;
$scope.statuscode = response.status;
$scope.statustext = response.statusText;
});
});
http is an XMLHttpRequest object for requesting external data.
AngularJS Tables
The ng-repeat directive is perfect for displaying tables.
Display the Table Index ($index)
To display the table index, add a <td> with $index:
AngularJS Example
<table>
<tr ng-repeat="x in names">
<td>{{ $index + 1 }}</td>
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
Creating a Select Box Using ng-options

If you want to create a dropdown list, based on an object or an
array in AngularJS, you should use the ng-options directive
AngularJS lets you create dropdown lists based on items in an

array, or an object.
The ng-disabled Directive

The ng-disabled directive binds AngularJS application data to
the disabled attribute of HTML elements
The ng-show Directive

The ng-show directive shows or hides an HTML element.
The ng-hide Directive
The ng-hide directive hides or shows an HTML element
AngularJS Events
You can add AngularJS event listeners to your HTML elements by
using one or more of these directives:
 ng-blur
 ng-change
 ng-click
 ng-copy
 ng-cut
 ng-dblclick
 ng-focus
 ng-keydown
 ng-keypress
 ng-keyup
 ng-mousedown
 ng-mouseenter
 ng-mouseleave
 ng-mousemove
 ng-mouseover
 ng-mouseup
 ng-paste
The event directives allows us to run AngularJS functions at

certain user events.
An AngularJS event will not overwrite an HTML event, both events

will be executed.
Mouse Events
Mouse events occur when the cursor moves over an element, in
this order:
1. ng-mouseover
2. ng-mouseenter
3. ng-mousemove
4. ng-mouseleave
Or when a mouse button is clicked on an element, in this order:
1. ng-mousedown
2. ng-mouseup
3. ng-click
Toggle, True/False
If you want to show a section of HTML code when a button is
clicked, and hide when the button is clicked again, like a
dropdown menu, make the button behave like a toggle switch
$event Object
You can pass the $event object as an argument when calling the
function.
The $event object contains the browser's event object:
Example
<h1 ng-mousemove="myFunc($event)">Mouse Over Me!</h1>
<p>Coordinates: {{x + ', ' + y}}</p>

</div>
<script>
$scope.myFunc = function(myE) {
$scope.x = myE.clientX;
$scope.y = myE.clientY;
}
});
</script>
Checkbox
A checkbox has the value true or false. Apply the ng-
model directive to a checkbox, and use its value in your
application.
Example
Show the header if the checkbox is checked:

<form>
Check to show a header:
<input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">My Header</h1>
Radiobuttons
Bind radio buttons to your application with the ng-model directive.
Radio buttons with the same ng-model can have different values,
but only the selected one will be used.
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.
Client-side validation cannot alone secure user input. Server side

validation is also necessary.
Required
Use the HTML5 attribute required to specify that the input field
must be filled out:
Example
The input field is required:

<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>The input's valid state is:</p>

<h1>{{myForm.myInput.$valid}}</h1>
E-mail
Use the HTML5 type email to specify that the value must be an e-
mail:
Example
The input field has to be an e-mail:

<form name="myForm">
<input name="myInput" ng-model="myInput" type="email">
</form>
<p>The input's valid state is:</p>

<h1>{{myForm.myInput.$valid}}</h1>
Form State and Input State

AngularJS is constantly updating 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.
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.
AngularJS Global API
The AngularJS Global API is a set of global JavaScript functions

for performing common tasks like:
 Comparing objects
 Iterating objects
 Converting data
The Global API functions are accessed using the angular object.
Below is a list of some common API functions:
API Description
angular.lowercase() Converts a string to lowercase
angular.uppercase() Converts a string to uppercase
angular.isString() Returns true if the reference is a string
angular.isNumber() Returns true if the reference is a number

 With AngularJS, you can include HTML from an external file.
AngularJS Includes
With AngularJS, you can include HTML content using the ng-
include directive:
Example
<body ng-app="">
<div ng-include="'myFile.htm'"></div>
</body>
Include Cross Domains
By default, the ng-include directive does not allow you to

include files from other domains.
To include files from another domain, you can add a whitelist of

legal files and/or domains in the config function of your
application:
Example :
<div ng-
include="'https://tryit.w3schools.com/angular_include.php'">
</div>
<script>
var app = angular.module('myApp', [])
app.config(function($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist([
'https://tryit.w3schools.com/**'
]);
});
</script>
</body>
AngularJS Animations
AngularJS provides animated transitions, with help from CSS.
What is an Animation?
An animation is when the transformation of an HTML element

gives you an illusion of motion.
Example:
Check the checkbox to hide the DIV:

<body ng-app="ngAnimate">
Hide the DIV: <input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
</body>
Applications should not be filled with animations, but some

animations can make the application easier to understand.
What do I Need?
 To make your applications ready for animations, you must

include the AngularJS Animate library:
/1.6.9/angular-animate.js"></script>
 Then you must refer to the ngAnimate module in your

application:
<body ng-app="ngAnimate">
 Or if your application has a name, add ngAnimate as a

dependency in your application module:
Example
<h1>Hide the DIV: <input type="checkbox" ng-

model="myCheck"></h1>
<div ng-hide="myCheck"></div>
<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>
What Does ngAnimate Do?
The ngAnimate module adds and removes classes.
The ngAnimate module does not animate your HTML elements,

but when ngAnimate notice certain events, like hide or show of
an HTML element, the element gets some pre-defined classes
which can be used to make animations.
The directives in AngularJS who add/remove classes are:
 ng-show
 ng-hide
 ng-class
 ng-view
 ng-include
 ng-repeat
 ng-if
 ng-switch
The ng-show and ng-hide directives adds or removes a ng-

hide class value.
The other directives adds a ng-enter class value when they enter
the DOM, and a ng-leave attribute when they are removed from
the DOM.
The ng-repeat directive also adds a ng-move class value when the
HTML element changes position.
In addition, during the animation, the HTML element will have a

set of class values, which will be removed when the animation
has finished. Example: the ng-hide directive will add these class
values:
 ng-animate
 ng-hide-animate
 ng-hide-add (if the element will be hidden)
 ng-hide-remove (if the element will be showed)
 ng-hide-add-active (if the element will be hidden)
 ng-hide-remove-active (if the element will be showed)
Animations Using CSS
We can use CSS transitions or CSS animations to animate HTML

elements. This tutorial will show you both.
CSS Transitions
CSS transitions allows you to change CSS property values

smoothly, from one value to another, over a given duration:
Example:
When the DIV element gets the .ng-hide class, the transition will
take 0.5 seconds, and the height will smoothly change from
100px to 0:
<style>
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
}
.ng-hide {
height: 0;
}
</style>
CSS Animations
CSS Animations allows you to change CSS property values

smoothly, from one value to another, over a given duration:
Example:
When the DIV element gets the .ng-hide class,

the myChange animation will run, which will smoothly change the
height from 100px to 0:
<style>
@keyframes myChange {
from {
height: 100px;
} to {
height: 0;
}
}
div {
height: 100px;
background-color: lightblue;
}
div.ng-hide {
animation: 0.5s myChange;
}
</style>
AngularJS Routing
 The ngRoute module helps your application to become a

Single Page Application.
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
What do I Need?
 To make your applications ready for routing, you must
include the AngularJS Route module:
/1.6.9/angular-route.js"></script>
 Then you must add the ngRoute as a dependency in the

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

 Now your application has access to the route module, which
provides the $routeProvider.
 Use the $routeProvider to configure different routes in your

application:
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
$routeProvider
With the $routeProvider you can define what page to display

when a user clicks a link.
Template
You can also use the template property, which allows you to write
HTML directly in the property value, and not refer to a page.
The otherwise method
You can also use the otherwise method, which is the default route
when none of the others get a match.

Angular JS Notes

Uploaded by

Angular JS Notes

Uploaded by

AngularJS

AngularJS version 1.0 was released in 2012.

Miško Hevery, a Google employee, started to work with AngularJS

AngularJS is a JavaScript framework. It can be added to an

AngularJS extends HTML attributes with Directives, and binds

 AngularJS is a JavaScript Framework

 AngularJS is a JavaScript framework written in JavaScript.

 AngularJS is distributed as a JavaScript file, and can be

 AngularJS Extends HTML

 AngularJS extends HTML with ng-directives.

 The ng-app directive defines an AngularJS application.

 The ng-model directive binds the value of HTML controls

 The ng-bind directive binds application data to the HTML

AngularJS starts automatically when the web page has loaded.

 The ng-app directive tells AngularJS that the <div> element

 The ng-model directive binds the value of the input field to

 The ng-bind directive binds the content of the <p> element

 The ng-init directive initializes AngularJS application

<p>The name is <span ng-bind="firstName"></span></p>

Alternatively with valid HTML:

<p>The name is <span data-ng-bind="firstName"></span></p>

AngularJS will "output" data exactly where the expression is

 AngularJS expressions bind AngularJS data to HTML the

AngularJS modules define AngularJS applications.

AngularJS controllers control AngularJS applications.

The ng-app directive defines the application, the ng-

First Name: <input type="text" ng-model="firstName"><br>

AngularJS modules define applications:

AngularJS controllers control applications:

AngularJS expressions can be written inside double

AngularJS expressions can also be written inside a directive: ng-

AngularJS will resolve the expression, and return the result

AngularJS expressions are much like JavaScript

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

If you remove the ng-app directive, HTML will display the

Some example using ng-bind:

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

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

Same example using ng-bind:

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

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

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

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

Same example using ng-bind:

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

The module is a container for the different parts of an application.

The module is a container for the application controllers.

Controllers always belong to a module.

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

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

The ng-app directive initializes an AngularJS application.

The ng-init directive initializes application data.

The ng-model directive binds the value of HTML controls (input,

Repeating HTML Elements

The ng-repeat directive repeats an HTML element:

New directives are created by using the .directive function.

To invoke the new directive, make an HTML element with the

When naming a directive, you must use a camel case

The ng-model Directive

The ng-model directive can provide status for application data

The ng-model directive provides CSS classes for HTML elements,

Data binding in AngularJS is the synchronization between the

AngularJS applications are controlled by controllers.

The ng-controller directive defines the application controller.

A controller is a JavaScript Object, created by a standard

AngularJS will invoke the controller with a $scope object.

In AngularJS, $scope is the application object (the owner of

Controllers In External Files

Example : <script src="personController.js"></script>

The scope is an object with the available properties and methods.

When you make a controller in AngularJS, you pass

Properties made in the controller, can be referred to in the view:

When adding properties to the $scope object in the controller, the

The rootScope is available in the entire application.

 currency Format a number to a currency format.

Adding Filters to Expressions