angularjs

添加ng-app directive到<html>标签，这样Angular知道应该运行：

  1. <html lang="en" ng-app> 

添加Angular<script>标签到<head>标签里：

  1. <head> 
  2. ...meta and stylesheet tags... 
  3.  <script src="lib/angular/angular.js"></script> 

添加正常的HTML标签。AngularJS directive可以在HTML属性中被访问，而表单式将使用两个大括号来标示：

  1. <body ng-controller="ActivitiesListCtrl"> 
  2.   <h1>Today's activities</h1> 
  3.   <ul> 
  4.    <li ng-repeat="activity in activities"> 
  5.      {{activity.name}} 
  6.    </li> 
  7.   </ul> 
  8. </body> 
  9. </html> 

ng-controller directive设置了一个名字空间，这里我们可以添加angular的相关javascript来处理数据和表达式。ng-repeat是一个angular的重复对象，可以用来创建一系列的对象元素。

当你想从Anguar中获取数据，你使用一个对应名字的controller方法，如下：

  1. function ActivitiesListCtrl($scope) { 
  2.   $scope.activities = [ 
  3.     { "name": "Wake up" }, 
  4.     { "name": "Brush teeth" }, 
  5.     { "name": "Shower" }, 
  6.     { "name": "Have breakfast" }, 
  7.     { "name": "Go to work" }, 
  8.     { "name": "Write a Nettuts article" }, 
  9.     { "name": "Go to the gym" }, 
  10.     { "name": "Meet friends" }, 
  11.     { "name": "Go to bed" } 
  12.   ]; 
  13.  } 

这里我们创建了一个方法，名字和前面的ng-controller directive一样，这样我们页面可以找到对应的Angular方法来执行。我们传递了$(scope)对象来访问模板中的activities列表。提供了activities对应的name，我们在页面中使用"{{expression}}"表达式展现出来。

或者你保存数据在服务器上，我们同样可以使用AJAX获取数据：

  1. function ActivitiesListCtrl($scope) { 
  2.   $http.get('activities/list.json').success(function (data) { 
  3.     $scope.activities = data; 
  4.   } 
  5. } 

这里我们简单的使用指定的HTTP GET方法替换了本地的javascript数据。传递了文件名字来获取相关数据。这和jQuery的方式非常类似。

以上我们使用success方法确保数据返回，并且将数据绑定到了$scope上。

静态的列表显示的很好，但是这里我们希望能够根据用户选择自动排序。这里我们添加一个简单的下拉菜单：

  1. <h3>Sort:</h3> 
  2. <select> 
  3.    <option value="name">Alphabetically</option> 
  4.  </select> 

添加directive:

  1. <select ng-model="sortModel"> 

最后，我们修改<li>标签来识别sortModel：

  1. <li ng-repeat="activity in activities | orderBy: sortModel"> 

关键是添加在ng-repeat里的过滤器。orderBy过滤器帮助我们通过选择的内容来过滤内容。

注意我们代码中没有监听用户的互动事件。没有使用callback或者事件处理。所有的这些都被Angular内部处理了。

posted @ 2015-08-02 21:45  水星上的鱼  阅读(166)  评论(0)  编辑  收藏  举报