AngularJS Directive Application

AngularJS directive

AngularJS extends HTML through new attributes called directives .

AngularJS directive

The AngularJS directive is an extended HTML attribute with the prefix ng-.

The ng-app instruction Initializes an AngularJS application.

The ng-init instruction initializes the application data.

The ng-model directive binds the element value (such as the value of the input field) to the application.

<DivNg-app=""Ng-init= "Firstname= ' John '"><P> In the input box, try to enter:</p> <p<input Span style= "color: #ff0000;" >type= "text"  Ng-model></p > <p> you entered: {{firstName}}</p></div>  

The ng-app directive tells the angularjs,<div> element to be the "owner" of the AngularJS application .

Note: A Web page can contain multiple AngularJS applications that run in different elements.

Data binding

The {{firstName}} expression in the above instance is an AngularJS data-binding expression.

Data binding in AngularJS, AngularJS expressions and AngularJS data are synchronized.

{{FirstName}} is synchronized by ng-model= "FirstName" .

In the next instance, two text fields are synchronized by two Ng-model instructions:

<DivNg-app=""Ng-init= "Quantity=1;price=5"><H2> Price Calculator</H2>Number:<InputType= "Number"Ng-model= "Quantity"> Price: <input type= "number"  Ng-model= "Price" >p><b> Total Price: </b> {{ Quantity * Price}}</p ></div>                 

Note: Using ng-init is not very common. You'll learn a better way to initialize your data in the controller chapter.

Repeating HTML elements

The ng-repeat instruction repeats an HTML element:

<DivNg-app=""Ng-init= "names=[' Jani ', ' hege ', ' Kai ']"><p> uses ng-repeat to loop an array </p> <ul> <li ng-repeat= "X in Names" > {{x}} </li> </ul><div>  

The ng-repeat directive is used on an array of objects:

<DivNg-app=""Ng-init= "Names=[{name: ' Jani ', Country: ' Norway '},{name: ' Hege ', Country: ' Sweden '},{name: ' Kai ', Country: ' Denmark '}]"><p</p><ul> <li ng-repeat = "X in Names" > { X.name + ', ' + X.country}} </li></ul>< Span style= "color: #0000ff;" ></div>       

Note: AngularJS perfectly supports the database CRUD (add create, read, update, delete) applications. Think of the objects in the instance as records in the database.

NG-APP directive

The ng-app directive defines the root element of the AngularJS application.

The ng-app instruction automatically boots (automatically initializes) the application when the page is loaded.

Later you will learn how Ng-app connects to the code module with a value (such as ng-app= "MyModule").

NG-INIT directive

The ng-init directive defines the initial value for the AngularJS application.

Typically, ng-init are not used. You will use a controller or module to replace it.

You'll learn more about controllers and modules later.

Ng-model directive

The ng-model directive binds HTML elements to application data.

The ng-model directive can also:

• Provides type validation (number, email, required) for application data.
• Provides state (invalid, dirty, touched, error) for application data.
• Provides a CSS class for HTML elements.
• Binds HTML elements to an HTML form.

ng-repeat directive

The ng-repeat instruction clones an HTML element once for each item in the collection (in the array).

AngularJS Directive Application