Angular JS: Angularjs Extends HTML With Ng-Directives

ANGULAR JS
AngularJS is a JavaScript framework. It is a library written in JavaScript,

AngularJS is distributed as a JavaScript file, It can be added to an HTML
page with a <script> tag.
<script
src="https://ajax.googleapis.com/ajax/libs/ angularjs/1.6.4/angular.min.js">
</script>
AngularJS extends HTML attributes with Directives, and binds data to

HTML with Expressions.
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.
ANGULAR JS EXAMPLE
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com
/ajax/libs/angularjs/1.6.4/angular.min.js
"></script>
<body>
<div ng-app="">
<! The ng-app directive tells AngularJS
that the <div> element is the "owner" of
an AngularJS application.>
<p>Input something in the input box </p>
<p>Name: <input type="text"

ng-model="name"
style="border:3px solid MediumTurquoise"
></p>
<!The ng-model directive binds the

value of the input field to the
application variable name.>
<p ng-bind="name"></p>
<!The ng-bind directive binds the inner
HTML of the<p> element to the application
variable name. >
</div>
</body>
</html>
Result For Above Example
Input something in the input box
Name:
element to the application variable name.
Accordian Example In Angular JS
<!DOCTYPE html>
<html>
<head>
<style>
button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion.active, button.accordion:
hover {
background-color: #ddd;
}
button.accordion:after {
/* Unicode character for "plus" sign (+)
is '\02795' */
content: '\02795';
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
}
button.accordion.active:after {
/* Unicode character for "minus" sign (-)

is '\2796' */
content: "\2796";
}
div.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: 0.6s ease-in-out;
opacity: 0;
}
div.panel.show {
opacity: 1;
max-height: 500px;
}
</style>
</head>
<body>
<h2>Accordion Example</h2>
<p>In this example we have added a "plus"

sign to each button. When the user clicks
on the button,the "plus" sign is replaced
with a "minus" sign.</p>
<button class="accordion">Tiger</button>
<div class="panel">
<p>The tiger is the largest cat species,
most recognisable for their pattern of
dark vertical stripes on reddish-orange
fur with a lighter underside.</p>
</div>
<button class="accordion">Lion</button>
<div class="panel">
<p>The lion is one of the big cats in
the genus Panthera and a member of the family
Felidae.The commonly used term African lion
collectively denotes the several subspecies
in Africa.</p>
</div>
<button class="accordion">Cheetah</button>
<div class="panel">
<p>The cheetah, also known as the
hunting leopard, is a big cat that occurs
mainly in eastern and southern Africa and
a few parts of Iran</p>
</div>
<script>
var acc = document.getElementsByClassName

("accordion");
var i;
for (i = 0; i < acc.length; i++) {

acc[i].onclick = function(){
this.classList.toggle("active");
this.nextElementSibling.classList.
toggle("show");
}
}
</script>
</body>
</html>

Accordion Example
In this example we have added a "plus" sign to each button. When the user
clicks on the button, the "plus" sign is replaced with a "minus" sign.
Tiger
Lion
Cheetah
TRY YOURSELF :
Type the code or copy/paste below and press show result to see the result
ANGULAR JS 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 }}
EXPRESSIONS EXAMPLE
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.
com/ajax/libs/angularjs/1.6.9/angular.
min.js"></script>
<body>
<div ng-app>
<p>Expression With Directive:{{ 6 + 6 }}

</p>
</div>
<p> If you remove the ng-app directive,

HTML will display the expression as it
is, without solving it.
As you can see below.</p>
<div>
<p>Expression Without Directive:{{6 + 6}}

</p>
</div>
</body>
</html>
Expression With Directive: 12
If you remove the ng-app directive, HTML will display the expression as it
is, without solving it. As you can see below.
Expression Without Directive: {{ 6 + 6 }}
ANGULAR JS NUMBERS
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/
ajax/libs/angularjs/1.6.9/angular.min.js"
></script>
<body>
<div ng-app="" ng-init="quantity=2;

cost=5">
<p>Total Amount: {{ quantity * cost }}

</p>
<p> The same example using ng-bind below.

