AngularJS項目結構

Question

對於構建我正在開發的項目的最佳方式，我真的很希望能夠成爲AngularJS的新成員。

基本上，我有一個項目，我打算在'PEAN'堆棧中說每一個（Postgres，Express，AngularJS，Node），並且需要一個關於它應該如何構造的概念。

它的要點是，應用程序將有4種類型的用戶帳戶，每個登錄用戶將看到不同的視圖。下面是功能集的簡圖：

用戶類型1：
導航
- 功能1
- 功能2
- 功能3

用戶類型2：
導航
- 功能1
- 功能2
- 功能3

等了其他2位用戶...

然而，每個用戶使用的功能會有所不同。所以我的問題仍然存在，客戶端如何將客戶端AngularJS應用程序的目錄結構化？

另外，應該如何設置存儲庫？

1. API和客戶端代碼的單個回購？
2. 我可以分開API回購和客戶端回購，並在一個客戶端回購中包含所有用戶帳戶視圖？
3. 我應該爲每種類型的用戶帳戶都有一個客戶端回購？

回答這些問題會清除很多混亂，並會大大幫助我。我已經對這樣的應用程序的正確結構進行了大量研究，似乎無法弄清楚。

提前非常感謝您的協助！

Answer 1

我不能說你的項目的架構，但我已經有了MEAN堆棧項目的結構體驗（或者在這種情況下是PEAN）。

在這種情況下，我不會將您的項目分成多個回購，讓您的所有代碼都在一個地方是有幫助的。只要它們一起運行，它應該保持在相同的回購。你應該分開回購時，你的項目沒有一起運行，並且確實是兩個項目（如iOS應用程序和Web應用程序）

我的基本文件結構通常是這樣的：

. 
+-- app/ (all of your angular, dynamic web app code) 
| +-- controllers/ 
| +-- directives/ 
| +-- factories/ 
| +-- views/ 
| +-- templates/ 
| +-- app.js 
+-- server/ (all of your nodejs, server side code) 
| +-- controllers/ 
| +-- models/ 
| +-- routes/ 
+-- public/ (static assets) 
| +-- css/ 
| +-- scripts/ 
| +-- images/ 
+-- index.js (run the project) 

Answer 2

我建議你去這裏：https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md並按照這裏列出的準則。這有點過時了，因爲它沒有被更新爲覆蓋組件，但大部分仍然適用。

我還建議您在開始之前跳過控制器並查看組件。

實際上，如果您有選擇，因爲您剛剛開始使用，所以在使用Angular 4時，我會長期努力，而不是在傳統技術中構建新應用程序。

Answer 3

文件夾結構因項目而異，因爲人們是不同的項目，具有不同的性質。 但是，不管你做什麼，你最終會與一些東西約的文件夾結構如下圖所示： -

• 您將需要兩個根文件夾，一個用於服務器代碼和其它客戶端代碼。客戶端代碼文件夾有時也被命名爲「app」。

• 如果你有一個大項目，然後在客戶端文件夾裏面，你可以創建代表你的項目模塊的子文件夾。通常情況下，開發人員會將模塊劃分爲更好的模塊，以便這些子文件夾代表這些模塊。

• 在這些模塊文件夾中，您可以爲組件，模型，模塊和路由設置單獨的文件夾。

• 還需要一個常用文件夾，在這裏您可以推送普通管道，過濾器，http組件，注射器等常用工具。 服務器文件夾將具有自己的文件夾結構，具體取決於您是在執行ASP.NET還是JSP還是PHP。在這個討論中，我們將僅限於客戶端角文件夾結構。

圖片提供：http://computerauthor.blogspot.in/2017/11/what-is-best-project-folder-structure.html