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 /中的所有控制器等属于模块＆＃39; X＆＃39;，这意味着我获取模块＆＃39; X＆＃39;在这些文件中像这样：

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

我不知道该怎么办才能宣布模块＆＃39; X＆＃39;

我有一些想法：

我可以在其中一个控制器/服务/ ...中声明它并在其他控制器等中获取它但这听起来不对，因为我没有看到任何逻辑如何选择该控制器/服务/ ...除此之外，我还需要注意将它包含在index.html之前。我发现这个想法糟糕。
我可以在app.js中声明，所以app.js现在看起来像是 angular.module('myApp', ['X']); angular.module('X', [/*some dependencies could go here*/]);
我发现这个想法更好比前一个好，但是我不喜欢那个模块声明在目录X之外。
在目录X / I中创建文件main.js并将模块X的声明放入其中。我必须小心在index.html中将此文件包含在目录X /中的其他文件之前我喜欢这个解决方案最好。

有没有更好的方法呢？

Answer 1

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

以下是您实际上要遵守的best practice recommendations from Google。 :)此外，对于您（如Google的最佳实践所建议的），不要通过工件分隔文件也很好，这意味着您不需要控制器，指令等dir结构，如下所示。还要注意部分，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

我希望这会有所帮助。

如何在AngularJS中声明子模块

1 个答案: