如何在AngularJS中声明子模块

Question

在使用AngularJS进行大型项目开发时，我发现我喜欢按功能组织代码。
这意味着当我有一些可识别的功能X（特别是可重用的功能）时，我会创建一个名为X的目录，并将所有属于该功能的控制器、服务和其他部分都放到这个目录中。我还声明了一个名为X的新模块，并将目录X中的所有内容分配给该模块。

目录结构看起来可能像这样：

scripts/
  app.js
  controllers/
  services/
  directives/
  filters/
  X/
    controllers/
    services/
    directives/
    filters/

在 app.js 文件中，有一个主模块的声明：

angular.module('myApp', ['X']);

X/中的所有控制器等都属于模块“X”，这意味着我在这些文件中像这样获取模块“X”：

var X = angular.module('X');

我不确定应该在哪里声明模块'X'？

以下是我的一些想法：

• 我可以在一个控制器/服务等中声明它，并在其他控制器中获取它，但是这样做似乎不太合适，因为我不知道如何从其他控制器/服务等中选取它，而且还必须在index.html中将其包含在其他模块之前。我认为这个想法不好。
• 我可以将声明放在app.js中，这样app.js看起来像这样：
  angular.module('myApp', ['X']); angular.module('X', [/*一些依赖项可以放在这里*/]);
  我认为这个想法比之前那个更好，但我不喜欢模块声明位于X目录之外的情况。
• 在X/目录中创建文件main.js，并在其中放置模块X的声明。我必须小心地在index.html中将此文件包含在X/目录中的其他文件之前。
  我认为这个是最好的解决方案。

是否有更好的方法来做这件事？

- Martinsos

Answer 1

是的，第三种选择是最佳解决方案。第一种选择肯定会让你感到头疼。第二种选择在主应用程序中添加了模块X的依赖项，这是不可取的。您希望您的模块是自包含的。因此，第三种选择是最佳解决方案。

这是来自谷歌的最佳实践建议，你实际上正在尝试遵循它们。 :) 此外，根据Google的最佳实践建议，将文件按构件分离是不必要的，这意味着您不需要以下控制器、指令等目录结构。还请注意，部分文件、CSS和甚至测试都包含在组件/模块目录中。因此，该模块完全独立且独立，有助于重用：

sampleapp/ 
  app.css
  app.js                        
  app-controller.js
  app-controller_test.js
  components/
    bar/                                "bar" describes what the service does
      bar.js
      bar-service.js
      bar-service_test.js
      bar-partial.html
    foo/                                "foo" describes what the directive does
      foo.js
      foo-directive.js
      foo-directive_test.js
      foo-partial.html
  index.html

我希望这会有所帮助。

- dmahapatro