angularjs入门——angularjs模板

luoyjx · 2015-03-10 09:44 · 858次阅读

本节将要介绍一些angularjs的动态特性。

这里要使用到angularjs中的控制器。

做过web开发的大都都知道M(model)-V(view)-C(controller)。

而视图(view)在这里就是通过使用html模板,将所需要显示的数据填入模板中而生成的最终效果。

这里我们用到angularjs的一个指令 ng-repeat 来迭代我们的数据,动态生成html。

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

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

而数据的使用是之前《angularjs快速开始》提到过的花括号{{phone.name}}来使用它。

ng-repeat="phone in phones"

这里是用ng-repeat来循环的取出phones数组中的phone数据。

这里就需要使用到控制器PhoneListCtrl,在控制器中初始化了模板所需的数据模型。

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."}
  ];
}

尽管控制器看起来并没有起到什么控制的作用,但是它在这里起到了至关重要的作用。通过给定我们数据模型的语境,控制器允许我们建立模型和视图之间的数据绑定。

PhoneListCtrl——控制器方法的名字(在JS文件controllers.js中)和<body>标签里面的ngController指令的值相匹配。

手机的数据此时与注入到我们控制器函数的作用域($scope)相关联。当应用启动之后,会有一个根作用域被创建出来,而控制器的作用域是根作用域的一个典型后继。这个控制器的作用域对所有<body ng-controller=“PhoneListCtrl”>标记内部的数据绑定有效。

收藏

暂无评论

登录后可以进行评论。没有账号?马上注册