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

Question

我见过一些项目将所有“片段”（控制器/服务/指令）保存在一个文件中的一个模块中。 angular-app 就是这样。

示例：

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

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

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

示例：

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

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

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

这对我来说似乎很奇怪。如果还有一个服务文件附加到前面提到的模块并且控制器文件 2 已经加载，但服务文件还没有，那么 Angular 是否有可能调用该控制器文件，然后最终导致事情得到不正常？

另外，如果您认为我的处理方式有误，我很乐意听取您的建议。

Answer 1

模块加载顺序

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

所以任何时候你这样做：

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

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

如果您使用<script> 标签和自动bootstrapping（默认角度），那么<script> 标签的顺序应该无关紧要。但是，如果使用 requirejs 之类的库，请确保在手动引导之前加载所有依赖项。

其他注意事项

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

• 不用担心控制器、指令、服务、工厂的顺序>、提供者、常量或值

• run 块的顺序可能很重要，因为它们与其他运行块相关，因为它们按照注册的顺序执行（在特定模块中）。

• config 块的顺序可能很重要，因为它们与其他 config 块相关，因为它们按照注册的顺序执行（在一个特定的模块）。

关于前两点，依赖的顺序（例如['dep1', 'dep2', 'dep3'] vs ['dep2', 'dep3', 'dep1']）也会影响run块和config的执行顺序em> 块。 Angular 将遍历依赖树两次，并依次执行所有 config 块，然后是所有 run 块。

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

遍历顺序为ACEDBHIGF

Answer 2

我在我的项目中所做的是将开发环境中的所有内容分开，然后通过 gulp.js 进行编译（grunt 应该也可以）。虽然这是一个单独的主题，但这里有一个如何将 Angular 代码保存在不同文件中的示例。

主文件（必须先加载）可以如下。我们将定义我们的模块、控制器、指令、存储库或其他任何东西。我们称之为 app.js：

// AngularJS Application File

var example = angular.module(
    // ngApp name
    'example',

    // Default Dependencies
    [
        'exampleControllers',
        'exampleRepositories',
        'exampleDirectives'
    ]
);

var exampleControllers = angular.module('exampleControllers', []);
var exampleRepositories = angular.module('exampleRepositories', []);
var exampleDirectives = angular.module('exampleDirectives', []);

现在，我们可以从后面的任何 javascript 文件中访问这个 exampleControllers、exampleRepositories 和 exampleDirectives。

controllers.js 文件。

exampleControllers
  // Main Controller
  .controller('MainController',
    [
      '$scope',
      '$log',
      function ($scope, $log) {
        $scope.hello = 'Hello World';
      }
    ]
  )
  // Sub Page Controller
  .controller('SubPageController',
    [
      '$scope',
      'someService',
      '$log',
      function ($scope, sService, $log) {
        $log.info($scope.hello);
      }
    ]
  );

另一个控制器.js 文件：

exampleControllers
  // Another Controller
  .controller('AnotherController',
    [
      '$scope',
      '$log',
      function ($scope, $log) {
        $scope.helloagain = 'Hello World, from another controller';
      }
    ]
  )

等等.. 只需确保首先加载您的 app.js 文件，以便示例 变量可用。

我肯定会阅读 gulp.js (http://gulpjs.com/)。自动化工作流程非常棒。