pTutorial

New way to learn Programming

AngularJS directives

AngularJS directives

AngularJS directives are basically used to extend the HTML attributes called Directives. They starts with prefix ng-. We will discuss following directives-

The ng-app directive

The ng-app directive is used to initializes an AngularJS application. ng-app is the root element of the Angular application. It is automatically initialize when the application is loaded.

Syntax

<div ng-app = "">
   ...
</div>

The ng-init directive

The ng-init directive is used to initializes application data or value or you can say put the value to the variable.

Syntax

<div ng-app="" ng-init="Name='Juhi'"></div>

Example

<html>
<script src="http://ajax.googleapis.com/ajax/libs/
angularjs/1.3.14/angular.min.js"></script>
<body>

<div ng-app="" ng-init="Name='Juhi'">
<p>Type your last Name :</p>
<p>Name: <input type="text" ng-model="Name"></p>
<p>Hello {{ Name }}</p>

</div>

</body>
</html>


ng-model directive

The ng-model directive is used binds the value of HTML controls (like input) to application data.

Syntax

<div ng-app = "">
   ...
   <p>Type Name: <input type = "text" ng-model = "Name"></p>

</div>

ng-repeat directive

The ng-repeat directive is used to iterate the html elements for each item in a collection. In following example, we've iterated over array of cities.

Syntax

<div ng-app="" ng-init="cities=['Delhi','Noida','Gurgaon']">
  <ul>
    <li ng-repeat="city in cities">
      {{ city }}
    </li>
  </ul>
</div>

ng-repeat Example

<html>
<script src="http://ajax.googleapis.com/ajax/
libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="" ng-init="cities=['Delhi','Noida','Gurgaon']">
  <ul>
    <li ng-repeat="city in cities">
      {{ city }}
    </li>
  </ul>
</div>
</body>
</html>

See Also


QUOTES OF THE DAY

Beauty is truth, Truth beauty- That is all

LIKE ON FACEBOOK

+1 ON GOOGLE

SHARE ON TWITTER