javascript - 你如何确保 Angular 模块依赖关系得到解决？

Question

Angular 关于模块的文档 ( http://docs-angularjs-org-dev.appspot.com/guide/module ) 说:

Dependencies

Modules can list other modules as their dependencies.Depending on a module implies that required module needs to be loadedbefore the requiring module is loaded. In other words theconfiguration blocks of the required modules execute before theconfiguration blocks or the requiring module. The same is true for therun blocks. Each module can only be loaded once, even if multipleother modules require it.

我创建了这个示例 ( http://jsbin.com/IRogUxA/34/edit )，它创建了一个依赖于两个“中级”模块的 Controller 模块，每个模块都依赖于两个“低级”模块。所以，我有两个“中级”模块和四个“低级”模块。

显然，顺序在 JS 源代码中无关紧要。在上面的示例中，我在它们引用的低级模块之前定义了高级模块。我知道 Angular 使用依赖注入(inject)来连接依赖关系，但它这样做的方式对我来说很神秘。

我的问题:如何确保各个模块的配置 block 以正确的顺序运行？或者更广泛地说，当 Angular 以我选择的任何顺序(在 JS 源代码中)定义它们时，Angular 如何解析我的所有依赖项？

Answer 1

所有 Angular 模块 API 方法，例如“config”、“factory”等，都包含在“invokeLater”函数中。换句话说，当依赖模块被评估时，module.config、module.factory 等在那个时候并没有真正被调用。相反，这些调用只是被插入队列。

考虑这个例子:

    var demo = angular.module('demo', ['module1']);
demo.config( function( ) {
            console.log("In app.config")
} ).run(function(){
    console.log("Angular run");
});

angular.module("module1", []).factory('myservice', function(){
    return {};
}).controller('mycontroller', function(){} );

对于每个模块，它都有自己的队列:(对于主模块“demo”)

var invokeQueue = [];
invokeQueue.push("demo.config", xxx);
invokeQueue.push("demo.run", xxx);

对于模块 1:

var invokeQueue = [];
invokeQueue.push("module.factory", xxx);
invokeQueue.push("module.controller", xxx);

一旦加载了所有脚本并触发了 DOMContentLoaded 事件，angular 开始实际加载/评估所有模块。此时angular已经构建了完整的模块依赖树。依赖模块总是在主模块之前首先加载，所以在这种情况下，module1 将首先加载，它的 invokeQueue 以原始顺序调用(module.factory，module.controller 等)。然后回到主模块demo的invokeQueue、demo.config、demo.run