Question

我一直在遇到关于AngularJS应用程序的模块声明顺序的不一致行为。在我当前的机器上，以下两个模块声明命令都工作，而在我同事的机器上，只有第二个命令编译时没有依赖错误。

第一顺序[呼吸第一]

这里模块以第一种方式声明，即声明父模块，然后在下面声明依赖关系。这种声明模块的方式让人联想到解释器加载Python模块的方式，或Java类加载导入的方式。

(function() {
    angular.module('app.services', [
        'app.services.data',
        'app.services.nav',
        'app.services.session'
    ]);
})();

(function(){
  angular.module("app.services.data", []);
})();

二阶[深度优先]

这里以深度优先的方式声明模块，在文件中较早的依赖关系树中放置更深层的依赖关系，以便在将它们作为更高级别模块的依赖关系加载时已声明这些子依赖关系。这种方式是JavaScript变量排序声明的典型方式。变量A在声明之前不能使用B.

(function(){
  angular.module("app.services.data", []);
})();

(function() {
    angular.module('app.services', [
        'app.services.data',
        'app.services.nav',
        'app.services.session'
    ]);
})();

所以现在我的问题是：为什么这种行为因机器而异？我目前的机器是Ubuntu 14.04 64位，配备Intel Core i5-3230M处理器，浏览器是Chrome 51.03，而我的同事的机器是一台Windows 10机器，配备英特尔酷睿i5-4570k和Chrome 51.03作为他的浏览器。我们都使用相同的源代码，相同的编译脚本（gulp）和相同的依赖项（angular ^ 1.5.0）。

如果你也知道如何在我的gulpfile中确保正确的依赖顺序，而不必逐个手动排序，那么

奖励积分。

Answer 1

JS模块可以自动维护正确的文件加载顺序。如果＆＃39;编译脚本＆＃39;只是Gulp concat，它使这成为一个挑战，需要明确指定文件顺序。

如果按字母顺序加载文件，则无法正常工作。我建议坚持使用适当的工具（Webpack / Browserify）。 JS模块不能替代Angular模块，而是赞美它们。

如果应用程序非常模块化（每个文件/单元一个模块）并且angular.module('...')被禁止使用，即使对于连接构建，问题也不复存在。这种方法对于OOP设计非常有用，并且每个文件都有一个类别＆＃39;约定。

AngularJS模块声明命令

1 个答案: