Angular 运行机制

Angular 模块

模块是用来组合相关组件、指令、服务等的一个功能块。可以理解为就是对一个应用所要用到的各个部分按照一定的规律进行归类，从而组成一个完整的应用。
Angular 模块可以通过 angular.module(name, requires) 方法生成：

• name: 模块的名字;
• requires: 模块的依赖列表（可以被注入到模块中的对象列表），因为 angular.module(name) 为获取此模块，所以，若该模块没有需要依赖的模块，此参数需设置为空数组[]。

angular.module(name) 相当于 AngularJS 模块的 getter 方法，用了获取对模块的引用。

使用模块的好处：

• 保持全局命名空间的清洁；
• 编写测试代码更容易，并能保持其清洁，以便更容易找到互相隔离的功能；
• 易于在不同应用间复用代码；
• 使应用能够以任意顺序加载代码的各个部分。

Angular 模块包含什么?

结构化 Angular 模块

建议把应用程序分解成多个模块:

• 服务模块：用于服务声明
• 指令模块：用于指令声明
• 过滤器模块：用于过滤器声明
• 应用层模块：该模块依赖于上述模块

这样分解的原因是，在测试中经常需要忽略初始化代码，这往往很难测试。通过把它放到一个单独的模块中在测试中很容易被忽略。通过只加载模块，测试也可以更加集中。

Module 的加载和依赖

加载

Module 的加载分为两个阶段：config 和 run。

• config：在模块加载阶段，AngularJS 会在 provider 注册和配置的过程中对模块进行配置。在整个 AngularJS 的工作流中，这个阶段是唯一能够在应用启动前进行修改的部分。只有 providers 和 constants，可以注入到 config 中。

AngularJS 会以这些函数的书写和注册顺序来执行它们，也就是说我们无法注入一个尚未注册的 provider（唯一例外的是 constant() 方法，这个方法总会在所有配置块之前被执行）。

angular.module('myApp', [])
.config(function ($provide) {

})

.config() 函数接收一个参数：configFunction， AngularJS在模块加载时会执行这个函数。

• run：在注入器创建之后被执行，它是所有 AngularJS 应用中第一个被执行的方法(与 main 方法概念最接近)。只有 instances 和 constants，可以注入到 run 中。通常用来注册全局的事件监听器。

angular.module('myApp', [])
.run(function ($rootScope， AuthService) {
  $rootScope.$on('$routeChangeStart', function (evt, next, current) {
    // 如果用户未登录
    if (!AuthService.userLoggedIn()) {
      if (next.templateUrl === 'login.html') {
        // 已经转向登录路由因此无需重定向
      } else {
        $loction.path('./login');
      }
    }
  });
});

.run() 函数接收一个参数：initializeFn， AngularJS在注入器创建后会执行这个函数。

依赖

一个模块可以列出它所要依赖的模块的列表，这些被依赖的模块需要在该模块加载前加载，也就是说，被依赖的模块的配置块要在该模块的配置块之前执行。每个模块只能加载一次，即使多个模块依赖它。

执行顺序

order.html

<div ng-controller="Ctrl">
    {{title}}
    <p>{{type | filter}}</p>
    <directive>{{text}}</directive>
    <p>{{type | filter}}</p>
</div>

order.js

(function () {
    angular.module('order', [])
        .controller('Ctrl', ['$scope', 'factory', 'service', function ($scope, factory, service) {
            $scope.title = '顺序检测';
            $scope.text = 'text';
            $scope.con = function () {
                console.log('click')
            };
            console.log('controller-------8');
            factory();
            service.service();
        }])
        .factory('factory', function () {
            console.log('factory-------6');
            return function () {
                console.log('factory-fn-------9');
            }
        })
        .service('service', function () {
            console.log('service-------7');
            this.service = function () {
                console.log('service-fn-------10');
            }
        }).filter('filter', function () {
            console.log('filter-------3');
            return function () {
                console.log('filter-fn-------13');
            }
        }).config(function () {
            console.log('config-------1');
        }).run(function () {
            console.log('run-------2');
        }).directive('directive', function () {
            console.log('directive-------4')
            return {
                restrict: 'E',
                compile: function () {
                    console.log('directive-compile-------5');
                    return {
                        pre: function preLink () {
                            console.log('compile-preLink-------11')
                        },
                        post: function postLink() {
                            console.log('compile-postLink-------12')
                        }
                    }
                },
                link: function () {
                    console.log('directive-link');//有compile时不执行
                }
            }
        })
})();

参考文章：
https://github.com/angular/angular.js/blob/ce669edfa14dc7eb7c389d2f82c9c98399a9009b/docs/content/guide/module.ngdoc