`

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持续学习中,持续更新

分享到:
评论

相关推荐

    AngularJS 工作原理详解

    本文将详细介绍AngularJS的工作原理,包括其启动过程、数据绑定机制、事件循环以及与浏览器事件交互的过程。 首先,AngularJS应用程序的启动流程通常是从HTML页面开始的。在HTML中,我们通过ng-app指令来标识一个...

    Pro AngularJS 英文版 源代码

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

    AngularJS权威指南_angularjs_

    虽然在后来的版本中推荐使用组件化的方式,但控制器仍然是理解AngularJS工作原理的重要部分。 7. **过滤器(Filters)** 过滤器用于格式化和转换数据,例如日期格式化、货币转换等。它们可以通过`|`符号在表达式中...

    angularjs高级程序设计 源代码

    这本书“AngularJS高级程序设计”的源代码提供了深入理解AngularJS工作原理和实践应用的宝贵资源。下面将详细探讨AngularJS的一些核心概念和功能。 1. **双数据绑定**: AngularJS的核心特性之一是双向数据绑定,...

    AngularJS书两本

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

    angular-1.3.0-rc3 angular 最新源码带min 无doc

    同时,对于那些想要深入理解AngularJS工作原理的开发者来说,分析1.3.0-rc3的源码是一次宝贵的实践机会。不过要注意,尽管这个版本是稳定的候选版本,但在生产环境中使用时,最好等待正式版以获取官方的全面支持。

    Angularjs 合集 Angularjs 合集

    这可能包括深入讲解Scope、Controller、Directives和Filters的内部工作机制,以及如何利用AngularJS的模块系统构建大型应用。可能还会讨论AngularJS与其它技术如RESTful API、Bootstrap或jQuery的集成,以及如何使用...

    Angularjs_in_action

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

    Mastering Web Application Development with AngularJS

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

    ssm+bootstrap+angularJs案例

    BootStrap和AngularJS则在前端部分工作,BootStrap提供UI设计,AngularJS负责页面的动态交互。这个案例通过整合这五项技术,展示了现代Web开发中前后端分离和MVC架构的应用。 文件列表中的"160824110918.psc"可能是...

    AngularJS 执行流程详细介绍

    这一连串的执行流程构成了AngularJS的核心工作原理,允许开发者编写声明式的代码,由AngularJS负责管理和同步应用状态和视图。理解了AngularJS的执行流程,开发者能够更好地进行开发和调试,构建出高性能、响应式...

    AngularJS_in_Depth_v5_MEAP

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

    AngularJS--angular-phonecat

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

    Professional AngularJS

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

    AngularJS_module1_solution:AngularJS课程@coursera的作业1的解决方案

    通过研究这个解决方案,你不仅可以加深对AngularJS工作原理的理解,还能学会如何实际应用这些概念来构建功能丰富的Web应用。在JavaScript的世界里,AngularJS是一个强大的工具,能够帮助开发者构建高效、可维护的...

    springmvc+angularjs springmvc 整合angularjs demo

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

    Angular Chrome-crx插件

    - **学习AngularJS**:对于初学者,这个插件提供了直观的视图来了解AngularJS框架如何与HTML元素交互,是学习和理解AngularJS工作原理的好帮手。 ### 安装与使用 安装Angular Chrome-crx插件非常简单,只需将提供...

    angularjs压缩包

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

    angularjsdemo

    【标题】"AngularJS Demo" ...通过研究这个项目,开发者可以深入理解AngularJS的工作原理,并学习如何将其应用于实际项目中。同时,这个项目还体现了良好的代码组织和项目管理,这对于提升开发效率和代码质量至关重要。

Global site tag (gtag.js) - Google Analytics