</p>
<p>Total Amount: <span ng-bind="quantity

* cost">
</span></p>
<div/>
</body>
</html>
Total Amount: 10
The same example using ng-bind below.
Total Amount: 10
TRY YOURSELF :
ANGULAR JS MODEL & DATA BINDING
The ngModel directive binds an input ,select, textarea (or custom form
control) to a property on the scope using NgModelController, which is
created and exposed by this directive.
ngModel is responsible for:
 Binding the view into the model, which other directives such as input,
textarea or select require.
 Providing validation behavior (i.e. required, number, email, url).
 Keeping the state of the control (valid/invalid, dirty/pristine,

touched/untouched, validation errors).
 Setting related css classes on the element (ng-valid, ng-invalid, ng-
dirty, ng-pristine, ng-touched, ng-untouched, ng-empty, ng-not-
empty) including animations.
 Registering the control with its parent form.
ngModel EXAMPLE
<!DOCTYPE html>
<html>
/ajax/libs/angularjs/1.6.9/angular.min.
js"></script>
<body>
<div id ="ID1" ng-app="firstApp"

ng-controller="myCtrl1">
Name: <input ng-model="name">
</div>
<script>
var app = angular.module('firstApp',[]);

app.controller('myCtrl1', function
($scope) {
$scope.name = "Dangerous Dave ";
});
angular.bootstrap(document.getElementById
("ID1"), ['firstAPP']);
</script>
<p>Use the ng-model directive to bind

the value of the input field to a
property made in the controller.
</p>
</body>
</html>

Name:
Use the ng-model directive to bind the value of the input field to a property
made in the controller.
TWO-WAY BINDING
One of the core feature of AngularJS which makes it popular is two way
data binding. In two way data binding, any changes to the model are
immediately reflected in the View and any changes in the View updates the
model.
The binding goes both ways. If the user changes the value inside the input
field, the AngularJS property will also change its value.
<!DOCTYPE html>
<html>
/ajax/libs/angularjs/1.6.9/angular.min.js"
></script>
<body>
<div id ="ID2" ng-app="secondAPP"

Name: <input ng-model="name">

<h1>You entered: {{name}}</h1>
</div>
<script>
var app = angular.module('secondAPP',[]);

app.controller('myCtrl2', function($scope)
{
$scope.name = "Tom Jerry";
});
("ID2"), ['secondAPP']);
</script>
<p>Change the name inside the input

field,and you will see the name in the
header changes accordingly.
</p>
Name:
You entered: Tom Jerry

Change the name inside the input field, and you will see the name in the
header changes accordingly.
TRY YOURSELF :
ANGULAR JS CONTROLLER
AngularJS controllers control the data of AngularJS applications and they

are regular JavaScript Objects.
AngularJS applications are controlled by controllers and the ng-controller

directive defines the application controller.
Explantion:
 The AngularJS application is defined by ng-app = " ". The application

runs inside the <div>.
 The ng-controller = " " attribute is an AngularJS directive. It defines a

controller.
 AngularJS will invoke the controller with a $scope object.

 In AngularJS, $scope is the application object (the owner of
application variables and functions).
 The controller creates two properties (variables) in the scope .
 The ng-model directives bind the input fields to the controller

properties.
ANGULAR JS CONTROLLER EXAMPLE

<!DOCTYPE html>
<html>
></script>
<body>
<div id = "ID1" ng-app="firstAPP"

First Name: <input type="text"

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

ng-model="lastName">
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('firstAPP',[]);
app.controller('myCtrl1',function($scope)
{
$scope.firstName = "Tom"
$scope.lastName = "Jerry";
});
</script>
</body>
</html>
First Name:
Last Name:
Full Name: Tom Jerry
CONTROLLER METHODS
The example above example demonstrated a controller object with two

properties: (lastName and firstName). A controller can also have methods
(variables as functions).
<!DOCTYPE html>
<html>
></script>
<body>
<div id = "ID2" ng-app="secondAPP"

ng-controller="Ctrl2">
First Name: <input type="text"

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

