码迷,mamicode.com
首页 > Web开发 > 详细

AngularJS tutorial - Lesson 2

时间:2014-05-17 15:26:40      阅读:436      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   class   code   c   

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:

bubuko.com,布布扣
<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>
 
bubuko.com,布布扣

 

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:

bubuko.com,布布扣
<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>
bubuko.com,布布扣

 

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

AngularJS tutorial - Lesson 2,布布扣,bubuko.com

AngularJS tutorial - Lesson 2

标签:des   style   blog   class   code   c   

原文地址:http://www.cnblogs.com/smaltdd/p/3730840.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!