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).