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有四大特性:

1. Scope提供$watch方法监视Model的变化。
2. Scope提供$apply方法传播Model的变化。
3. Scope可以继承，用来隔离不同的application components和属性访问权限。
4. 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持续学习中,持续更新