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."}
];
}
?
在线示例?
