AngularJS：最佳实践

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在所有情况下都提供有意义的错误反馈。

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

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