環境:

• Angular CLI: 11.0.6
• Angular: 11.0.7
• Node: 12.18.3
• npm : 6.14.6
• IDE: Visual Studio Code

1. 概要

實際的Angular項目，肯定不是一個簡單的Hello World程序，會包含很多的功能，很多的文件。那么如何更好的組織這些文件呢？官方給了一個原則，可以供參考：
https://angular.io/guide/styleguide#application-structure-and-ngmodules。
下面，我們來通過一個例子具體解釋一下。

2. 目錄結構（工程結構）推薦

2.1. 總的原則

1. 基于Angular CLI創建模塊（module），組件（component）等等的內容；
2. 源代碼都放到src 文件夾下；
3. 應用的根目錄創建一個 NgModule, 并命名為app.module.ts（例如 /src/app，這個Angular CLI 會自動幫我們做)
4. 組件具有多個伴生文件 (.ts、.html、.css 和 .spec)，建議為它創建一個文件夾;(Angular CLI 會自動幫我們做)
5. 為每一組功能（特性區）創建一個模塊（NgModule）；（這個也方便我們應用惰性加載/延遲加載，預加載）
6. 在 src/app/shared 目錄中創建名叫 SharedModule 的共享模塊，方便其他功能調用；

2.2. 實例

src/ 目錄下：
+---app
|   |   app-routing.module.ts
|   |   app.component.css
|   |   app.component.html
|   |   app.component.spec.ts
|   |   app.component.ts
|   |   app.module.ts
|   |   
|   +---feature1
|   |   |   ......
|   |           
|   +---feature1
|   |   |   ......
|   |           
|   +---core
|   |   |   core.module.ts
|   |   |   ....
|   |           
|   \---shared
|       |   shared.module.ts
|       |   
|       +---components
|       +---pipes
|       +---services
|               
+---assets
|       .gitkeep
|       
\---environments
        environment.prod.ts
        environment.ts

說明：

1. 根目錄下的NgModule 默認是 app.module.ts, 不要改名，方便閱讀
2. app 下，每個目錄，同時也都是一個模塊-NgModule
3. 一個項目，一般包含多個功能（feature）模塊
4. 推薦使用共享模塊-SharedModule，將通用的、功能的功能（service/component/pipe等）放到改模塊中。 （下文詳細介紹）
5. 推薦使用核心模塊-CoreModule，可以將項目的一些全局的設置、UI等放到該模塊。如header、footer組件，安全組件（服務），上下文存儲服務等。

2.3. 共享模塊-SharedModule

上文提到，推薦使用共享模塊-SharedModule，將通用的、功能的功能（service/component/pipe等）放到改模塊中。具體存放內容包括：

1. 共享模塊中聲明那些可能被特性模塊引用的可復用組件(Component)、指令(Directive)和管道(Pipe)。
2. 如果放置服務（Service），由于服務的單例特性，共享模塊中只建議放置無狀態的服務（Service），對于有狀態、或者和業務緊密相關的服務，建議放到CoreModule中。
3. SharedModule 中聲明(declarations)和導出(exports)所有組件、指令和管道，方便其他模塊調用
4. 共享模塊（SharedModule）在項目中處于底層，從邏輯上，只能由其他業務邏輯模塊調用，不能調用其他模塊；
5. 共享模塊（SharedModule）不建議使用延遲加載（惰性加載），因為這樣會破壞服務的單例特性；

3. 高級應用 - angular庫、工作空間（workspace ）

想一想你是如何安裝angular相關的類庫的？我們使用的是npm install xxx。那么這些第三方angular庫是如何開發的呢？我們是否可以把通用的內容寫成Angular類庫，然后方便在多個angular項目間共享了？又或者直接發布到官方npm站點？

Angular 從6.0開始，引入了工作區的概念。使用Angular CLI，默認創建的就是一個工作空間(workspace)。一個工作空間(workspace)可以有一個主項目，同時可以有多個子項目。當然這些子項目可以是angular的application， 也可以是Library。Angular的子項目，都在app下的projects 之下，和src目錄平級。

這樣，一般來說，我們的項目中，除了主程序，還可以包含多個子類庫。這樣在開發時方便主程序、類庫同時開發調試；也可以項目結束后，單獨發布類庫，實現項目之間的代碼共享。

創建子項目也很簡單，子項目有2種類型，application（可以啟動的）和Library（Angular類庫），默認都在projects文件夾下：

1. 創建子Applicaton

ng generate application <name> [options]

2. 創建子類庫（Angular Library)

ng generate library <name> [options]

3.1. 目錄結構示意

+---projects
|   \---ng-lib-a
|       \---src
|           \---lib
|   \---ng-lib-b
|       \---src
|           \---lib
\---src
    +---app
    |   +---feature1
    |   +---feature2
    |   +---core
    |   |   +---footer
    |   |   \---header
    |   \---shared
    |       +---components
    |       +---pipes
    |       \---services
    +---assets
    \---environments

4. 總結

1. Angular CLI默認創建的Angular項目，實際是一個工作空間（workspace ），在其內部還可以創建多個子項目
2. 子項目可以是Application，也可以是類庫（Library）；
3. 對于主項目（一般來說是一個Application），以功能模塊的方式進行組織；
4. 公共內容，建議放到共享模塊-SharedModule中。
5. 對于功能模塊，可以通過惰性加載（延遲）加載，提高首頁加載速度；同時通過預加載技術，可以在空閑時間加載這部分模塊，使用戶體驗更好。

---------------- END ----------------

======================