`
moneyinto
  • 浏览: 33857 次
  • 性别: 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的工作原理,包括其启动过程、数据绑定机制、事件循环以及与浏览器事件交互的过程。 首先,AngularJS应用程序的启动流程通常是从HTML页面开始的。在HTML中,我们通过ng-app指令来标识一个...

    Angularjs标签模板加载原理

    **AngularJS标签模板加载原理详解** AngularJS,作为一款强大的前端JavaScript框架,以其双向数据绑定、模块化和可扩展性而备受开发者喜爱。在AngularJS中,模板是构建用户界面的关键部分,它允许我们动态地生成...

    AngularJS书两本

    接着,《AngularJS_深度剖析与最佳实践》可能会更深入地探讨AngularJS的高级话题,如模块化、路由、指令的高级用法、以及$scope的工作原理。模块化有助于组织大型应用,而路由则允许在单页应用(SPA)中实现页面导航...

    Angularjs 合集 Angularjs 合集

    AngularJS 是一款由Google维护的前端JavaScript框架,用于构建单页Web应用(SPA,Single Page ...同时,随着AngularJS的不断演进,如Angular 2+版本的出现,理解其基础原理也将有助于你更好地适应新技术的发展。

    Mastering Web Application Development with AngularJS

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

    Angularjs_in_action

    这一部分主要介绍了AngularJS的基本概念,包括如何设置开发环境、AngularJS的工作原理以及基本的开发流程。 - **第1章**:“Hello AngularJS”。通过一个简单的“Hello World”示例,介绍了如何开始使用AngularJS。...

    精通AngularJS

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

    ssm+bootstrap+angularJs案例

    【标题】"ssm+bootstrap+angularJs案例"是一个整合了Spring、SpringMVC、MyBatis、BootStrap和AngularJS技术的实践项目。...同时,了解每个技术的原理和使用场景,将有助于深入理解和应用这些技术。

    angularJS理论与实战.ppt

    AngularJS是一款由Google维护的JavaScript框架,...通过"angularJS理论与实战.ppt"的学习,开发者不仅能理解AngularJS的基本原理,还能学会如何运用这些知识解决实际开发中的问题,从而成为一名熟练的AngularJS开发者。

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

    接下来我们将详细探讨AngularJS中的数据绑定原理。 ### 数据绑定原理 在AngularJS中,数据绑定是通过脏检查(dirty-checking)来实现的。脏检查是一种让AngularJS定期检查数据模型与视图之间是否发生变化的技术。...

    Pro AngularJS 英文版 源代码

    代码示例将帮助你看到理论如何转化为实际应用,加深对AngularJS工作原理的认识。对于每个章节的练习,你可以直接参考源代码,对比自己的实现,找出差距并学习优化方法。这不仅能够提高编程效率,也能增强解决问题的...

    创建你自己的angularjs

    创建属于自己的AngularJS框架,实际上是指深入理解AngularJS的核心原理并尝试构建一个类似功能的框架。这不仅对理解AngularJS框架大有裨益,同时也是一种提升JavaScript编程能力的有效方式。这个过程中会涉及的知识...

    springmvc+angularjs springmvc 整合angularjs demo

    首先,让我们理解SpringMVC的工作原理。SpringMVC通过Model-View-Controller模式来处理HTTP请求。Controller负责接收请求,处理业务逻辑,并将结果传递给Model。Model则包含了应用程序的数据,View则根据Model的数据...

    AngularJS_in_Depth_v5_MEAP

    - AngularJS的工作原理简介 - AngularJS与其他前端框架的对比 **第2章:AngularJS架构解析** - 模块与依赖管理 - 控制器与视图的交互机制 - 依赖注入详解 - 双向数据绑定的实现原理 - $scope 对象的作用与用法 ##...

    Professional AngularJS

    通过阅读《Professional AngularJS》,开发者可以深入理解AngularJS的内部工作原理,提升开发效率,并掌握构建复杂Web应用的技能。书中的书签功能则有助于快速定位和回顾关键概念,对于自学或专业开发人员来说,都是...

    angularjs压缩包

    通过对 `angular.js-1.6.3` 的学习,开发者可以深入了解 AngularJS 的内部工作原理,从而更好地优化应用性能,解决潜在的问题,并为向 Angular(Angular 2+)的迁移做好准备。AngularJS 的设计思想和模式对现代前端...

    AngularJS--angular-phonecat

    "AngularJS--angular-phonecat"是一个经典的入门教程,旨在帮助初学者理解AngularJS的核心概念和工作原理。尽管描述中提到这个项目可能与网上的教程存在一些小差异且没有包含测试部分,但它仍然是学习AngularJS的一...

    angularjs ng-table demos

    你可以通过阅读源码了解其实现原理,同时参考示例进行实践操作,提升自己的AngularJS开发技能。 总的来说,`angularjs ng-table demos`提供了一个学习和掌握`ng-table`的实践平台,通过探索这些示例,开发者能够更...

    AngularJs学习笔记.docx

    ##### 1.2 AngularJS 的工作原理 - **编译过程**:AngularJS 在运行时会扫描HTML文档中的所有AngularJS特定属性,并根据这些属性执行相应的指令。 - **作用域(Scope)**:作用域是控制器和视图之间共享的数据对象...

Global site tag (gtag.js) - Google Analytics