ng-model="lastName">
<br>
Full Name: {{fullName()}}
</div>
<script>
app.controller('Ctrl2', function($scope)
{
$scope.firstName = "Elon";
$scope.lastName = "Musk";
$scope.fullName = function() {
return $scope.firstName + " " + $scope.
lastName;
};
});
("ID2"),
['secondAPP']);
</script>
</body>
</html>

First Name:
Last Name:
Full Name: Elon Musk
CONTROLLER TO CHANGE MODEL DATA

<!DOCTYPE html>
<html>
ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<body>
<div id ="ID3" ng-app="thirdAPP"

<h1 ng-click="changeName()">
{{firstname}}</h1>
</div>
<script>
var app = angular.module('thirdAPP',[]);
app.controller('Ctrl3', function($scope) {
$scope.firstname = "Steve";
$scope.changeName = function() {
$scope.firstname = "Peter";
}
});
("ID3"), ['thirdAPP']);
</script>
<p>Click on the header to run the

"changeName"function.</p>
<p>This example demonstrates how to use

the controller to change model data.</p>
</body>
</html>
Steve
Click on the header to run the "changeName" function.
This example demonstrates how to use the controller to change model

data.
TRY YOURSELF :
ANGULAR JS SCOPES
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, is available for both the view and the controller.
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 propertyname, like {{bikename}}.
Explantion:

controller.


properties.
USING SCOPES
When you make a controller in AngularJS, you pass the $scope object as
an argument.When adding properties to the $scope object in the controller,
the view (HTML) gets access to these properties.
<!DOCTYPE html>
<html>
></script>
<body>
<div id ="ID1" ng-app="firstAPP"

<h1>{{bikename}}</h1>
</div>
<script>

{
$scope.bikename = "Honda";
});
</script>
<p>The property "bikename" was made in

the controller, and can be referred to
in the view by using the {{ }} brackets.
</p>
</body>
</html>
Honda
The property "bikename" was made in the controller, and can be referred to
KNOW ABOUT SCOPE
It is important to know which scope you are dealing with, at any time.In the
two examples above there is only one scope, so knowing your scope is not
an issue, but for larger applications there can be sections in the HTML
DOM which can only access certain scopes.
 When dealing with the ng-repeat directive, each repetition has

access to the current repetition object.
 Each <li> element has access to the current repetition object, in this
case a string, which is referred to by using x.
<!DOCTYPE html>
<html>
></script>
<body>

<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
<script>
{
$scope.names = ["Mark", "Alexander",
"Leo"];
});
</script>
<p>The variable "x" has a different

value for each repetition, proving that
each repetition has its own scope.
</p>
</body>
</html>
 Mark
 Alexander
 Leo
The variable "x" has a different value for each repetition, proving that each
repetition has its own scope.
TRY YOURSELF :
ANGULAR JS SCOPES
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, is available for both the view and the controller.
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 propertyname, like {{bikename}}.
Explantion:


controller.


properties.
USING SCOPES
When you make a controller in AngularJS, you pass the $scope object as
an argument.When adding properties to the $scope object in the controller,
the view (HTML) gets access to these properties.
<!DOCTYPE html>
<html>
></script>
<body>

<h1>{{bikename}}</h1>
</div>
<script>

{
$scope.bikename = "Honda";
});
</script>
<p>The property "bikename" was made in

the controller, and can be referred to
</p>
</body>
</html>
Honda
The property "bikename" was made in the controller, and can be referred to
KNOW ABOUT SCOPE
It is important to know which scope you are dealing with, at any time.In the
two examples above there is only one scope, so knowing your scope is not
an issue, but for larger applications there can be sections in the HTML
DOM which can only access certain scopes.
 When dealing with the ng-repeat directive, each repetition has

access to the current repetition object.
 Each <li> element has access to the current repetition object, in this
case a string, which is referred to by using x.
<!DOCTYPE html>
<html>
></script>
<body>

<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
<script>
{
$scope.names = ["Mark", "Alexander",
"Leo"];
});
</script>
<p>The variable "x" has a different

value for each repetition, proving that
each repetition has its own scope.
</p>
</body>
</html>
 Mark
 Alexander
 Leo
