`
moneyinto
  • 浏览: 32611 次
  • 性别: Icon_minigender_1
  • 来自: 东台
社区版块
存档分类
最新评论

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重新渲染页面。

 

 

分享到:
评论

相关推荐

    AngularJS 工作原理详解

    本文主要介绍AngularJS 工作原理,这里整理了相关资料及示例代码,有兴趣的小伙伴可以参考下

    Mastering Web Application Development with AngularJS

    《精通AngularJS》深入浅出地讲解了AngularJS的开发概念和原理,并通过丰富的开发实例向读者展示了构建复杂应用的完整过程,包括学习使用AngularJS特有的基于DOM的模板系统,实现复杂的后端通信,创建漂亮的表单,...

    精通AngularJS

    《精通AngularJS》深入浅出地讲解了AngularJS的开发概念和原理,并通过丰富的开发实例向读者展示了构建复杂应用的完整过程,包括学习使用AngularJS特有的基于DOM的模板系统,实现复杂的后端通信,创建漂亮的表单,...

    Angularjs标签模板加载原理

    NULL 博文链接:https://bijian1013.iteye.com/blog/2257732

    使用AngularJS开发下一代WEB应用

    本Share来自ZTEsoft的章小飞(大漠穷秋)在w3ctech的“新Web技术-实时Web与多终端”沙龙上的分享。内容中介绍了AngularJS的基本概念,并展示了用法实例,同时对AngularJS的核心原理进行了解析。

    Build Your Own AngularJS

    第一版Angular从头开始构建,适合想要学习源码,学习MVVM原理的朋友

    AngularJS深度剖析与最佳实践

    本书系统讲解AngularJS的基本概念与背后的原理,包括完整的开发框架与最佳实践。不仅抽丝剥茧地展现了AngularJS的诸多特性与技巧,还讲解了工程实践中容易陷入的“坑”,是从AngularJS的小工走向专家的必备参考。...

    AngularJS 执行流程详细介绍

    本文详细介绍了从页面开始加载到页面渲染完毕过程中,AngularJS执行了哪些操作,有需要的小伙伴可以参考下

    浅谈AngularJs 双向绑定原理(数据绑定机制)

    那么什么是双向绑定,下面简单进行讲解。 首先我们要理解数据绑定。我们看到的网站页面中,是由数据和设计两部分组合而成。...而将数据显示在页面上,并且有一定的交互效果(比如点击等用户操作及对应的页面反应)则是...

    AngularJS视频教程全套百度网盘

    AngularJS视频教程全套,总共12章节详细讲述了AngularJS框架的原理及应用,实战篇章中讲述了AngularJS在项目中的的注意事项 学习AngularJS需要对NodeJS框架有基础性了解,还没有学习NodeJS建议先了解一下方后对...

    P2P网络借贷平台项目SSH+Redis+ActiveMQ+POI+Shiro+AngularJS+Nginx+Quartz等

    2、前端页面采用流行的bootstrap、 angularjs 等流行的前端技术,通过本项目可以掌握 angularjs 的前端的MVC分层设计理念。 3、该项目采用了struts2 hibernate spring和 spring data jpa 开源框架完成,并融入了...

    angularjs培训PPT

    angularjs1.0中的要点,主要讲述angularjs的MVC,angularjs中的依赖注入原理,以及实现,angularjs中的服务。

    angularjs 的数据绑定实现原理

    在angularjs1.X 中存在了三种数据绑定的方式,用于数据的同步、展示。在 angularjs 1.3 之前,angularjs 只存在两种方式: two-way-binding 和 one-way-bindng , 而后则引入了称为one-time-binding 的绑定机制。 ...

    AngularJS的启动过程---加上了指令执行机制框图.pdf

    AngularJS的启动过程

    AngularJS入门教程之数据绑定原理详解

    主要介绍了AngularJS数据绑定原理,较为详细的分析了AngularJS数据绑定的原理、使用技巧与相关注意事项,需要的朋友可以参考下

Global site tag (gtag.js) - Google Analytics