angularjs 1.3.x入门教程 3 Angular Templates
这一节稍微复杂 angularjs 是用MVC 模式，git bush 到angular-phonecat文件夹，输入以下代码，将这一节的示例代码git出来
git checkout -f step-2打开
app/index.html:
可以看到如下代码
<html ng-app="phonecatApp"> <head> ... <script src="bower_components/angular/angular.js"></script> <script src="js/controllers.js"></script> </head> <body ng-controller="PhoneListCtrl"> <ul> <li ng-repeat="phone in phones"> <span>{{phone.name}}</span> <p>{{phone.snippet}}</p> </li> </ul> </body> </html>在 <li> 元素中的ng-repeat 属性是一个angular 循环指令，phones 代表一个list或者一个array，phone 代表其中的一个item.
{{phone.name}} 是一个表达式，这里相当于phone所代表的item中的name属性的值
我们在body 元素中添加了一个新的指令ng-congroller，并将其关联到了PhoneListCtrl id上，表示一个id为PhoneListCtrl 的controller。
{{phone.name}}表达式所使用的module便是在这个controller中构建的。
注意，我用用ng-app="phonecatApp"指定了一个angular module，phonecatApp是这个module的name，并且 在这个module中有一个名为PhoneListCtrl 的controller
数据模型(model)在控制器PhoneListCtrl controller.中进行实例化
打开app/controllers.js,可以看到初始化代码
var phonecatApp = angular.module('phonecatApp', []); // 创建module //初始化数据模型 phonecatApp.controller('PhoneListCtrl', function ($scope) { $scope.phones = [ {'name': 'Nexus S', 'snippet': 'Fast just got faster with Nexus S.'}, {'name': 'Motorola XOOM™ with Wi-Fi', 'snippet': 'The Next, Next Generation tablet.'}, {'name': 'MOTOROLA XOOM™', 'snippet': 'The Next, Next Generation tablet.'} ]; });scope讲解
在html 元素中的ng-app 指令定义了一个module ，拥有root作用域，controller 继承了module的作用域，并拥有自己的子作用域，并且在自己的作用域中提供上下文。表达式在controller中，可以直接使用controller作用域中的变量。