不忘初心，好好沉淀

$apply()和$digest()在AngularJS中是两个核心概念，但是有时候它们又让人困惑。而为了了解AngularJS的工作方式，首先需要了解$apply()和$digest()是如何工作的。这篇文章旨在解释$apply()和$digest()是什么，以及在日常的编码中如何应用它们。探索$apply()和$digest()AngularJS提供了一个非常酷的特性叫做双向数据

如果你刚刚入门angular，你或许还在惊叹于angular的双向绑定是多么的方便，你也许在庆幸未来的前端代码中再也不会出现那么多繁琐的DOM操作了。但是，一旦你的应用程序随着业务的复杂而复杂，你就会发现你手头的那些angular的知识似乎开始不够用了。为什么绑定的数据没有生效？为什么应用的速度越来越慢？为什么会出现莫名其妙的infinite digest异常？所以你开始尝试进阶，尝试弄清楚在数据绑定这个现象

从本篇文章开始，会开始系统性地介绍angular是如何实现依赖注入这一重要特性的。##引言提到依赖注入，有后端背景的开发人员应该不会陌生。比如对于Java开发人员而言，绝大部分都是通过Spring这一框架首先了解到依赖注入这一概念的。所谓依赖注入(Dependency Injection)，它其实是一个更大的名为控制反转(Inverse of Control)概念的一种实现模式。只不过这种实现策略使用

本篇文章继续介绍angular中实现依赖注入的”幕后英雄” — 注入器(Injector)。说它是”幕后英雄”，是因为它才是依赖注入得以实现的主力军。而上篇文章介绍的模块只不过是活跃在前台跟各位开发人员直接打交道的”接待人员”。初识注入器加载模块任务队列方法介绍注入器任务执行注解(Annotation)提供$inject数组数组风格(Array-styl

上一篇文章初次介绍了注入器(Injector)，分析了它加载模块的过程以及它是如何执行任务队列的。这里需要重申一下的是，所谓任务队列实际上就是我们在开发一个基于angular的应用时定义的那些`constant`，`service`，`factory`等等，它们通过`module`类型提供的方法定义，但是定义并不代表立即就创建。它们的创建工作是交给注入器来完成的。

module中定义的高层API现在已经介绍的差不多了，本文就把后面剩下的几个能介绍的先介绍了(不能介绍的还有蛮多的，比如filter，controller，directive，这些使我们后面讨论的内容，敬请期待 :) )。和依赖注入关系比较紧密的剩下2个方法分别是value和decorator。Value在angular中，比较常见的问题除了service，factory和provider三者之间有

本篇文章继续介绍angular用以实现依赖注入的关键元素之一 - 注解(Annotation)。在前几篇文章中，我们已经分析和讨论了有关angular依赖注入的几个方面：angular如何处理模块的声明和获取angular注入器的概念和它是如何加载模块以及执行模块定义的任务angular注入器如何管理被托管的对象既然我们定义的服务和数据都已经被angular注入器托管在其内部的

有了前面那么多的铺垫工作，`$injector`服务正式上线。本文将介绍angular提供给开发者可以直接使用的`$injector`服务中包含的可调用方法以及每个方法的实现。##$injector服务首先我们看看这个服务中包含了那些方法：```jsreturn { invoke: invoke, instantiate: instantiate, get: getSer

在上一篇文章中，我们终于见到了angular中依赖注入的总体结构图。从这幅图中我们可以知道在angular内部是有两个注入器协同工作来实现我们习以为常的依赖注入特性的。结合上图简单回顾一下angular依赖注入的组成和工作流程。首先，在台面上的注入器名为实例注入器(Instance Injector)，它里面含有一个名为实例缓存(Instance Cache)的字典对象，该缓存的作用是

在上一篇文章中，介绍了constant的生命周期：它是如何被定义的，如何被创建，如何被使用的。本文继续介绍module上更多高层API的实现细节。在继续阅读下面的内容之前，还是建议对依赖注入本身要有足够的理解，当然如果你是跟着依赖注入的这一系列文章一路走来，对angular实现依赖注入的方式和细节应该是比较熟悉了。本文会介绍定义与module上的两个方法：module.config以及modu

在前面介绍angular中依赖注入相关的概念和细节时，非常多次提到了provider这个概念，每次提到都会让大家再等等，再等等。现在再也等不了啦，从本篇文章开始就会陆续介绍provider和一些基于provider的高层方法，比如service，factory等等。provider是什么？通过对象声明provider首先，我们来看看provider是什么。在angular中，p

本文就来解答上一篇文章留下的疑问，为什么在注入器也分成了instance注入器和provider注入器。这两种注入器的工作原理是怎么样的。总体结构为此我特别准备了一张图来描述一下angular注入器的工作流程和原理，如下所示。这张图的顶部是外部调用的入口，即通过angular暴露给外部的injector服务。关于injector服务。关于injector服务中含有的五个方法，在

此篇文章是angular事件机制相关的最后一篇文章。 主要介绍一下事件系统在Angular框架本身中的一些应用场景，看看在什么场景下使用事件是比较合适的。移除scope后的广播有过定义指令(directive)经验的同学们应该知道，很多指令都会拥有自己的scope，无论是隔离scope也好，还是原型继承的scope也好。这些指令在浏览器中也是通过对应模板(template)所表示的D

