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  熏风  阅读(168)  评论(0编辑  收藏  举报