javascript - 如何在 AngularJS 中声明子模块

Question

在使用 AngularJS 处理大型项目时，我发现我喜欢按功能组织代码。
这意味着当我有一些可识别的功能 X(特别是如果它是可重用的)时，我创建目录 X 并将属于该功能的所有 Controller 、服务和其他部分放入其中。我还声明了一个名为 X 的新模块，并将目录 X 中的所有内容分配给该模块。

目录结构 看起来像这样:

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

在app.js中有一个主模块声明:

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

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

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

我不确定该怎么做的是在哪里声明模块“X”？

我的一些想法:

• 我可以在其中一个 Controller /服务/...中声明它并在其他 Controller 等中获取它，但这听起来不对，因为我没有看到任何逻辑如何选择该 Controller /服务/...除其他外，然后我必须注意将它包含在其他人之前的 index.html 中。我觉得这个想法不好。
• 我可以在 app.js 中声明，所以 app.js 现在看起来像
  angular.module('myApp', ['X']);
angular.module('X', [/*一些依赖项可以放在这里*/]);
  我发现这个想法比前一个想法更好，但是我不喜欢模块声明在目录 X 之外。
• 在目录 X/中，我创建文件 main.js 并将模块 X 的声明放入其中。我必须小心地将此文件包含在目录 X/中的其他文件之前的 index.html 中。
  我最喜欢这个解决方案最好。

有没有更好的方法来做到这一点？

Answer 1

是的。第三个选项是最佳 解决方案。第一种选择肯定会让颈部疼痛。第二个选项在主应用程序中添加了模块 X 的依赖项，这是不可取的。您会希望您的模块是独立的。所以第三个选项是最好的解决方案。

这是 best practice recommendations from Google你实际上是在努力坚持。 :) 此外，不按工件分隔文件对您也很好(正如 Google 的最佳实践所建议的那样)，这意味着您不需要 Controller 、指令等目录结构，如下所示。另请注意，组件中的部分、CSS 甚至测试都包含在 component/module 目录中。因此，该模块是完全包含且独立的，这有助于可重用性:

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

希望对您有所帮助。