代碼分離 - 在AngularJS

Question

我是很新的AngularJS所以請閱讀這個問題時，記住這一點......

我有一些功能，我想使全局可用到我的網站中的不同模塊，計劃是讓頁面以單頁面應用風格執行各自的功能（因此用戶列表/創建/修改應該是一個頁面，而產品列表/創建/修改將是另一個頁面）。我想要有一些共享邏輯，例如實用程序功能以及可以在不同頁面模塊之間共享的用戶授權。

這導致我的問題。

假設我將所有帳戶函數封裝在一個服務中（例如app.factory（'account，etc etc ...）），並將它們分離到它自己的JS文件中，最好是將它放在它自己的內部模塊以及使用依賴注入，像這樣：

var accountMod = angular.module('accountModule', ['dependencies']); 
accountMod.factory('account', ['dependencies', function (...) { }]); 

或者只是假定應用程序變量的名稱將永遠是應用程序，並表示它像這樣：

app.factory('account', ['dependencies', function (...) { }]); 

這些工作功能上都，但我試圖使用最佳實踐。第二個選項似乎有限，我從來沒有熱衷於假設變量是相同的名稱，對我來說依賴注入方法似乎更好，但我看到了很多這兩種風格的例子！

任何幫助非常感謝！

Answer 1

真的很好的問題。這裏有一些微妙的東西。 我認爲這將有助於使用下面的代碼，這是使用模塊。

var accountMod = angular.module('accountModule', ['dependencies']); 
accountMod.factory('account', ['dependencies', function (...) { }]); 

1. 然而，隨着角度提供商的幫助和添加模塊級的配置，我們可以嘲笑對象或服務。最終這會增加代碼的測試能力。
2. 如果在會計中有多個服務，那麼我寧願將它們在模塊內分組。

這些是我看待它的方面。如果你找到了，請添加更多。

謝謝。

Answer 2

只是我的代碼示例2美分。不建議 以下方法：

var accountMod = angular.module('accountModule', ['dependencies']); 
accountMod.factory('account', ['dependencies', function (...) { }]); 

最好的做法是隻具有每個文件1種成分，因此沒有必要定義一個變量。看看這個：https://github.com/johnpapa/angular-styleguide#definitions-aka-setters

如果你剛剛開始與Angular，我建議你通過其餘的約翰帕帕的風格指南。

Answer 3

我喜歡yeoman有角度的fullstack發電機的結構。

https://github.com/DaftMonk/generator-angular-fullstack

你可以看到每個模塊和組件是如何分離和內部，去工廠，服務指令等。並且他們的關聯測試每個功能都被分成一個文件。

這可能是對你的建議過度使用，你可以只採取角度的想法。