添加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内部处理了。