先看一下模型和控制器:
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的表达式)。