<!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>