100% found this document useful (1 vote)
347 viewsAngularJS-unit 2
In this unit we covers what is mean by AngularJS Directive and kinds of Directives use in AngularJS application, how to use expression in AngularJS and Data binding Concepts.
Uploaded by
Tulshiram KambleCopyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
100% found this document useful (1 vote)
347 viewsAngularJS-unit 2
In this unit we covers what is mean by AngularJS Directive and kinds of Directives use in AngularJS application, how to use expression in AngularJS and Data binding Concepts.
Uploaded by
Tulshiram KambleCopyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
/ 41
AngularJS Directives
and Expressions
AngularJS Directives
• AngularJS facilitates you to extend HTML with new attributes. These
attributes are called directives. There is a set of built-in directive in
AngularJS which offers functionality to your applications. you can
create custom directives for your application.
• Directives are markers on a DOM element that tell AngularJS to
attach a specified behavior to that DOM element or even transform
the DOM element and its children.
• Most of the directives in AngularJS are starting with ng- where ng
stands for Angular.
Directive Description
ng-app Auto bootstrap AngularJS application.
ng-init Initializes AngularJS variables
ng-model Binds HTML control's value to a property on the $scope object.
ng-controller Attaches the controller of MVC to the view.
ng-bind Replaces the value of HTML control with the value of specified AngularJS expression.
ng-repeat Repeats HTML template once per each item in the specified collection.
ng-show Display HTML element based on the value of the specified expression.
ng-readonly Makes HTML element read-only based on the value of the specified expression.
ng-disabled Sets the disable attribute on the HTML element if specified expression evaluates to true.
ng-if Removes or recreates HTML element based on an expression.
ng-click Specifies custom behavior when an element is clicked.
ng-app attributes
• The ng-app directive is a starting point of AngularJS Application.
• It initializes the AngularJS framework automatically. AngularJS
framework will first check for ng-app directive in a HTML document
after the entire document is loaded.
• Typically ng-app directives should be placed at the root of an HTML
document e.g. <html> or <body> tag, so that it can control the entire
DOM hierarchy.
• However, you can place it in any DOM element.
Example:
ng-init
• The ng-init Directive is used to initialize AngularJS Application data.
• The ng-init directive defines initial values and variables for an
AngularJS application.
• Syntax:
<element ng-init = "expression"></element>
Example
<html>
<head> <script src="./angular.min.js"> </script></head>
<body>
<div ng-app=“myApp” ng-init="objects=” {Company: 'XYZ',
Course: ‘AngularJS’} “ >
<p>
Learn {{objects. Course}}
From {{objects. Company}}
</p>
</div>
</body>
</html>
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.
• 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 ng-Model directive.
• Syntax:
<element ng-model=“ "> </element>
Example
<html>
<head>
<script src = "angular.min.js"> </script>
</head>
<body>
<div ng-app = “myApp">
<p>Enter your Name: <input type = "text" ng-model ="name"></p>
<p>Hello <span ng-bind = "name"></span>!</p>
</div>
</body>
</html>
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, keypress etc. to perform certain
actions.
• Syntax:
<element ng-controller="expression"> Contents... </element>
• Parameter value:
expression: It refers to the name of the controller.
Example
<html>
<head> <script src="angular.min.js"></script></head>
<body ng-app="app" >
<h2>ng-controller Directive</h2> <br>
<div ng-controller="demo">
Name:<input type="text" ng-model="name"> <br><br>
You entered: <b> <span>{{name}}</span> </b>
</div>
<script>
var app = angular.module('app', []);
app.controller('demo', function($scope) { $scope.name = "Controller start!!"; });
</script>
</body>
</html>
ng-bind
• The AngularJS ng-bind directive replaces the content of an HTML
element(HTML controls) with the value of a given variable, or
expression.
• If you change the value of the given variable or expression, AngularJS
changes the content of the specified HTML element as well as.
• Syntax:
<element ng-bind="expression"></element>
Example
<html> <head> </head>
<body>
<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 = "angular.min.js"> </script>
</body>
</html>
ng-repeat
• 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.
• ng-repeat is similar to a loop that we have in C, C++ or other languages but
technically it instantiates a template(normally a set of HTML structures) for
each element in a collection that we are accessing.
• Syntax :
<div ng-repeat="keyName in MyObjectName "> {{keyName}}</div>
• Here “MyObjectName” is a collection that can be an object or an array and
you can access each value inside it using a “keyName”.
index.html
<html ng-app="myApp">
<head>
<script type="text/javascript" src="angular.js"></script> Angular Framework file
<script type="text/javascript" src="app.js"></script> External File (Module)
</head>
<body ng-controller="MainCtrl">
<h2>Here is the name list</h2>
<ul>
<li ng-repeat="name in names"> {{name}} </li>
</ul>
</body> </html>
Example
app.js file
var app = angular.module('myApp',[]);
app.controller('MainCtrl', function($scope){
$scope.names = ['Adam','Steve','George','James','Armin'];
console.log($scope.names);
});
ng-show
• A Directive in AngluarJS is used to show or hide the specified HTML
element.
• If the given expression in the ng-show attribute is true then the HTML
element will display otherwise it hides the HTML element.
• It is supported by all HTML elements.
• Syntax:
• <element ng-show="expression"> Contents... </element>
Example
Index.html
<html><head>
<script src="angular.min.js"> </script>
<script src=“app.js"> </script>
</head>
<body>
<div ng-app="app" ng-controller="ctrl">
<h2>ng-show Directive</h2>
<input id="chshow" type="checkbox" ng-model="show" />
<label for="chshow"> Show Paragraph </label>
<p ng-show="show">Show this paragraph using ng-show </p>
</div>
</body>
</html>
app.js
var myapp = angular.module("app", []);
myapp.controller("ctrl", function($scope) {
$scope.show = false;
});
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
<html><head> <script src="angular.min.js"> </script> </head>
<body ng-app=“ ”>
<h2>ng-readonly Directive</h2>
<div>
<label>Check to make month readonly:
<input type="checkbox" ng-model="open">
</label><br>
Input Month:<input ng-readonly="open" type="month" ng-model="month">
</div>
</body>
</html>
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.
• Syntax:
• <element ng-disabled="expression">Contents... </element>
Example
Index.html
<html ng-app="myApp">
<head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src=“app.js”></script>
</head>
<body ng-controller="myController">
<form>
Username:<input type="text" id="username" ng-model="user.username" required>
Password:<input type="password" id="password" ng-model="user.password" required>
<button ng-disabled="!user.username || !user.password">Submit</button>
</form>
</body>
</html>
App.js
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.user = {
username: '',
password: ''
};
});
ng-if
• The ng-if Directive in AngularJS is used to remove or recreate a
portion of HTML element based on an expression.
• If the expression inside it is false then the element is completely
removed from the DOM.
• if the expression is true then the element will be added to the DOM.
• Syntax:
<element ng-if="expression"></element>
Example
<html ng-app="myApp">
<head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script></head>
<body ng-controller="MyController">
<h1 ng-if="showTitle">Welcome to My Angular App!</h1>
<button ng-click="showTitle = !showTitle">Toggle Title</button>
<script>
var app = angular.module('myApp', []);
app.controller('MyController', function ($scope) {
$scope.showTitle = true;
});
</script>
</body>
</html>
ng-click
• The ng-click Directive in AngluarJS is used to apply custom behavior
when an element is clicked. It can be used to show/hide some
element or it can pop up an alert when the button is clicked.
• Syntax:
<element ng-click="expression">
Contents...
</element>
Parameter Value:
• expression: It specifies when the particular element is clicked then
the specific expression will be evaluated.
• Supported tag: It is supported by all the elements in HTML.
Expression and Data Binding
Expression:
• In AngularJS application data & HTML can be bind with help of
expression
• Expression written inside double braces such as {{expression}}.
• It similar as javascript expression.
• They contain literals, operators & variables.
• It is made to work with primitive types such as string and numbers.
• AngularJS expression contain variables declared through ng-init
directive. The ng-init directive is used to declare AngularJS
application variables of any data type.
Example
<html>
<head> <script src="angular.min.js"></script>
</head>
<body>
<h1>Expression Demo:</h1>
<div ng-app=“”>
10+10={{10+10}}<br>
10-10={{10-10}}<br>
10*10={{10*10}}<br>
10/10={{10/10}}<br>
</div>
</body></html>
Expression when using number
Example
<html>
<head><script src="angular.min.js"> </script>
</head>
<body>
<h1>Calculate Simple interest</h1>
<div >
Enter Value for P<input type=”number” ng-model=”p”> </br>
Enter Value for R<input type=”number” ng-model=”r”> </br>
Enter Value for T<input type=”number” ng-model=”t”> </br>
<span>
<h1> This is simple interest</h1></b>
<p> {{p*r*t/100}} </p>
</span>
</div>
</body>
</html>
Expression when using Strings
<html>
<head> <script src="angular.min.js"> </script>
</head>
<body>
<div>
<p>First Name:<input type=”text” ng-model=”f_name”</p></br>
<p>Last Name:<input type=”text” ng-model=”l_name”</p></br>
<select ng-model=”course”>
<option>BBA(CA)</option>
<option>BBA(CA)</option>
</select>
</p> Detail you enter:{{f_name + l_name+ course}}</p>
</div>
</body>
</html>
Expression when using Object
Syntax
<element> {{objecctname.variablename}}</element>
Example
<html ng-app>
<head> <script src="angular.min.js"> </script>
</head>
<body>
<div ng-init=”player={name:’sachin’, game:’cricket’}”></div>
<span>{{ player.name}}</span>
<span>{{ player.game }}</span>
</body>
</html>
Expression when using Array
Syntax
<element> {{nameofarray[indexvalue]}}</element>
Example
<html ng-app=“”>
<head><script src="angular.min.js"> </script></head>
<body>
<div ng-init=”players=[‘ARVINDA’,’DHONI’,’ANDY FLOWER’,’JACK KALLIS’]”></div>
<h1>
MODEL1:{{players[0]}}<br>
MODEL1:{{players[1]}}<br>
MODEL1:{{players[2]}}<br>
</h1>
</body>
</html>
Data Binding
• The Data Binding refers to the synchronization of data between the
model and view. Synchronizing data is imperative (vital) for keeping the
data being displayed to the user and the data being stored updated at
all times.
• In AngularJS, Data Binding is an important concept as it acts as a bridge
between the view and the logic of the AngularJS app.
• Data Binding in AngularJS is achieved by using Directives.
• There are 2 major components of Data Binding in AngularJS:
• Model: It is responsible for maintaining data in the application.
• View: It is the HTML container where the app is displayed to the user.
AngularJS provides two types of Data Binding:
• One-way data binding
• Two-way data binding
One-way data binding
• One Way Data Binding the flow of data is in one direction only i.e.
from model to view.
• A value is taken from the data model, inserted in an HTML element,
and displayed to the user.
• But there is no way to update the model according to the input given
by the user which means that the data can’t flow from the view to
the model.
<html><head><script src="angular.min.js"></script></head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<h1>{{title1}}</h1> <h2>{{title2}}</h2> <p>{{description}}</p>
</div>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope) {
$scope.title1 = “One Way Data Binding ";
$scope.title2 = "AngularJs Data Binding";
$scope.description ="Data Binding refers to the synchronization of data between the
model and view";
});
</script></body>
</html>
Two Way Data Binding
• Two Way Data Binding the flow of data is bidirectional i.e the data
can flow from the model to the view as well as from the view to the
model.
• In simple words, we can say that when the data in the model changes,
the changes are reflected in the view and when the data in the view
changes the model is also updated. The view and model are updated
at all times.
• Two-way data binding is achieved by using the ng-model directive.
The ng-model directive transfers data from the controller to the view
and vice versa.
<html>
<script src="angular.min.js"></script>
<body>
<div ng-app="" ng-init=“ firstName='Ajeet’ ">
<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>
</body> </html>
