AngularJs工作原理
AngularJs是gooogle开源的一套web前端框架,主要有五大特性:双向数据绑定,mvc,模版,Directives ,依赖注入等,为了更好的学习AngularJs为此学习了一些AngularJs的基本运行机制,这里主要讲一下AngularJs是如何运行的.
1.每次加载html时,会解析生成DOM(文件对象模型)
2.然后加载angular.js脚本
3.页面文档完成加载并解析完毕之后会触发DOMContentLoaded事件
4.AngularJs找到ng-app指令,确定应用程序的边界
5.使用ng-app中的制定模块配置$injector(在引导启动是,AngularJs创建了一个$injector,并且使用这个$injector来调用控制函数,service函数,filter函数等,其它可能依赖到的函数)
6.使用injector来创建compile服务和$rootScope($rootScope是其它所有作用域的父级,作用域的形式类似于父子、树状的关系，并且最根部的就是 $rootScope 实例。就像作用域是被DOM树驱动着创建的一样，作用域树也是在模仿 DOM 的结构。)
7.然后对html中的指令进行解析运行实现
8.浏览器会一直保持回路来等待事件的触发,一旦有事件触发,就会进入到JavaScript的context中,一般通过回调函数修改DOM
9.等到回调函数执行完毕,浏览器根据新的DOM来渲染页面
只有在Angularjs中的context才能享受Angularjs的服务,对于原生的javas必须通过$apply来把它包进angularjs中才可以.
说一下AngularJs中经常用到的scope.scop有四大特性:
- Scope提供$watch方法监视Model的变化。
- Scope提供$apply方法传播Model的变化。
- Scope可以继承，用来隔离不同的application components和属性访问权限。
- Scope为Expressions的计算提供上下文。
$digest
digest像是Angularjs的心跳,每隔50秒刷新一次,刷新的时候会触发所属的所有scope和其所有的scope下的dirty checking,dirtychecking又会触发$watch(),整个Angularjs双向绑定数据就活了起来.
$watch
在digest观察是如果watch监视的value有变化就会被触发,Angularjs内部实现的model的实时更新
$apply
$scope.$apply会触发digest,当执行序列不是被angular序列创建的时候,我们可以用scope.apply把这个函数包起来,这里讲一个用到的实例
Bid.refresh = function () {
var refresh_page = document.getElementById('id')
if (refresh_page) {
var scope = angular.element(refresh_page).scope();
scope.$apply(function () {
scope.refreshes();
})
}
}这是在做partybid是用到的,angularjs不支持调用其它controller页面的函数,在这里我们要对接收到的信息实时刷新在页面上,通过scope.$apply把刷新的方法包起来,就可以实现.
对Angularjs理解的还不是很深,如果有不恰当的地方,请指正,Angular持续学习中,持续更新