The variable "x" has a different value for each repetition, proving that each
repetition has its own scope.
TRY YOURSELF :
ANGULAR JS FILTERS
Filters format the value of an expression for display to the user. They can
be used in view templates, controllers or services. AngularJS comes with a
collection of built-in 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.
<!DOCTYPE html>
<html>
></script>
<body>

<p>The uppercase filter format strings
to upper case.</p>
<p>The name is {{ lastName | uppercase }}

</p>
<p>The lowercase filter format strings to

lower case.</p>
<p>The name is {{ lastName | lowercase }}
</p>
</div>
<script>
angular.module('firstAPP',[]).controller
('Ctrl1', function($scope) {
$scope.firstName = "Tom",
$scope.lastName = "Jerry"
});
</script>
</body>
</html>
The uppercase filter format strings to upper case.
The name is JERRY
The lowercase filter format strings to lower case.
The name is jerry
THE filter FILTER
The filter Filter selects a subset of an array and can only be used on arrays,
and it returns an array containing only the matching items.
<!DOCTYPE html>
<html>
></script>
<body>

<ul>
<li ng-repeat="x in names | filter:'e'">
{{ x }}
</li>
</ul>
</div>
<script>
angular.module('secondAPP',[]).
controller('Ctrl2',function($scope) {
$scope.names = [
'Tiger',
'Cheetah',
'BlueWhale',
'Dugong',
'Orca',
'Elephant',
'Bison',
'Bear',
'Deer'
];
});
</script>
<p>This example displays only the names

containing the letter "e".</p>
</body>
</html>
 Tiger
 Cheetah
 BlueWhale
 Elephant
 Bear
 Deer
This example displays only the names containing the letter "e".
FILTER BASED ON USER INPUT
By setting the ng-model directive on an input field, we can use the value of
the input field as an expression in a filter.
<!DOCTYPE html>
<html>
></script>
<body>

<p>Type a letter in the input field:

</p>
<p><input type="text" ng-model="test">

</p>
<ul>
<li ng-repeat="x in names | filter:test">

{{ x }}
</li>
</ul>
</div>
<script>
angular.module('thirdAPP',[]).controller
('Ctrl3', function($scope) {
$scope.names = [
'Lion',
'Cheetah',
'Shark',
'Dugong',
'Orca',
'Elephant',
'Bison',
'Bear',
'Deer'
];
});
</script>
<p>The list will only consists of names

matching the filter.</p>
</body>
</html>
Type a letter in the input field:
 Lion
 Cheetah
 Shark
 Dugong
 Orca
 Elephant
 Bison
 Bear
 Deer
The list will only consists of names matching the filter.

CUSTOM FILTERS
You can make your own filters by registering a new filter factory function
with your module.
<!DOCTYPE html>
<html>
></script>
<body>
<div id ="ID4" ng-app="fourthAPP"

<ul>
<li ng-repeat="x in names">
{{x | myFilter}}
</li>
</ul>
</div>
<script>
var app = angular.module('fourthAPP',[]);

app.filter('myFilter', function() {
return function(x) {
var i, c, txt = "";
for (i = 0; i < x.length; i++) {
c = x[i];
if (i % 2 == 0) {
c = c.toUpperCase();
}
txt += c;
}
return txt;
};
});
{
$scope.names = [
'Lion',
'Cheetah',
'Shark',
'Dugong',
'Orca',
'Elephant',
'Bison',
'Bear',
'Deer'
];
});
("ID4"), ['fourthAPP']);
</script>
<p>Make your own filters.</p>
<p> This filter, called "myFilter", will

uppercase every other character.</p>
</body>
</html>
 LiOn
 ChEeTaH
 ShArK
 DuGoNg
 OrCa
 ElEpHaNt
 BiSoN
 BeAr
 DeEr
Make your own filters.
This filter, called "myFilter", will uppercase every other character.

TRY YOURSELF :
ANGULAR JS SELECT BOXES
AngularJS lets you create dropdown lists based on items in an array or an

object.
CREATING SELECT BOX USING ng-option

<!DOCTYPE html>
<html>
> </script>
<body>