发布-订阅模式(Publish-Subscribe Pattern)事件的生命周期-注册和注销事件与scope继承树-$emit以及$broadcast事件的停止传播以及阻止默认行为事件在scope生命周期中的应用本节介绍1和2。

上一节中我们探讨了遍历scope树形继承结构的过程。本节继续讨论一下在继承结构下产生的属性覆盖问题，以及scope的一些特殊情况：隔离scope以及为scope显式指定其父亲scope。##属性覆盖(Attribute Shadowing)属性覆盖这个问题或许会对Angular新手造成一定的困扰，尽管从本质上而言，它的成因还是基于JavaScript中原型继承这一概念。那么让我们看看属性覆盖到

使用AngularJS为Elasticsearch创建一个前端如果使用Elasticsearch使用应用的数据源，我们可以很方便的使用AngularJS结合Elasticsearch提供的相关模块为它创建一个前端。以创建一个简单的员工信息花名册为例。准备工作准备工作分为以下两个方面：添加前端依赖安装Bower在bower.json中添加对于Angul

在一个项目中需要一个用来输入分钟数和秒数的控件，然而调查了一些开源项目后并未发现合适的控件。在Angular Bootstrap UI中有一个类似的控件TimePicker，但是它并没有深入到分钟和秒的精度。因此，决定参考它的源码然后自己进行实现。最终的效果如下：首先是该directive的定义：app.directive('minuteSecondPick

scope功能概述scope是AngularJS中的核心概念之一。它的设计思想和实现方式也是希望深入了解和学习AngularJS的开发人员必须熟知的。它的功能主要有以下几点： 1. 通过数据共享连接Controller和View 2. 事件的监听和响应 3. 脏数据检查和数据绑定前两点并没有什么新奇的地方，关键的地方在于第三点。这是AngularJS这一框架和好多其它框架的不同之

Dirty Checking的实现方式了解Angular的开发人员都知道，是一种叫做脏数据检查(Dirty Checking)的机制实现了双向绑定这一前端开发中的黑科技。那么在Angular中到底是如何实现它的呢？本文就一一来揭开它的神秘面纱。一言以蔽之，在angular中是通过Digest Cycle来完成脏数据检查从而完成双向绑定进而实现scope和view的同步的。下面分几个方面来介绍一下什么

Digest Cycle中的优化在上一篇文章中，介绍了Digest Cycle的实现方法$digest的大概逻辑。但是离真正的实现还有相当大的差距，具体的实现比较长，而且其中有很多细节在本篇文章还不会介绍，所以就不贴在这里了，有兴趣的可以去看源码。现在$digest方法的实现逻辑是这样的：var ttl = 10;do { var dirty = false; var length = $

本文介绍scope对象中$apply方法的实现。关于$apply和$digest方法，就像是一枚硬币的两面，它们之间的区别和联系，在这篇译文中做出了解答，有兴趣的同学可以看看。当然，本文的重点还是在于该方法是如何实现的。下面言归正传，来看看相关源代码：$apply: function(expr) { try { beginPhase('$apply'); try {

Angular中digest循环的主干是对于watchers的若干次遍历，直到整个scope中的数据”稳定”下来，这部分实现在这篇文章中已经进行了详尽的介绍。相关的一些细节优化也在这篇文章中进行了分析。除了主干的内容，digest循环的内容其实还包括几个比较有趣的部分，比如这一节我们即将分析的$evalAsync以及$applyAsync，下面我们就来通过相关源代码来分析一下：$digest: fu

写过Angular应用的同学们或多或少都会注意到Angular框架在幕后会根据应用结构创建很多个scope，这些scope也许是继承自它的父节点的scope，也可能是隔离scope(Isolated Scope)。但是它们最终的父节点都是$rootScope。$rootScope是全局唯一的一个scope，它由Angular在应用启动之初就被创建。现在我们就来探究一下scope的树形继承结构。

在上一篇文章中，介绍了scope继承本质上也是基于JavaScript原型继承。同时也分析和讨论了scope生命周期中最重要的两个方法$new以及$destroy的源代码实现。而在这一篇文章中，会接着讨论digest循环是如何利用scope的树形继承结构来进行遍历的。这也解答了在这篇文章末尾遗留下来的第一个问题。首先，还是回顾一下scope核心方法$digest的实现，这里会略去一些和本节

发布-订阅模式(Publish-Subscribe Pattern)事件的生命周期-注册和注销事件与scope继承树-$emit以及$broadcast事件的停止传播以及阻止默认行为事件在scope生命周期中的应用本节继续介绍介绍3，4以及5。

本系列文章会讨论Angular框架除了提供scope等核心功能外，还提供了哪些功能。作为Angular工具库这一系列文章的开篇，首先来看看但凡程序都绕不开的一个话题 - 异常。那么Angular在异常处理方面又提供了哪些工具呢？##引子 - scope中是如何抛出异常的？首先，让我们看看在定义`$rootScope`的过程中，哪些代码和异常有关：```js// 定义异常对象

据说99%的angular的初学者都会有一个疑问：factory和service到底有什么区别？什么情况该用factory，而什么情况又该用service呢？比如这个Stackoverflow上的这个问题：Service vs Factory，又或者是这个问题：Service vs Provider vs Factory。这些问题都有热心答主回答的很棒了，能够解释清它们共同点，区别以及典型用法。因此