angularjs 1.3.x入门教程 3 Angular Templates

最新推荐文章于 2023-09-14 11:29:46 发布

陈sir的知识图谱

最新推荐文章于 2023-09-14 11:29:46 发布

阅读量1.9k

点赞数

分类专栏： angular js 文章标签： angularjs 入门指南入门教程

本文链接：https://blog.csdn.net/yudar1024/article/details/41344943

版权

angular js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

这一节稍微复杂 angularjs 是用MVC 模式，git bush 到angular-phonecat文件夹，输入以下代码，将这一节的示例代码git出来

git checkout -f step-2

打开 app/index.html:

可以看到如下代码

<html ng-app="phonecatApp">
<head>
  ...
  <script src="bower_components/angular/angular.js"></script>
  <script src="js/controllers.js"></script>
</head>
<body ng-controller="PhoneListCtrl">

  <ul>
    <li ng-repeat="phone in phones">
      <span>{{phone.name}}</span>
      <p>{{phone.snippet}}</p>
    </li>
  </ul>

</body>
</html>

可以看到之前的硬编码被一个angular指令ngRepeat和两个表达式替代了

在 <li> 元素中的ng-repeat 属性是一个angular 循环指令，phones 代表一个list或者一个array，phone 代表其中的一个item.

{{phone.name}} 是一个表达式，这里相当于phone所代表的item中的name属性的值

我们在body 元素中添加了一个新的指令ng-congroller，并将其关联到了PhoneListCtrl id上，表示一个id为PhoneListCtrl 的controller。

{{phone.name}}表达式所使用的module便是在这个controller中构建的。

注意，我用用ng-app="phonecatApp"指定了一个angular module，phonecatApp是这个module的name，并且在这个module中有一个名为PhoneListCtrl 的controller

数据模型(model)在控制器PhoneListCtrl controller.中进行实例化

打开app/controllers.js,可以看到初始化代码

var phonecatApp = angular.module('phonecatApp', []); // 创建module

//初始化数据模型
phonecatApp.controller('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.'}
  ];
});