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在所有情況下都提供有意義的錯誤反饋。

如果有的話，做后者的好處是什么？ 我喜歡它如何使用更少的代碼，但是它更難測試？

事實並非如此。 只要它們的定義不包含語法錯誤，所有模塊組件都可以單獨測試，無論它們是如何定義的。