Question

我不认为这个问题被认为是基于意见的，因为它询问最佳实践，但同时我也不认为AngularJS的最佳实践有任何行业标准，所以在某些情况下很难避免意见。在其他情况下，一种编程方式明显优于另一种方式。我不确定这个问题属于哪个类别。

我认为没有任何官方 AngularJS最佳做法。有指导方针，有些人已经发布了自己的最佳实践，但我没有偶然发现行业标准。

我对如何组织模块和代码本身有疑问。感觉就像我有很多小文件和太多文件夹，即使我已经将应用程序分解为常见组件和核心功能。它仍然是一个相对较小的应用程序，但它可能会增长。

我遇到的最大问题是如何组织我的子模块。目前，每个子模块被分解为各种文件，分离控制器，指令和服务。我想知道我是否应该在一个文件中定义它们，然后如果子模块太大，再次将其分解。

例如，现在我有一个模块 app.buttonToggle ，包含各种文件：

buttonToggle.app.js

angular.module('app.buttonToggle', []);

buttonToggleCtrl.js

angular.module('app.buttonToggle').controller('ButtonToggleCtrl', ButtonToggleCtrl);

function ButtonToggleCtrl() ...
...

buttonToggle.js

angular.module('app.buttonToggle').directive('buttonToggle', buttonToggle);

function buttonToggle() ...
...

相反，将它们组合成一个文件会更好吗？

buttonToggle.app.js

angular.module('app.buttonToggle', [])

    .controller('ButtonToggleCtrl', function() { ... })

    .directive('buttonToggle', function() { ... });

如果有的话，做后者有什么好处？我喜欢它如何使用更少的代码，但是它更难测试吗？

Answer 1

我建议使用John Papa的风格指南 - 这是我用来帮助做出这些决定并跟上并可能为最佳实践做出贡献的方法。它将帮助您解决此问题。这些风格指南正变得非常受欢迎，可以帮助您解决问题。

在这种情况下，社区同意每个文件应该有一个组件，并使用像gulp或grunt这样的任务运行器打包发货。

Answer 2

这里的主要好处

angular.module('app.buttonToggle').controller('ButtonToggleCtrl', ButtonToggleCtrl);

是（由于JS提升）控制器构造函数可以以可读的方式注释，例如

ButtonToggleCtrl.$inject = ['...'];
function ButtonToggleCtrl(...) {

使用自动注释时不会出现问题。

调试命名函数而不是匿名函数也更方便一些，尽管Angular在所有情况下都会对错误提供有意义的反馈。

如果有的话，做后者有什么好处？我喜欢它使用较少的代码，但是更难测试吗？

不是。所有模块组件都可以单独测试，无论它们是如何定义的，只要它们的定义不包含语法错误。