<select ng-model="selectedName"
ng-options="x for x in names">
</select>
</div>
<script>

{
$scope.names = ["Tiger", "Lion",
"Puma"];
});
</script>
<p>This example shows how to fill a

dropdown list using the ng-options
directive.</p>
</body>
</html>
TigerLionPuma
This example shows how to fill a dropdown list using the ng-options
directive.
CREATING SELECT BOX USING ng-repeat
You can also use the ng-repeat directive to make the same dropdown list,
the ng-repeat directive repeats a block of HTML code for each item in an
array, it can be used to create options in a dropdown list, but the ng-options
directive was made especially for filling a dropdown list with options
The advantage of using ng-option is, Dropdowns made with ng-options

allows the selected value to be an object, while dropdowns made from ng-
repeat has to be a string.
<!DOCTYPE html>
<html>
></script>
<body>

ng-controller ="Ctrl2">
<select>
<option ng-repeat="x in names">{{x}}

</option>
</select>
</div>
<script>
var app = angular.module('secondAPP', []);

$scope.names = ["Tiger", "Lion",
"Puma"];
});
</script>
<p>This example shows how to fill a

dropdown list using the ng-repeat
directive.
</p>
</body>
</html>

TigerLionPuma
This example shows how to fill a dropdown list using the ng-repeat
directive.
DATA SOURCE AS AN OBJECT
In the below example, selected value will always be the value in a key-
value pair, the value in a key-value pair can also be an object. The options
in the dropdown list does not have to be the key in a key-value pair, it can
also be the value, or a property of the value object.
<!DOCTYPE html>
<html>
></script>
<body>

<b>Select a car:</b>
<select ng-model="selectedCar"
ng-options="y.brand
for (x, y) in cars">
</select>
<h1>You selected:{{selectedCar.brand}}
</h1>
<h2>Model: {{selectedCar.model}}</h2>
<h3>Color: {{selectedCar.color}}</h3>
<p>The visible text inside the dropdown

list can also be a property of the value
object.</p>
<hr>
<b>Select a car:</b>
<select ng-model="selectedCar1"
ng-options="x for
(x, y) in cars">
</select>
<h1>You selected: {{selectedCar1.brand}}

</h1>
<h2>Model: {{selectedCar1.model}}</h2>
<h3>Color: {{selectedCar1.color}}</h3>
<p>Note that the selected value

represents an object.</p>
</div>
<script>
var app = angular.module('thirdAPP', []);

$scope.cars = {
car01 : {brand : "Tesla", model :"Model S",

color : "red"},
car02 : {brand : "Ford", model :"GT",

color : "blue"},
car03 : {brand : "Volvo", model :"S90",

color : "black"}
}
});
</script>
</body>
</html>
Select a car: TeslaFordVolvo
You selected:
Model:
Color:
The visible text inside the dropdown list can also be a property of the value
object.
Select a car: car01car02car03
You selected:
Model:
Color:
Note that the selected value represents an object.
TRY YOURSELF :
ANGULAR JS EVENTS
AngularJS has its own HTML events directives, 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.
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
MOUSE EVENTS
Mouse events occur when the cursor moves over an element or when a
mouse button is clicked on an element. Mouse events can be added on any
HTML element.
 ng-mouseover
 ng-mouseenter
 ng-mousemove
 ng-mouseleave
 ng-mousedown
 ng-mouseup
 ng-click
Mouse Event Example

<!DOCTYPE html>
<html>
></script>
<body>

<b>Increase the count variable when the

mouse moves over the H1 element:</b>
<h1 ng-mousemove="count = count + 1"

>Mouse Over Me!
</h1>
<h2>{{ count }}</h2>
</div>
<script>
var app = angular.module('firstAPP', []);
$scope.count = 0;
});
</script>
</body>
</html>

Increase the count variable when the mouse moves over the H1
element:
Mouse Over Me!

0
THE ng-click DIRECTIVE
The ng-click directive defines AngularJS code that will be executed when

the element is being clicked.
<!DOCTYPE html>
<html>
></script>
<body>

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

Click Me!
</button>
<p>{{ count }}</p>
</div>
<script>
{
$scope.count = 0;
});
</script>
</body>
</html>

