AngularJs原理

要想很好的把握AngularJs,首先要了解AngularJs的运行机制,它的原理,清楚的知道它每一步都做了什么。

 

启动

 

1.浏览器加载html,然后解析成DOM;

 

DOM(Document Object Model,文档对象模型)可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。DOM是以面向对象方式描述的文档模型,定义了表示和修改文档所需要的对象,这些对象的行为和属性以及这些对象之间的关系,定义了访问和操作文档的标准方法。可以把DOM认为是页面上数据和结构的一个树形表示

HTML DOM Node Tree

2.浏览器加载angular.js脚本;

 

3.AngularJS等到DOMContentLoaded事件触发;

 

页面文档完全加载并解析完毕之后,会触发DOMContentLoaded事件,当DOMContentLoaded事件触发,在DOM加载完之后。

 

4.AngularJs寻找ng-app指令,确定AngularJs管理的边界;

 

一般ng-app写在<html>标签里,指定AngularJs管理整个页面上所有的DOM元素,也可以写在其他的标签里,这样的话就管理其中一部分。

 

5.使用ng-app中指定的模块来配置注入器($injector);

 

每个AngularJs应用都有一个注入器($injector)用来处理依赖的创建,注入器是一个负责查找和创建依赖的服务定位器。

 

6.使用注入器来创建编译服务($compile service)和根作用域($rootScope);

 

7.编译服务编译DOM并把它连接到根作用域;

 

8.渲染页面。

 

 

执行期

 

AngularJs和浏览器的事件回路交互。

 

1.浏览器的事件循环等待事件的触发,所谓事件包括用户的交互操作,定时事件或网络事件;

 

2.事件触发后,回调被执行,进入javaScript,通常回调会修改DOM;

 

3.回调执行完毕,浏览器会根据DOM重新渲染页面。

 

 

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值