15

在使用 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 中。
    我最喜欢这个解决方案。

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

4

1 回答 1

15

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

以下是您实际尝试遵守的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

我希望这会有所帮助。

于 2014-03-22T16:18:00.153 回答