AngularJS学习（三）模板
JSP也算个模板吧，不过是服务端的。
?
<!DOCTYPE html><html ng-app><!-- 必须 --> <title>AngularJS学习（三）模板</title> <meta charset="utf-8"> <!-- 引入angularJS --> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script> <script src="03-1.js"></script> <!-- ng-controller指令指定了一个控制器,见03-1.js中的定义,这个控制器的作用范围(域)即在这个div内 --> <div ng-controller="PhoneListCtrl"> <!-- 这里phones定义在PhoneListCtrl内,即$scope.phones --> <p>手机总数:{{ phones.length }}</p> <ul> <!-- ng-repeat指令 用于循环 --> <li ng-repeat="phone in phones"> {{ $index + 1 }}<!-- $index 用于获取循环的当前索引 --> {{ phone.name }} <p>{{ phone.snippet }}</p> </li> </ul> <hr> <!-- ng-init指令 用于初始化一个值 --> <div ng-init="friends = {'adam':10, 'amalie':12}"> <p>对象:{{ friends }}</p> <ul> <!-- ng-repeat指令 另一种循环方式 --> <ol ng-repeat="(key,val) in friends"> {{ '第' + ($index + 1) + '属性为:' + key + ',它的值是:' + val}}<!-- $index 这种方式下依旧可用 --> </ol> </ul> <div> </div></html>?
03-1.js:
var 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."} ];}?
在线示例?