AngularJS Directives

Directives are one of the most powerful of AngularJS. They allow us to extend HTML to answer the needs of web applications. Directives could specify how your page should be sructured for the data available a given scope.

First let’s have a look at how directives are working. 
AngularJS has several directives which could build our basic application. The first directive “ngRepeat” is used mostly. It create a new set of elements in the dom for each element in a collection.

Example:

div>
    div data-ng-repeat="user in users">
        h3>{{user.name}}h3>
        p>{{user.description}}p>
    div>
div>

    $scope.users = [
        {
            name: ‘Tyrion‘,
            description: ‘yongest son of lord Tywin‘,
            gender: ‘male‘,
            house: ‘Lannister‘
        },
        {
            name: ‘Daenerys‘,
            description: ‘Only daughter of Aerys II‘,
            gender: ‘female‘,
            house: ‘Targaryen‘
        },
        {
            name: ‘Arya‘,
            description: ‘Younger daughter of Eddard‘,
            gender: ‘female‘,
            house: ‘Stark‘
        },
        {
            name: ‘Jon‘,
            description: ‘Bastard Son of lord Eddard‘,
            gender: ‘male‘,
            house: ‘Stark‘
        }
    ];
}]);

The actual effect of display

Tyrion

yongest son of lord
Tywin Daenerys 
Only daughter of Aerys II

Arya
Younger daughter of Eddard
Jon Bastard
Son of lord Eddard

In this example, The result exactly what we were expecting, a new div has been created for each of my entity with their name as title and threir description in a paragraph.

Note: 
For those who are wondering why I have prefixed “ng-repeat” by “data-“, Please have a look here

Angular determine if an element should be displayed or not with the directive “ngShow“. This directive used an expression which returns a boolean to determine if the element should be displayed or not.

Example:

div>
  div data-ng-repeat="user in users" data-ng-show="user.gender == ‘female‘">
    h3>{{user.name}}h3>
    p>{{user.description}}p>
  div>
div>

The actual effect of display

Daenerys
Only daughter of Aerys II

Arya
Younger daughter of Eddard

AS we can see in the result, only females are displayed. If you inspect the dom, we would see that the other elements have been computed but their are just hidden(display = none).

AngularJS also contains more complex directive like “ngSwitch“.

For example:

div ng-controller="UserCtrl">
  div data-ng-repeat="user in users" 
       data-ng-show="user.gender == ‘female‘"
       data-ng-switch="user.house">
      h3>{{user.name}}h3>
      p>{{user.description}}p>
      Sigil:
      img src="images/targaryen.png" data-ng-switch-when="Targaryen">
      img src="images/stark.png" data-ng-switch-when="Stark">
      img src="images/lannister.png" data-ng-switch-when="Lannister">
  div>
div>

Using these directives, we have ability to define the basic structure of our web application very easily. 
In fact, There are many Directives in AngularJS. I intruducted only a little. HERE list the integrated directives.

You can download the source code of examples. 
Example code

AngularJS tutorial

Written By smaltdd@gmail.com 
05/15/2014