<!doctype html> <!-- 标记ng-app告诉AngularJS处理整个HTML页并引导应用 --> <html ng-app> <head> <meta charset="UTF-8"> <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> <script src="js/controllers.js"></script> <!-- 当绑定两个花括号在title元素上可以实现我们的目标，但是你或许发现了，页面正加载的时候它们已经显示给用户看了。一个更好的解决方案是使用ngBind或者ngBindTemplate指令，它们在页面加载时对用户是不可见的 --> <title ng-bind-template="Google Phone Gallery: {{'ha ha'}}">Google Phone Gallery</title> </head> <body ng-controller="PhoneListCtrl"> <!-- 双向绑定 ng-model="yourname" --> Your name: <input type="text" ng-model="yourname" placeholder="World"> <hr> Hello {{yourname || 'World'}}! <hr> <!-- 从控制器取出数据，迭代显示 --> <!-- PhoneListCtrl控制器里面的方法 --> Search: <input ng-model="query"> <!-- 这里的 orderProp会取出控制器里面的默认 orderProp="age" --> Sort by: <select ng-model="orderProp"> <option value="name">name order</option> <option value="age">age order</option> </select> <ul> <!-- 控制器中 PhoneListCtrl方法定义的变量 phones迭代 ng-repeat迭代元素--> <!-- filter函数使用query的值来创建一个只包含匹配query记录的新数组 --> <!-- orderBy排序绑定到上面的 orderProp元素 --> <li ng-repeat="phone in phones | filter:query | orderBy:orderProp"> {{phone.name}} <p>{{phone.snippet}}</p> </li> <hr> <!-- 下面是一些联系 --> <p>Total number of phones: {{phones.length}}</p> </ul> <hr> <div ng-controller="HelloWordCtrl"> 测试控制器: {{hello}} </div> <hr> <table> <tr><th>row number</th></tr> <tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]"><td>{{i}}</td></tr> </table> </body> </html>