一.背景介绍
在学习angular的过程中，不同于javascript，遇到了许多新的概念，比如指令（directive）、服务（service）、控制器（controller）、模型（model）等。还接触到了MVC这种将数据管理、业务逻辑控制和数据展示分离开，进而使程序的逻辑性和可维护性更强的思想。接下来，我们会分享、讨论一下控制器的用法。
二.知识剖析
2.1什么是控制器？
AngularJS中的控制器是一个常规的js对象，也是一个函数，用来向视图的作用域添加额外的功能.我们用它来给作用域对象设置初始状态，并添加自定义行为. 一般的使用的方法是通过调用模块的controller()方法注册控制器，该方法接收两个参数，第一个参数是控制器名称，第二个参数是一个匿名函数，在该函数中可以声明一个$scope形参，该形参就表示了控制器对应的作用域我们可以通过一个简单的列子来直观的感受一下：
<div ng-controller="MyController">
</div>
<p>商品价格：<input type="number" ng-model="price"></p>
商品数量：
总价：{{price * num}}
总价：{{totalPrice()}}
//创建一个名为app的angular js应用模块
var app=angular.module('app',[]);
//注册一个名为MyController的控制器
app.controller('MyController',function($scope) {
//通过$scope为price和num这两个属性设置初始值
$scope.price=50;
$scope.num=2;
2.2 控制器的作用域范围和继承
在html中使用ng-controller指令实例化控制器时，会产生一个新的作用域对象。在同一个页面的ng-app作用域下可以通过ng-controller实例化多个控制器对象。但是，每个控制器对应的作用域对象只能与ng-controller指令所在标签的开始与结束标签之间的DOM元素上建立数据绑定。
这里创建了三个ng-controller 指令，这样创建了三个scope（作用域对象）：
MainController scope，包含了name和age两个属性
ChildController scope，继承了age但覆盖了name属性
lastController scope，覆盖了name和age两个属性
myApp.controller('MainController', function($scope) {
$scope.age = 20;
$scope.name = '老大';
});
myApp.controller('ChildController', function($scope) {
$scope.name = '老二';
});
myApp.controller('LastController', function($scope) {
$scope.age = 18;
$scope.name = '老三';
});
2.3 控制器的作用
控制器的作用主要有两个：第一个，scope作用域对象初始化 ；第二个，给scope作用域对象通过一些方法或者函数增加行为 。
三.常见问题
如何在多个controller中进行信息的沟通？
四.解决方案
方法一：利用作用域继承的原理，子控制器访问父级控制器中的内容。
方法二：使用service服务进行数据传输。
在之前的例子我们提到，controller是相对独立的，两个controller之间，内存是不共享的，同级DOM下，两个controller是无法互相访问其中的属性或者方法的。
那么，在实际项目中，我们会有很多的页面和控制器，不同页面下的controller之间有时候是需要传输数据的，之前我们学习了localStorage，用于页面之间的传参。其实，官方建议页面之间通过service互相访问。
五.编码实战
六.扩展思考
在多个controller中进行信息的沟通还有哪些？
1.$rootscope
大家都知道$scope是html和单个controller之间的桥梁，数据绑定就靠他了。而$rootscope可以被认为是全局$scope, 在各个controller里面都可以显示，也都可以修改。
2.作用域继承 + $watch
为了解决作用域继承不能解决的从子孙到祖先的数据传递问题，可以用$scope.$watch函数来监视数据变化。
七.参考文献
八.更多讨论
1.controller是怎样获得service中的数据的？
--通过依赖注入的方式实现的
2.angular怎么传参？
--用ui-sref和state.go
3.为什么controller as vm是一项最佳实践？
--ng-if会阻断$scope，用这种方法就没关系
undefined_腾讯视频
网友评论