iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 5
1
Modern Web

Angular 8 從推坑到放棄系列 第 5

[Day 04 ]為中大型的Angular專案設計專案結構

最近有一個新專案要用 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

上一篇
[Day 03] 終於要開始寫 Angular了
下一篇
[Day 05] Angular 是如何運作的
系列文
Angular 8 從推坑到放棄30

尚未有邦友留言

立即登入留言