JSP也算个模板吧，不过是服务端的。

 

Html代码 AngularJS学习（三）模板 _学习 AngularJS学习（三）模板 _学习_02
  1. <!DOCTYPE html>
  2. <html ng-app><!-- 必须 -->
  3. <title>AngularJS学习（三）模板</title>
  4. <meta charset="utf-8">
  5. <!-- 引入angularJS -->
  6. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
  7. <script src="03-1.js"></script>
  8. <!-- ng-controller指令指定了一个控制器,见03-1.js中的定义,这个控制器的作用范围(域)即在这个div内 -->
  9. <div ng-controller="PhoneListCtrl">
  10. <!-- 这里phones定义在PhoneListCtrl内,即$scope.phones -->
  11. <p>手机总数:` phones`.`length `</p>
  12. <ul>
  13. <!-- ng-repeat指令 用于循环 -->
  14. <li ng-repeat="phone in phones">
  15. {{ $index + 1 }}<!-- $index 用于获取循环的当前索引 -->
  16. ` phone`.`name `
  17. <p>` phone`.`snippet `</p>
  18. </li>
  19. </ul>
  20. <hr>
  21. <!-- ng-init指令 用于初始化一个值 -->
  22. <div ng-init="friends = {'adam':10, 'amalie':12}">
  23. <p>对象:` friends `</p>
  24. <ul>
  25. <!-- ng-repeat指令 另一种循环方式 -->
  26. <ol ng-repeat="(key,val) in friends">
  27. {{ '第' + ($index + 1) + '属性为:' + key + ',它的值是:' + val}}<!-- $index 这种方式下依旧可用 -->
  28. </ol>
  29. </ul>
  30. <div>
  31. </div>
  32. </html>

 

03-1.js:

Js代码 AngularJS学习（三）模板 _学习 AngularJS学习（三）模板 _学习_02
  1. var PhoneListCtrl = function($scope) {
  2. $scope.phones = [
  3. {"name": "Nexus S",
  4. "snippet": "Fast just got faster with Nexus S."},
  5. {"name": "Motorola XOOM™ with Wi-Fi",
  6. "snippet": "The Next, Next Generation tablet."},
  7. {"name": "MOTOROLA XOOM™",
  8. "snippet": "The Next, Next Generation tablet."}
  9. ];
  10. }