angularjs - 如何正确地将 angularjs 模块 Controller /服务/等拆分为自己的文件？

Question

我见过一些项目将所有“片段”( Controller /服务/指令)保存在一个文件中的一个模块中。 angular-app是不是这样。

例子:

angular.module('myModule', ['depA', 'depB'])
  .controller('MyController', function() {})
  .service('myService', function() {});

但是，我过去曾在大型 Angular 项目中工作过，其中单个 Controller /服务/指令保存在自己的文件中。我喜欢将它们保存在自己的文件中以保持文件小以及其他原因的想法。现在的问题是我是负责将开始的部分和构建过程放在一起的人。之前我所要做的就是编写应用程序代码并遵循这些项目的标准。

为了正确地拥有单独的文件，我相信我必须拥有一个主模块文件。

例子:

// file 1
angular.module('myModule', ['depA', 'depB']);

// file 2
angular.module('myModule')
  .controller('MyController', function() {});

所以我的问题是，我需要什么文件加载顺序来确保发生？ 我只需要确保在文件 2 之前加载主模块文件(文件 1)吗？

这对我来说似乎很奇怪。如果还有一个服务文件附加到前面提到的模块并且 Controller 文件 2 已经加载，但服务文件还没有，那么 Angular 是否有可能调用该 Controller 文件，然后最终导致事情得到走出低谷，重新振作起来，重整旗鼓？

另外，如果您认为我处理此问题的方式错误，我很想听听您的建议。

Answer 1

模块加载顺序

只需确保 当您注册一个新模块时，当您的应用程序启动时，它的模块依赖项应该已经由浏览器加载。

所以任何时候你这样做:

    angular.module('myApp', ['dep1', 'dep2', 'dep3']);

带有 dep1 的文件, dep2 , 和 dep3应该在您的应用程序引导时已经加载。

如果您使用 <script>标签和自动引导(默认 Angular )然后是您的 <script> 的顺序标签应该无关紧要。但是，如果使用像 requirejs 这样的库，请确保在手动引导之前加载所有依赖项。

其他注意事项

只要您的模块以正确的顺序加载，那么..

无需担心 Controller 、指令、服务、工厂、提供者、常量或值的顺序

运行 block 的顺序可能很重要，因为它们与其他运行 block 相关，因为它们是按照它们注册的顺序(在特定模块内)执行的。

配置 block 的顺序可能很重要，因为它们与其他配置 block 相关，因为它们按照注册的顺序执行(在特定模块中)。

关于前两点，依赖的顺序(例如 ['dep1', 'dep2', 'dep3'] vs ['dep2', 'dep3', 'dep1'] )也会影响运行 block 和配置 block 的执行顺序。 Angular 将遍历依赖树两次，并按顺序执行所有配置 block ，然后是所有运行 block 。

Angular 使用 post-order traversal初始化模块及其相关的配置和运行 block 。因此，如果我们将模块依赖关系表示为树:



遍历顺序为 ACEDBHIGF