Click Me!
0
TOGGLE
Toggle is used to show a section of HTML code when a button is clicked

and hide when the button is clicked again, like a dropdown menu,this will
make the button behave like a toggle switch.
<!DOCTYPE html>
<html>
> </script>
<body>
<div id = "ID3" ng-app="thirdAPP"

<button ng-click="myFunc()">Click Me!

</button>
<div ng-show="show">
<h1>Animals:</h1>
<div>Tiger</div>
<div>Lion</div>
<div>Cheetah</div>
</div>
</div>
<script>
var app = angular.module('thirdAPP',[]);
{
$scope.show = false;
$scope.myFunc = function() {
$scope.show = !$scope.show;
}
});
</script>
<p>Click the button to show/hide the

menu.</p>
</body>
</html>

Click Me!
Click the button to show/hide the menu.

$event OBJECT
You can pass the $event object as an argument when calling the function.

The $event object contains the browser's event object:
<!DOCTYPE html>
<html>
></script>
<body>
<div id ="ID4" ng-app="fourthAPP"

<h1 ng-mousemove="myFunc($event)">
Mouse Over Me!
</h1>
<p>Coordinates: {{x + ', ' + y}}</p>
</div>
<script>
var app = angular.module('fourthAPP',[]);

{
$scope.myFunc = function(myE) {
$scope.x = myE.clientX;
$scope.y = myE.clientY;
}
});
("ID4"), ['fourthAPP']);
</script>
<p>Mouse over the heading to display the

value of clientX and clientY from the
event object.</p>
</body>
</html>
Mouse Over Me!

Coordinates: ,
Mouse over the heading to display the value of clientX and clientY from the
event object.
TRY YOURSELF :
ANGULARJS 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
angular.lowercase() and angular.uppercase()
The angular.lowercase() is used to convert a string to lowercase and the

angular.uppercase is used to convert a string to uppercase.
<!DOCTYPE html>
<html>
></script>
<body>

<h2>angular.lowercase()</h2>
<p>{{ x1 }}</p>
<p>{{ x2 }}</p>
<h2>angular.uppercase()</h2>
<p>{{ x3 }}</p>
<p>{{ x4 }}</p>
</div>
<script>
{
$scope.x1 ="TOMMY";
$scope.x2 =angular.lowercase($scope.x1);
$scope.x3 ="peter";
$scope.x4 =angular.uppercase($scope.x3);
});
</script>
</body>
</html>

angular.lowercase()
TOMMY
tommy
angular.uppercase()
peter
PETER
angular.isString() and angular.isNumber()
The angular.isString is used to find out if the reference is string or not, if it is

a string it return True. The angular.isNumber is used to find out if the
reference is number or not, if it is a number it returns True.
<!DOCTYPE html>
<html>
></script>
<body>

<h2>angular.isString()</h2>
<p>{{ x1 }}</p>
<p>{{ x2 }}</p>
<h2>angular.isNumber()</h2>
<p>{{ x3 }}</p>
<p>{{ x4 }}</p>
</div>
<script>
{
$scope.x1 ="JOHN";
$scope.x2 =angular.isString($scope.x1);
$scope.x3 =24;
$scope.x4 =angular.isNumber($scope.x3);
});
</script>
</body>
</html>

angular.isString()
JOHN
true
angular.isNumber()
24
true
TRY YOURSELF :
ANGULAR JS ANIMATION
An animation is when the transformation of an HTML element gives you an

illusion of motion. AngularJS provides animated transitions, with help from
CSS.
To make your applications ready for animations, the AngularJS Animate

library must be included.
<script src = "https://ajax.googleapis.com/ajax/libs/angular js/1.6.9/angular-

animate.js"> </script>
Then the ngAnimate module should be refered to the application or if your

application has a name, add ngAnimate as a dependency in your
application module:
<body ng-app="ngAnimate">
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 which add/remove classes are:
 ng-show
 ng-hide
 ng-class
 ng-view
 ng-include
 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
 ng-hide-remove
 ng-hide-add-active
 ng-hide-remove-active
