（七）Angularjs

控制器的作用

没有控制器/controller，我们没有地方定义业务模型

比如：ng-init指令。我们可以使用ng-init指令在scope对象上定义数据

<div ng-init="sb={name:'somebody',gender:'male',age:28}">
</div>

控制器让我们有机会在scope上定义我们的业务逻辑，具体说，可以使用控制器：

•对scope对象进行初始化

•向scope对象添加方法

在模板中声明控制器

在一个HTML元素上使用ng-controller指令，就可以引入一个控制器对象：

<div ng-controller="myController">...</div>

控制器的实现

控制器实际上就是一个JavaScript的类/构造函数：

 1 //控制器类定义
 2 var myControllerClass = function($scope){
 3     //模型属性定义
 4     $scope.text = "...";
 5     //模型方法定义
 6     $scope.do = function(){...};
 7 };
 8 //在模块中注册控制器
 9 angular.module('someModule',[])
10 .controller("myController",myControllerClass);

控制器对scope的作用

注意：ng-controller指令总是创建一个新的scope对象：

流程：

•ng-app指令引发$rootScope对象的创建。开始时，它是一个空对象。

•body元素对应的scope对象还是$rootScope。ng-init指令将sb对象挂在了$rootScope上。

•div元素通过ng-controller指令创建了一个新的scope对象，这个对象的原型是$rootScope。

•因为原型继承的关系，在do函数中对sb的引用指向$rootScope.sb。

初始化$scope对象

<html ng-app="test">
<head>
    <script src="angular.js"></script>
</head>
<body>
    <div ng-controller="testController">
        <div>name : {{vm.sb.name}}</div>
        <div>gender : {{vm.sb.gender}}</div>
        <div>age : {{vm.sb.age}}</div>
        <div>career : {{vm.sb.career}}</div>
        <div><img ng-src="{{vm.sb.photo}}"></div>
    </div>
</body>
</html>

 1 var testControllerClass = function($scope){
 2     //view model
 3     $scope.vm = {
 4         sb : {
 5             name : "Jason Stantham",
 6             gender : "male",
 7             age : 48,
 8             career : "actor",
 9             photo : "http:1.jpg"
10         }
11     };
12 };
13 angular.module("ezstuff",[])
14 .controller("testController",testControllerClass);

向scope对象添加方法

<html ng-app="test">
<head>
    <script src="angular.js"></script>
</head>
<body>
    <div ng-controller="testController">
        <button ng-click="vm.shuffle();">shuffle</button>
        <div>name : {{vm.sb.name}}</div>
        <div>gender : {{vm.sb.gender}}</div>
        <div>age : {{vm.sb.age}}</div>
        <div>career : {{vm.sb.career}}</div>
        <div><img ng-src="{{vm.sb.photo}}"></div>
    </div>
</body>
</html>

 1 var testControllerClass = function($scope){
 2     //view model
 3     $scope.vm = {
 4         sb : {
 5             name : "Jason Stantham",
 6             gender : "male",
 7             age : 48,
 8             career : "actor",
 9             photo : "1.jpg"
10         },
11         shuffle : function(){
12                 var repo = [
13                     {name:"Jason Stantham",gender:"male",age:48,career:"actor",photo:"2.jpg"},
14                     {name:"Jessica Alba",gender:"female",age:32,career:"actress",photo:"4.jpg"},
15                     {name:"Nicolas Cage",gender:"male",age:53,career:"actor",photo:"4.jpg"},
16                     {name:"崔永元",gender:"male",age:48,career:"independent journalist",photo:"5.jpg"}];
17                 var idx = Math.floor(Math.random()*repo.length);
18                 $scope.vm.sb = repo[idx];
19         }
20     };
21 };
22 angular.module("test",[])
23 .controller("testController",testControllerClass );

控制器不要以下操作

•DOM操作：应当将DOM操作使用指令/directive进行封装。

•变换输出形式：应当使用过滤器/filter对输出显示进行转化。

•跨控制器共享代码：对于需要复用的基础代码，应当使用服务/service进行封装