最近有一個新專案要用 Angular 開發，因為之前開發的都是以傳統C# mvc為主．
一看到透過Angular CLI產出的 Project ，除了許多檔案不知道用途是什麼外．
更不清楚要加 components 以及module等元件要從哪個方向長，
除了參考官方網站外，還參考了國內外 Angular 大師的 Blog 及一些 GitHub 專案，
整理成這篇 Angular File Structure．
以下的專案結構是以中大型專案的角度做規劃。

Angular 專案結構

• app
  • shared (共用的東西(多國語系、SignalR、Dialog等)都放這，或者不會被路由開啟的 component)
    • components
      • log
      • loading-dialog
      • i-frame
    • enums
    • http-interceptors (專案Http全域攔截器)
      • error.interceptor.ts
      • index.ts
    • services
      • signalr.service.ts
      • language.service.ts
    • models
      • api-request.model.ts
    • definitions
      • api-return-code.definitions.ts
    • guards
      • permissions.guard.ts
  • market-management
    • components
      • operation-console
        • operation.component.html
        • operation.component.spec.ts
        • operation.component.ts
    • services
      • market-management.service.ts
    • models
    • market-management-routing.module.ts (每個modeul有自己的路由定義)
    • market-management.module.ts (每個modeul load自己需要的component以方便隔離不同的module)
  • system-management
    • (Similar with "market-management")
  • report
    • (Similar with "market-management")
• assest
  • i18n
  • images
  • themes
• environments
  • environment.prod.ts
  • environment.test.ts
  • environment.ts

Workspace configuration files

• e2e(E2E 測試 （End-to-End Testing） 的程式碼要擺放的位置)
• src(主要在開發的所有程式碼都會放在這裡，請參考上方 Gist)
• .editorconfig(幫助開發人員在不同的編輯器和 IDE 之間更容易定義與維護一致的編碼樣式。)
• angular.json(Angular CLI 的設定檔)
• browserslist(會根據此檔案的設定來加上 CSS 的前綴，如果要支援 IE 9–11)
• karma.conf.js(Karma 的設定檔)
• package.json(應用程式名稱、版本、描述、腳本等其他，相依套件dependencies 是以套件名稱和版本號組成)
• tsconfig.json(TypeScript 編譯時使用的設定檔)
• tslint.json(TSLint 的設定檔)

src

• app/ (整個網頁應用程式的 Module、Component、Service 等等都放在這)
• assets(資源檔，用來放images、多國語系…等)
• environments(環境設定)
• favicon.ico(網站圖示)
• index.html(起始頁面)
• main.ts (Angular bootstrap 的程式進入點)
• polyfills.ts(要符合 IE 或舊版瀏覽器時須做設定)
• styles.scss(整個網頁應用程式共用的scss設定檔)
• test.ts (test 的程式進入點)

後記

在研究完 Angular 的專案結構後，發現還是有很多東西需要學(e2e Test、UnitTest…等)，其實學Angular會讓人有些害怕的原因是因為它一個專案起起來非常的大包，

裡面很多的東西它的功能很多都不知道(至少我是這樣)，不像Vue以及React是一個libary非常的單純，但也因為一開始專案就很嚴謹的關係，相對於其他框架來說不容易寫歪，之後比較不用煩惱加libray(預設的library可以滿足七成的需求)以及整合UnitTest 等等的問題。

參考

1. Workspace and project file structure
2. Angular 4 File Structure
3. Angular Folder Structure