大家好,我是IT修真院成都分院第7期的学员韩建名,一枚正直纯洁善良的WEB前端程序员。
今天给大家带来的是:什么是angular的控制器
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
1.背景介绍
一、什么是controller
AngularJS 控制器是常规的 JavaScript 对象,由标准的JavaScript对象的构造函数创建。
AngularJS 控制器 控制 AngularJS 应用程序的数据。
简单的说:
在angularJS中,controller是一个javascript函数,用于操作作用域中,各个对象的初始状态以及相应的行为。
2.知识剖析
一.angular controller初始化对象状态
在控制器中初始化name属性的值,值为haha初始化
在大型项目中,如果HTML DOM 中有多个作用域,这时你就需要知道你使用的 scope 对应的作用域是哪一个。
三、多controller的实现
根据上面的例子,我们知道,angularJS中view层解析是通过controller的作用域来将$scope对象解析成相应的内容,因此我们可以在同一个界面上划分不同的模块,通过不同的控制器控制不同的模块来进行开发,这样通过划分模块的开发方式,对今后维护代码带来了便利。我们会发现,不同的controller他们scope对象是不一样的,即使都是用了name这个变量,可以看出controller之间是封闭的,可是有时候我们面对两个模块之间进行数据交互,必然在两个controller之间进行通信,这就涉及到angular中的service操作
3.常见问题
controller之间的数据该如何传输?
4.解决方案
使用service,实现controller之间的数据传输
在之前的例子我们提到,controller是相对独立的,两个controller之间,内存是不共享的,同级DOM下,两个controller是无法互相访问其中的属性或者方法的。
官方建议页面之间通过service互相访问。
5.编码实战
问题1.在controller中嵌套controller会出现什么样的问题?
首先,我将原来页面中的body标签上绑定了一个名为boosController的一个控制器,命名了2个变量,并将其余两个控制器中的同名变量删除。如下图
由此可见,controller的作用域跟js作用域相似。
注意:在大型项目中,为了代码规范,很少会使用这种方法,同时这种行为很危险!
6.扩展思考
以上只是简单的使用了service,在Angular中Controller通信的方式有三种,上述提到的为注入服务的方法,另外还有作用域继承和基于事件的方法。
作用域继承。利用子 Controller 控制父 Controller 上的数据,仅限于上下级之间的通信。
基于事件。利用 Angular 的事件机制,使用 $on(监听事件)、$emit(向父级以上的作用域触发事件) 和 $boardcast(向子级以下的作用域广播事件)
7.参考文献
参考一:博客园
参考一:菜鸟教程
8.更多讨论