angular控制器是什么？

一、背景介绍

AngularJS 控制器是常规的 JavaScript 对象。AngularJS 控制器控制 AngularJS 应用程序的数据。简单的说：在angularJS中，controller是一个javascript函数/类，用于操作作用域中，各个对象的初始状态以及相应的行为。

二、知识剖析

1.举个例子解释controller的作用域





Title



{{name}}


{{name}}

胖虎&大雄

也就是说，在HTML中，绑定ng-controller的那个DOM节点内的所有子标签，将会是当前controller的作用域。在大型项目中,如果HTML DOM 中有多个作用域，这时你就需要知道你使用的 scope 对应的作用域是哪一个。

2.多controller的实现

根据上面的例子，我们知道，angularJS中view层解析是通过controller的作用域来将$scope对象解析成相应的内容，因此我们可以在同一个界面上划分不同的模块，通过不同的控制器控制不同的模块来进行开发，这样通过划分模块的开发方式，对今后维护代码带来了便利。
在编码实战中，我将会具体介绍这个问题。

三、常见问题

controller之间的数据该如何传输？

四、解决方案

使用service实现controller之间的数据传输。

在之前的例子我们提到，controller是相对独立的，两个controller之间，内存是不共享的，同级DOM下，两个controller是无法互相访问其中的属性或者方法的。
那么，在实际项目中，我们会有很多的页面和控制器，不同页面下的controller之间有时候是需要传输数据的，之前我们学习了localStorage，用于页面之间的传参。
其实，官方建议页面之间通过service互相访问。
具体内容见扩展思考。

五、编码实战

在controller中嵌套controller会出现什么样的问题？
首先，我将原来页面中两个控制器所在的div外面又套了一个控制器，添加了1个变量，并将其余两个控制器中的同名变量删除。如下





Title



{{name}}

{{name}}


{{name}}

小夫

由此可见，controller的作用域跟js作用域相似。
注意：在大型项目中，为了代码规范，很少会使用这种方法，同时这种行为很危险！

六、扩展思考

如何使用angular中的Service服务在多个controller之间的进行数据传输？





Title






{{role.name}}

{{role.sex}}




{{role.name}}

{{role.sex}}

点击按钮之前：

大雄&静香

先点击“更换演员”：

胖虎&静香

再点击“演出开始”：

胖虎

以上只是简单的使用了service，更多的方法可以自行百度学习下。

七、更多讨论

讨论点一、在开发项目中，如何有效的管理controller和service文件?
讨论点二、创建service还有哪些方式?

八、参考文献

参考一：神奇的angularJS——controller控制器的作用
参考二：神奇的angularJS --连接controller的桥梁 service