如何在 AngularJS 中声明子模块

Posted 2023-02-22

【中文标题】如何在 AngularJS 中声明子模块

【英文标题】：How to declare sub-modules in AngularJS

【发布时间】：2014-04-30 01:21:33

【问题描述】：

在使用 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', [/*some dependencies could go here*/]); 我发现这个想法比前一个想法

更好

，但是我不喜欢那个模块声明在目录 X 之外。 在目录 X/ 我创建文件 main.js 并将模块 X 的声明放入其中。在目录 X/ 中的其他文件之前，我必须小心将此文件包含在 index.html 中。 我喜欢这个

最好的

解决方案。

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

【参考方案1】：

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

这是您实际尝试遵守的best practice recommendations from Google。 :) 此外，不按工件分隔文件对您（如 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

我希望这会有所帮助。