Question

我已经看到一些项目保留所有＆＃34;件＆＃34; （控制器/服务/指令）到一个文件中的模块。 angular-app就是这样。

示例：

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

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

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

示例：

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

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

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

这对我来说很奇怪。如果还有一个服务文件附加到前面提到的模块并且控制器文件2已经加载，但是服务文件还没有，那么角度是否可以调用该控制器文件然后最终让事情摆脱困境？

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

Answer 1

模块加载顺序

在应用程序引导时，只需确保注册新模块时，它应该已经由浏览器加载了模块依赖项。

所以，只要你这样做：

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

应用程序启动时，应该已经加载了dep1，dep2和dep3的文件。

如果您使用<script>代码和自动引导（角度默认值），那么<script>代码的顺序就不重要了。但是，如果使用像requirejs这样的库，请确保在手动引导之前加载所有依赖项。

其他注意事项

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

无需担心控制器，指令，服务，工厂，提供商，常量或值

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

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

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

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

module tree

遍历顺序为 ACEDBHIGF

Answer 2

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

主文件（必须先加载）可能如下所示。我们将定义我们的模块，控制器，指令，存储库或其他任何东西。我们称之为 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);
      }
    ]
  );

anothercontroller.js 文件：

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

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

我肯定会读到gulp.js（http://gulpjs.com/）。它非常适合自动化工作流程。

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

2 个答案:

模块加载顺序

其他注意事项