Title
Angular JS Directive
Introduction
AJS directives extend HTML attributes with the page ng-
- Then ng-app directive initializes an Angular JS application. It also tells AJS that <div> is owner of AJS application.
- The ng-init directive initializes application data.
- The ng-model directive binds the value of HTML controls (input, select, text area) to application data.
Example:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="mianAngularJS/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="firstName='Paras'">
<p>
<table>
<tr>
<th>Name:</th>
<td>
<input type="text" ng-model="firstName" />
</td>
</tr>
</table>
<br />
<p>
You wrote: {{firstName}}
</p>
</div>
</body>
</html>
OUTPUT
Data Binding:
The {{firstName}} expression in the example above, is an Angular JS data binding expression. Data binding in AJS synchronizes Angular JS expression with Angular JS data.
{{firstName}} is synchronized with ng-model=”firstName”.
In below example two text fields are synchronized with two ng-model directive.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Angular JS Directives</title>
<script src="mianAngularJS/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="quantity=1; price=5">
<p>
<table>
<tr>
<th>Quantity:</th>
<td>
<input type="number" min="0" ng-model="quantity" />
</td>
</tr>
<tr>
<th>Cost:</th>
<td>
<input type="number" min="0" ng-model="price" />
</td>
</tr>
<tr>
<th>Total Price:</th>
<td>
{{quantity*price}}
</td>
</tr>
</table>
</p>
</div>
</body>
</html>
OUTPUT
Repeating HTML Elements:
The ng-repeat directive repeats an HTML element.
Example:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Angular JS Directives</title>
<script src="mianAngularJS/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="names=['Paras', 'Hem', 'Karan']">
<ul>
<li ng-repeat="x in names">
{{x}}
</li>
</ul>
</div>
</body>
</html>
OUTPUT
The ng-repeat directive used on an array of objects.
<div ng-app="" ng-init="names=[
{name: 'Paras', country: 'India'},
{name: 'Hem', country: 'USA'},
{name: 'Karan', country: 'Canada'}]">
<ul>
<li ng-repeat="x in names">
{{x.name + ' , ' + x.country}}
</li>
</ul>
</div>
OUTPUT
Note: Angular JS is perfect for database CRUD (Crate, Read, Update, and Delete) applications. Just imagine if these objects were records from a database.
The ng-app directive
- The ng-app directive defines the root element of an Angular JS application.
- The ng-app directive will auto-bootstrap (automatically initialize) the application when a web page is loaded.
- Later you will learn how ng-app can have a value (like ng-app=”myModule”), to connect code modules.
The ng-init directive
- The ng-init directive defines initial values for an Angular JS application.
- Normally, you will not use ng-init, you will use controllers or module instead.
- You will learn more about controllers and modules later.
The ng-model directive
- The ng-model directive binds the value of HTML controls (input, select, and text area) to application data.
The ng-model directive can also
- Provide type validation for application (number, email, and required)
- Provide status for application data (invalid, dirty, touched error)
- Provide status for application data (invalid, dirty, touched error)
- Provide CSS classes for HTML elements
- Bind HTML elements to HTML forms
The ng-repeat directive
The ng-repeat directive clones HMTL element once for each item in a collection (in an array).
