Angular的启动与双向绑定

Angular（1.2，不同版本代码结构会有差别）的启动过程

angular.js是一个自执行函数，实际上angular是一个对象。当angular.js被引入之后，执行如下代码：

//try to bind to jquery now so that one can write angular.element().read()
//but we will rebind on bootstrap again.
bindJQuery();

publishExternalAPI(angular);

jqLite(document).ready(function() {
  angularInit(document, bootstrap);
});

1. 绑定jQuery，如果外部引入了jQuery文件，则使用外部jQuery，如果没有引入外部jQuery文件，AngularJs内部定义了简化版的jQuery：JQLite

2. 绑定jQuery之后，执行函数publishExternalAPI

　　2.1 首先扩展angular对象，给对象添加一些内置的方法函数（文档中列出的angular.***方法函数）

　　2.2 然后定义angular.module方法，用于定义模块

　　2.3 使用angular.module方法定义ngLocale模块、ng模块，并注册内置的指令（directive）和服务（provider）（这些就是文档中列出的指令和服务）

3. 等待document ready之后，执行函数angularInit

　　3.1 首先寻找包含ng-app（或者其他几种写法）的HTML元素，如果找到，则自动执行bootstrap函数启动Angular，如果没有找到，那么需要我们在外部手动调用angular.bootstrap启动Angular

　　3.2 bootstrap中会生成一个注入器injector，然后执行以下代码，并最后返回一个注入器实例

injector.invoke(['$rootScope', '$rootElement', '$compile', '$injector',
   function bootstrapApply(scope, element, compile, injector) {
    scope.$apply(function() {
      element.data('$injector', injector);
      compile(element)(scope);
    });
  }]
);

以上是Angular的启动过程，其中最后一步（以上代码）留到后面详细说明。

双向绑定

以上代码中，injector.invoke的作用是执行注入，第一个注入的是$rootScope（源码中对应的是$RootScopeProvider，在以上启动过程说明2.3中注册的服务之一）

我们知道，在Angular中，控制器中都会注入$scope，$scope上定义的属性和方法，可以直接写在页面中，Angular会自动识别。$scope相当于视图与控制器之间的连接桥梁，视图改变会更新$scope中的数据，在控制器中对$scope上的属性进行修改，也会反映到视图上，这就是我们说的双向数据绑定。

compile是Angular编译指令的过程，在这个过程中，Angular会扫描整个ng-app文档，为$scope上的属性和文档中的变量名建立观察对象，并将该观察对象加入当前scope的$$watchers数组中，观察对象如下所示，其中watchFn表示观察函数，当watchFn的返回值发生变化时，需要执行的函数为listenerFn，那么当前scope中的所有需要观察的对象都记录在了$$watchers数组中。

var watch = {
    watchFn: watchFn,
    listenerFn: listenerFn
};

我们看到compile函数放在scope.apply()中执行，那么，在编译完成之后，Angular会为我们调用$digest循环，$digest循环会遍历$$watchers数组，对于数组中的每一个对象，如果watchFn的返回的新值与旧值比较发生了变化，那么就会执行listenerFn，如果listenerFn中对$scope上的数据有改变，那么$digest会再执行一次，直到数据没有改变为止（Angular默认的最大循环次数是10次）。这样就实现了数据到视图的绑定。

而对于视图到数据的过程，Angular绑定了input、textarea等的input、change事件来实现，例如，当通过键盘输入使得input的value发生改变时，会触发input事件，该事件回调中实现了对$scope上数据进行更改的操作，并调用$scope.apply()来使得$scope上的数据更改之后进入$digest循环。

下面是例子：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>双向绑定</title>
    <script src="jquery.js"></script>
    <script src="two-way-binding.js"></script>
</head>
<body>
<input id="input" type="text">
<span id="content"></span>

</body>
</html>

//two-way-binding.js

function Scope() {
    this.$$watchers = []; //记录所有观察者
}

/**
 * Scope原型
 */
Scope.prototype = {
    constructor: Scope,
    /**
     * 添加观察者，向$$watchers数组中添加一个对象
     * @param watchFn
     * @param listenerFn
     */
    $watch: function (watchFn, listenerFn) {
        var watch = {
            watchFn: watchFn,
            listenerFn: listenerFn
        };
        this.$$watchers.push(watch);
    },
    /**
     * 脏值检测
     */
    $digest: function () {
        var ttl = 10;
        var dirty;
        do {
            dirty = this.$$digestOnce();
            if(dirty && !(ttl--)) {
                throw '10 digest iterations reached';
            }
        } while (dirty)
    },
    $$digestOnce: function () {var dirty;
        this.$$watchers.forEach(function (watch) {
            var newValue = watch.watchFn();
            var oldValue = watch.last;
            if (newValue !== oldValue) {
                watch.listenerFn(newValue, oldValue);
                dirty = true;
                watch.last = newValue;
            }
        })
        return dirty;
    }
}


/**
 * 例子
 */
window.onload = function () {
    var $input = $('#input');
    var $content = $('#content');

    //Scope实例
    var $scope = new Scope();
    $scope.name = 'foo';


    /**
     * 添加一个观察者（Angular内部在指令编译过程中完成）
     */
    $scope.$watch(function () {
        return $scope.name;
    }, function (newValue, oldValue) {
        $input.val(newValue);
        $content.text(newValue);
        console.log(newValue)
    })

    /**
     * 执行脏值检测，视图更新
     * （Angular内部，当DOM ready之后，Angular启动，然后进行指令编译过程，指令编译完成之后执行$digest循环）
     */
    $scope.$digest();

    /**
     * 视图上更改input的值，更新数据并执行脏值检测
     */
    $input.on('input', listener);
    $input.on('change', listener);
    function listener(e) {
        $scope.name = $(e.target).val();
        $scope.$digest();
    }
}