（七）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进行封装