文档介绍:Angular JS MVC: 2
MVC 2
JS MVC 2
Angular JS MVC:MVVM(Model-View-ViewModel) 3
$scope作用域 3
$scope 3
作用域的生命周期 4
$rootScope 4
控制器作用域继承 5
Angular JS run() 方法 7
Angular JS依赖注入中代码压缩问题 7
Angular JS 的$watch()方法 8
$digest循环 8
$watch列表:$watchers 9
脏值检查 10
$watch()方法 11
Angular JS 的$apply()方法 13
$apply() 13
何时使用$apply 14
Angular JS工具方法 15
(self,fn,args) 15
(source,[destination]) 16
(o1,o2) 17
(dst,src) 17
(obj,iterator,[context]) 18
(string) 18
(element,[modules]) 19
() 20
其他 20
类型判定 20
Angular JS使用jQuery 21
Angular JS MVC:
MVC
MVC(模型-视图-控制器)是一套设计模式,可以分层设计应用。将数据(模型)与用户视图(视图)解耦,通过中间控制器(Controllers)处理业务逻辑、用户输入以及相应的逻辑跳转。
模型:是应用程序中用于处理应用程序数据逻辑的部分,通常模型对象负责在数据库中存取数据。
视图:是应用程序中处理数据显示的部分,通常思路是依据模型数据创建的。
控制:是应用程序中处理用户交互的部分,通常控制器负责从视图读取数据,控制用户输入,并向模型发送数据。
JS MVC
传统web应用将大量的业务逻辑放在服务端执行,客户端只负责页面交互,这样会导致服务端负载过大,分布式处理能力弱等缺陷。
JS MVC web应用程序架构主要致力于将服务端的逻辑处理转移到客户端。
优点:
可扩展性:服务器处理能力保持不变的前提下,应用被越多的客户使用,只需增加客户端机器即可。
实时的用户响应:客户端代码可以立即对用户的输入作出反应,不需要等待网络传输。
结构清晰的编程模型:用户界面可以有效的分离应用程序的业务逻辑。
客户端状态管理:在客户端维护临时会话状态信息可以减少服务器上的内存负载。
离线应用:如果大部分应用程序的代码已经在客户端运行,那么创建一个离线版本的应用程序将变的更加容易。
Angular JS MVC:MVVM(Model-View-ViewModel)
Angular JS引入了软件设计的MVC模式。但不完全是MVC模式,而是更倾向于MVVM,而angular JS中的作用域$scope被认为是ViewModel。采用了数据绑定(DATA-BINDING),View的变动,自动反映在 ViewModel,反之亦然。
模型:model就是数据模型。
视图对象需要被$scope引用,可以使用任何类型的JavaScript对象、数组、基本类型。并提供一些API监控其状态。
视图:view就是用HTML,CSS写的UI视图代码,其中包含Angular JS的指令,表达式。
业务控制:controller控制器起到设置$scope对象的初始状态以及后续的动作关联。
在angular JS控制器中我们无需添加对于DOM级的事件监听,这些在Angular JS中已经内置了。在UI节点DOM事件发生后Angular JS会自动转到scope上的某个行为逻辑。
这样就奠定了angular JS MVC应用架构。$scope对象拥有数据的引用关系、控制器定义行为、视图处理页面展示布局以及相应的处理跳转。
$scope作用域
$scope
$scope对象是定义应用业务员逻辑、控制器方法和视图属性的地方。
作用域是视图和控制器之间的胶水。在应用将视图渲染并呈现给用户之前,视图中的模板会和作用域进行连接,然后应用会对DOM进行设置以便将属性变化通知给angular JS。
作用域是应用状态的基础。基于动态绑定,可以依赖视图在修改数据时立刻更新$scope,也可以依赖$scope在其发生变化时立刻重新渲染视图。
Angular JS将$scope设计成和DOM类似的结构,因此$scope可以进行嵌套,也就是