如何爲你的Angular項目定義一個高度可伸縮的文件夾結構

前言

本文中使用的實踐非常適合我的單個用例，因此絕對不應嚴格遵循。 項目的文件夾結構將根據多種因素而變化。 但是，如果您對着重於多模塊架構的結構感興趣，而又着重於擴展性，請繼續閱讀。

注意！ [+]表示文件夾中還有其他文件。

|-- app
     |-- modules
       |-- home
           |-- [+] components
           |-- [+] pages
           |-- home-routing.module.ts
           |-- home.module.ts
     |-- core
       |-- [+] authentication
       |-- [+] footer
       |-- [+] guards
       |-- [+] http
       |-- [+] interceptors
       |-- [+] mocks
       |-- [+] services
       |-- [+] header
       |-- core.module.ts
       |-- ensureModuleLoadedOnceGuard.ts
       |-- logger.service.ts
     |
     |-- shared
          |-- [+] components
          |-- [+] directives
          |-- [+] pipes
          |-- [+] models
     |
     |-- [+] configs
|-- assets
     |-- scss
          |-- [+] partials
          |-- _base.scss
          |-- styles.scss

Angular 風格指南

Angular的風格與語法中提供了基本的最佳實踐指南。 該指南提出了對語法，約定和應用程序結構的見解。

對我而言真正突出的關鍵準則是**“構建應用程序，以便您可以快速找到代碼”和“具有近期的實現視圖和長遠的眼光。 從小處着手，但請記住應用程序的前進方向”**。 這意味着不應該將自己鎖定在某一個特定的結構上，因爲它會根據項目而發生很大變化。

模塊（Modules）

|-- modules
       |-- home
           |-- components
           |-- pages
           |    |-- home
           |         |-- home.component.ts|html|scss|spec
           |
           |-- home-routing.module.ts
           |-- home.module.ts

Tom Crowley 在這個主題上有一篇非常有趣的文章，他從基本的Angular項目逐步拓展成一個較爲成熟穩定的文件夾結構。 我真的很喜歡爲 頁面（pages） 和 組件（components） 指定文件夾的模塊想法。 非常適合縮放，並且組件邏輯和頁面邏輯是分離的。

核心模塊（The Core Module）

CoreModule承擔根AppModule的角色，但不是由Angular在運行時引導的模塊。 CoreModule應該包含單例服務（通常是這種情況），通用組件，和其他每個應用程序只有一個實例的功能。 爲了防止將核心模塊重新導入其他地方，您還應該在覈心模塊的構造函數中爲其添加保護。

|-- core
       |-- [+] authentication
       |-- [+] footer
       |-- [+] guards
       |-- [+] http
       |-- [+] interceptors
       |-- [+] mocks
       |-- [+] services
       |-- [+] header
       |-- core.module.ts
       |-- ensureModuleLoadedOnceGuard.ts
       |-- logger.service.ts

文件夾authentication僅處理用戶的身份驗證週期（從登錄到註銷）。

|-- authentication
     |-- authentication.service.ts|spec.ts

footer和header文件夾包含全局組件文件，這些文件在整個應用程序中靜態使用。 這些文件將出現在應用程序的每個頁面上。

|-- header
     |-- header.component.ts|html|scss|spec.ts
|-- footer
     |-- footer.component.ts|html|scss|spec.ts

http文件夾處理來自應用程序http調用之類的內容。 api.service.ts文件，將所有通過應用程序運行的http調用保持在一個位置。 否則，該文件夾包含用於與不同API路由進行交互的文件夾。

|-- http
     |-- user
          |-- user.service.ts|spec.ts
     |-- api.service.ts|spec.ts

Angular 4.x引入了期待已久的用於處理HTTP請求的功能-HttpInterceptor接口。 這使我們能夠捕獲和修改API調用的請求（requests）和響應（response）。 interceptors文件夾是攔截器的集合。

|-- interceptors
       |-- api-prefix.interceptor.ts
       |-- error-handler.interceptor.ts
       |-- http.token.interceptor.ts

guards文件夾包含用來保護應用程序中不同路由的所有路由守衛（guards）。

|-- guards
     |-- auth.guard.ts
     |-- no-auth-guard.ts
     |-- admin-guard.ts 

模擬對於測試特別有用，但是也可以使用它們來檢索虛擬數據，直到建立後端爲止。 mocks文件夾包含應用程序的所有模擬文件。

|-- mocks
       |-- user.mock.ts

所有其他單例服務都放置在services文件夾中。

|-- services
     |-- srv1.service.ts|spec.ts
     |-- srv2.service.ts|spec.ts

共享模塊（The Shared Module）

SharedModule是所有共享組件，管道（pipes)/過濾器（filters）和服務（services）都應存放的地方。 當這些項目將被重用時，可以將其導入任何其他模塊中。 共享模塊不應與應用程序的其餘部分有任何依賴關係，因此不應依賴任何其他模塊。

|-- shared
     |-- [+] components
     |-- [+] directives
     |-- [+] pipes

components文件夾包含所有“共享”組件。例如 loaders和buttons組件，它們將會被其他多個組件使用。

|-- components
     |-- loader
          |-- loader.component.ts|html|scss|spec.ts
     |-- buttons
          |-- favorite-button
               |-- favorite-button.component.ts|html|scss|spec.ts
          |-- collapse-button
               |-- collapse-button.component.ts|html|scss|spec.ts

directives，pipes和models文件夾包含整個應用程序中使用的指令（directive），管道（pipe）和模型（model）。

|-- directives
      |-- auth.directive.ts|spec.ts
|-- pipes
     |-- capitalize.pipe.ts
     |-- safe.pipe.ts
|-- models
     |-- user.model.ts
     |-- server-response.ts

配置（Configs）

config文件夾包含應用程序設置和其他預定義值。

|-- configs
     |-- app-settings.config.ts
     |-- dt-norwegian.config.ts

樣式（Styling）

項目的全局樣式放置在assets下的scss文件夾中。

|-- scss
     |-- partials
          |-- _layout.vars.scss
          |-- _responsive.partial.scss
     |-- _base.scss
|-- styles.scss

scss文件夾僅包含一個文件夾-partials。 該文件夾下的文件可以被其他scss文件導入。

惰性加載（Lazy Loading）

應用程序使用惰性加載（lazy-loading），這意味着在用戶實際訪問路由之前不會加載該模塊。 通過使用“模塊（Modules）”部分中描述的結構，您可以輕鬆地在主應用程序路由文件中引用每個模塊。

總結

總之，在Angular中創建文件夾結構沒有藍圖。 結構將根據您正在從事的項目而發生很大變化。 本文介紹了使用多個模塊的顯式用例，這些模塊又分爲頁面和一組共享的組件。 但是這裏是一些具有扁平結構的github倉庫的鏈接：

• https://github.com/ngx-rocket/starter-kit/tree/master/src
• https://github.com/gothinkster/angular-realworld-example-app

聲明：本譯文僅供技術討論及推廣，若有侵權請及時聯繫，將會及時進行更正。