先看一下模型和控制器:
controller.js:
function PhoneListCtrl($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."}
];
}
在controllers.js中有控制器PhoneListCtrl,控制器中初始化了一组数据模型。控制器的作用可以使模型和视图之间数据连接起来。
下面看一下模式如何引导视图的变化:
index.html
<body ng-controller="PhoneListCtrl">
<ul>
<li ng-repeat="phone in phones">
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>
</body>
ng-controller定义了控制器(PhoneListCtrl)的作用域,只有在作用域下才能执行控制器相关指令。
通过ng-repeat可以实现模型数据的遍历,双花括号可以实现数据的取值(类似js的表达式)。