angularjs学习之模板

angularJs是模型-视图-控制器（MVC）的模式

先看一下模型和控制器：

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

　在controllers.js中有控制器PhoneListCtrl，控制器中初始化了一组数据模型。控制器的作用可以使模型和视图之间数据连接起来。

下面看一下模式如何引导视图的变化：

index.html

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

　　ng-controller定义了控制器（PhoneListCtrl）的作用域，只有在作用域下才能执行控制器相关指令。

　　通过ng-repeat可以实现模型数据的遍历，双花括号可以实现数据的取值（类似js的表达式）。

posted on 2016-02-22 10:37 熏风阅读(162) 评论(0) 编辑收藏举报