Angular搭建一个应用

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

<html lang="en" ng-app>

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

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

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

<body ng-controller="ActivitiesListCtrl"> 
  <h1>Today's activities</h1> 
  <ul> 
   <li ng-repeat="activity in activities"> 
     {{activity.name}} 
   </li> 
  </ul> 
</body> 
</html>

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

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

function ActivitiesListCtrl($scope) { 
  $scope.activities = [ 
    { "name": "Wake up" }, 
    { "name": "Brush teeth" }, 
    { "name": "Shower" }, 
    { "name": "Have breakfast" }, 
    { "name": "Go to work" }, 
    { "name": "Write a Nettuts article" }, 
    { "name": "Go to the gym" }, 
    { "name": "Meet friends" }, 
    { "name": "Go to bed" } 
  ]; 
 }

 

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

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

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

 

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

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

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

<h3>Sort:</h3> 
<select> 
   <option value="name">Alphabetically</option> 
 </select>

添加directive:

<select ng-model="sortModel">

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

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

 

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

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

 

posted @ 2016-02-24 16:23  燕萧云  阅读(155)  评论(0)    收藏  举报