这里是修真院前端小课堂,每篇分享文从
【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】
八个方面深度解析前端知识/技能,本篇分享的是:
【angualr控制器是什么?】
大家好,我是IT修真院深圳分院第11期的学员叶泽彪,一枚正直纯洁善良的WEB程序员,今天给大家分享一下,修真院官网JS任务2,深度思考中的知识点——angualr控制器是什么?
1.背景介绍
了解控制器之前,我们先来了解一下什么是MVVM模式。MVVM模式是Model-View-ViewMode(模型-视图-视图模型)模式的简称。
在angular中MVVM模式主要分为四部分:
View:它专注于界面的显示和渲染,在angular中则是包含一堆声明式Directive的视图模板。
ViewModel:它是View和Model的粘合体,负责View和Model的交互和协作,它负责给View提供显示的数据,以及提供了View中Command事件操作Model的途径;在angular中$scope对象充当了这个ViewModel的角色;
Model:它是与应用程序的业务逻辑相关的数据的封装载体,它是业务领域的对象,Model并不关心会被如何显示或操作,所以模型也不会包含任何界面显示相关的逻辑。在web页面中,大部分Model都是来自Ajax的服务端返回数据或者是全局的配置对象;而angular中的service则是封装和处理这些与Model相关的业务逻辑的场所,这类的业务服务是可以被多个Controller或者其他service复用的领域服务。
Controller:这并不是MVVM模式的核心元素,但它负责ViewModel对象的初始化,它将组合一个或者多个service来获取业务领域Model放在ViewModel对象上,使得应用界面在启动加载的时候达到一种可用的状态。
2.知识剖析
什么是controller?AngularJS 控制器是常规的 JavaScript 对象。AngularJS 控制器 控制 AngularJS 应用程序的数据。在angularJS中,controller是一个javascript函数/类,用于操作作用域中,各个对象的初始状态以及相应的行为。
也就是说,在HTML中,绑定ng-controller的那个DOM节点内的所有子标签,将会是当前controller的作用域。在大型项目中,如果HTML DOM 中有多个作用域,这时你就需要知道你使用的 scope 对应的作用域是哪一个。
angularJS中view层解析是通过controller的作用域来将$scope对象解析成相应的内容,因此我们可以在同一个界面上划分不同的模块,通过不同的控制器控制不同的模块来进行开发,这样通过划分模块的开发方式,对今后维护代码带来了便利。
3.常见问题
controller之间的数据该如何传输?
4.解决方案
使用service实现controller之间的数据传输。
controller是相对独立的,两个controller之间,内存是不共享的,同级DOM下,两个controller是无法互相访问其中的属性或者方法的。
那么,在实际项目中,我们会有很多的页面和控制器,不同页面下的controller之间有时候是需要传输数据的,之前我们学习了localStorage,用于页面之间的传参,而官方建议页面之间通过service互相访问。
5.编码实战
6.扩展思考
在多个controller中进行信息的沟通还有哪些?
1.$rootscope
$scope是html和单个controller之间的桥梁,数据绑定就靠他了。而$rootscope可以被认为是全局$scope, 在各个controller里面都可以显示,也都可以修改。
2.作用域继承
作用域嵌套带来的父子作用域的继承关系也可以算是一种父子作用域之间的通信方式。
3.作用域继承+$watch
为了解决作用域继承不能解决的从子孙到祖先的数据传递问题,可以用$scope.$watch函数来监视数据变化。
7.参考文献
参考一:https://blog.csdn.net/ft63022...
参考二:https://blog.csdn.net/ft63022...
参考三:http://www.cnblogs.com/whitew...
参考四:https://blog.csdn.net/lai_xu/...
8.更多讨论
1.controller对应的是什么?
每一个controller对应的都是自己控制的一块视图,只可以控制这个视图内的htnl元素。
2.为什么有时候controller不起作用?
这个涉及的可能比较多,ng-app未定义,或者重复定义了,controller需要控制的东西在controller之外,对应的不是当前的controller。
- service怎么传参?
在请求里面的url里传参
9.今天的分享就到这里啦,欢迎大家点赞、转发、留言、拍砖~