Holla Tech - Learn
AngularJS: Directives
 

Directives are similar to HTML attributes and allow a specified behavior to be attached to the DOM elements.

The ng-app directive initializes an AngularJS application.
The ng-model directive binds an HTML element to a property.
The ng-init directive initializes application data.

For example: 

<div ng-app ng-init=“celsius=0;diff=32”>
  <p>Celsius: <input type=“text” ng-model=“celsius”></p>
  <p>Fahrenheit: {{ celsius*1.8+diff }}</p>
</div> 

 

The code above creates a simple Celsius to Fahrenheit converter. We have declared two properties using the ng-init directive. We have also used ng-model to bind the textbox with the celsius property. The expression calculates the corresponding Fahrenheit value in the paragraph element.

Another useful directive is ng-repeat. It repeats an HTML template for each item in the specified collection.

For example:

<div ng-app ng-init=“students=[‘Danny’,’Blake’,’Bob’]”>
  <ol>
    <li ng-repeat=“name in students”>
    {{name}}
    </li>
  </ol>
</div>

 

We created a list item for each item in the students collection.

NOTE!
You can use a directive multiple times.

BACK NEXT

CLICK ON THE BUTTON BELOW TO RETURN TO THE AngularJS MAIN COURSE PAGE. 

AngularJS MAIN COURSE PAGE

 


© License: All Rights Reserved 


CONTACT HOLLA TECH – LEARN SUPPORT