CSS TRANSITIONS
CSS transitions allows you to change CSS property values smoothly, from
one value to another, over a given duration.
<!DOCTYPE html>
<html>
<style>
.one{
transition: all linear 0.5s;
background-color: turquoise;
height: 100px;
}
.ng-hide {
height: 0;
}
</style>
js"></script>
ajax/libs/angularjs/1.6.9/angular-
animate.js"></script>
<body ng-app="firstAPP">
<h1>Hide the DIV: <input type="checkbox"

ng-model="myCheck"></h1>
<div class ="one" id ="ID1"

ng-hide="myCheck">
</div>
<script>
var app=angular.module('firstAPP',
['ngAnimate']);
</script>
</body>
</html>
Hide the DIV:
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.
CSS ANIMATIONS
CSS Animations allows you to change CSS property values smoothly, from
one value to another, over a given duration.
<!DOCTYPE html>
<html>
<style>
@keyframes myChange {
from {
height: 100px;
} to {
height: 0;
}
}
div{
height: 100px;
background-color: lightblue;
}
div.ng-hide {
animation: 0.5s myChange;
}
</style>
js"></script>
/ajax/libs/angularjs/1.6.9/angular-
animate.js"></script>
<body ng-app="ngAnimate">
Hide the DIV: <input type="checkbox"

ng-model="myCheck">
<div ng-hide="myCheck">
</div>
</body>
</html>

Hide the DIV:
When the DIV element gets the .ng-hide class, the myChange animation
will run, which will smoothly change the height from 100px to 0.
TRY YOURSELF :

Angular JS: Angularjs Extends HTML With Ng-Directives

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Angular JS: Angularjs Extends HTML With Ng-Directives

Uploaded by

Copyright:

Available Formats

ANGULAR JS

AngularJS is a JavaScript framework. It is a library written in JavaScript,

AngularJS extends HTML attributes with Directives, and binds data to

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,

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

<p>Input something in the input box </p>

<p>Name: <input type="text"

<!The ng-model directive binds the

Result For Above Example

Input something in the input box

element to the application variable name.

Accordian Example In Angular JS

/* Unicode character for "minus" sign (-)

<p>In this example we have added a "plus"

var acc = document.getElementsByClassName

for (i = 0; i < acc.length; i++) {

Result For Above Example

 AngularJS expressions can be written inside double braces:

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

 AngularJS expressions are much like JavaScript expressions: They

<p>Expression With Directive:{{ 6 + 6 }}

<p> If you remove the ng-app directive,

<p>Expression Without Directive:{{6 + 6}}

Result For Above Example

Expression With Directive: 12

Expression Without Directive: {{ 6 + 6 }}

<div ng-app="" ng-init="quantity=2;

<p>Total Amount: {{ quantity * cost }}

<p> The same example using ng-bind below.

<p>Total Amount: <span ng-bind="quantity

Result For Above Example

The same example using ng-bind below.

ANGULAR JS MODEL & DATA BINDING

ngModel is responsible for:

 Providing validation behavior (i.e. required, number, email, url).

 Keeping the state of the control (valid/invalid, dirty/pristine,

 Registering the control with its parent form.

<div id ="ID1" ng-app="firstApp"

Name: <input ng-model="name">

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

<p>Use the ng-model directive to bind

Result For Above Example

<div id ="ID2" ng-app="secondAPP"

Name: <input ng-model="name">

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

<p>Change the name inside the input

You entered: Tom Jerry

AngularJS controllers control the data of AngularJS applications and they

AngularJS applications are controlled by controllers and the ng-controller

 The AngularJS application is defined by ng-app = " ". The application

 The ng-controller = " " attribute is an AngularJS directive. It defines a

 AngularJS will invoke the controller with a $scope object.

 The controller creates two properties (variables) in the scope .

 The ng-model directives bind the input fields to the controller

ANGULAR JS CONTROLLER EXAMPLE

<div id = "ID1" ng-app="firstAPP"

First Name: <input type="text"

Last Name: <input type="text"

Full Name: {{firstName + " " + lastName}}

Full Name: Tom Jerry

The example above example demonstrated a controller object with two