AngularJS tutorial - Lesson 2

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>

<script>
angularJSApp.controller(‘UserCtrl‘, [‘$scope‘, function($scope) {
    $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‘
        }
    ];
}]);
</srcipt>
 

 

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 [email protected] 
05/15/2014

AngularJS tutorial - Lesson 2,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。