Angular入門到精通系列教程（11）- 模組(NgModule)，延遲載入模組

Jack Niu發表於2021-01-25
Angular

環境:

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

1. 摘要

模組(NgModule)是Angular的核心概念之一。模組(NgModule)用於組織業務程式碼，按照自己的業務場景，把元件、服務、路由打包到模組裡面。

模組(NgModule)的主要作用：

  1. NgModule 組織業務程式碼，開發者可以利用 NgModule 把關係比較緊密的元件組織到一起。
  2. NgModule 用來控制元件、指令、管道等的可見性，處於同一個NgModule 裡面的元件預設互相可見，而對於外部的元件來說，只能看到NgModule 匯出（exports）的內容。這樣就實現了封裝，只暴露希望暴露的元件、服務給呼叫者。
  3. NgModule 是 @angular/cli 打包的最小單位。打包的時候，@angular/cli 會檢查所有 @NgModule 和路由配置，如果你配置了非同步模組，cli 會自動把模組切分成獨立的 chunk（塊）。在 Angular 裡面，打包和切分的動作是 @angular/cli 自動處理的，不需要你干預。當然，如果需要，你也可以修改angular的編譯配置，基於Webpack 配一個環境出來，自定義打包規則。
  4. NgModule 是 Router 進行非同步載入的最小單位，Router 能載入的最小單位是模組，而不是元件。當然，也可以一個模組裡面只放一個元件是。

2. NgModule舉例、說明

前文說過，Angular中任何的Component、service，都必須屬於一個NgModule。所以，使用AngularCLI生成的框架程式，自動生成的元件，也是屬於一個Component的，並且標記為啟動模組。
這樣，angular站點啟動後，會以這個模組為入口，根據配置載入各個模組。

下面以預設生成的啟動模組為例，進行解釋：

@NgModule({
  declarations: [
    AppComponent,
    MyComponentComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
  • declarations，用來放元件、指令、管道的宣告；
  • imports，用來匯入外部模組。比如當前模組需要呼叫其他模組的元件，需要加入到這裡。比如上面例子，匯入了Browser和Routing 2個模組。
  • providers，需要使用的第三方或者其他模組的Service 都放在這裡；
  • bootstrap，定義啟動元件。 一個可以啟動的Angular專案（如果只是一個Library除外），需要定義一個啟動元件。
  • exports, 宣告的元件、指令和管道可以在匯入了本模組的模組下任何元件的模板中使用。 匯出的這些可宣告物件就是該模組的公共 API。換句話說，其他模組想用本模組中定義的內容，需要在這裡宣告。
  • entryComponents， 如果其他模組想要動態載入本模組中的元件到檢視中， 那麼，這些元件需要寫入entryComponents。

3. Angular CLI生成模組

AngularCLI是一個很好很強大的工具集，可以幫助我們生成很多基礎程式碼、檔案， 包括建立一個模組，並且可以制定引數。

ng generate module <name> [options]

詳情參考https://angular.io/cli/generate#module。

幾個簡單的例子：

  1. 建立feature1模組： ng generate module feature1
  2. 建立feature2模組， 並且帶路由：ng generate module feature2 --routing
  3. 建立一個延遲載入的feature3模組(延遲載入模組，參考下面章節)： ng generate module feature3 --route feature3 --module app.module

說明： ng generate module xxx 可以簡寫為 ng g m xxx

4. 延遲載入模組

延遲載入使得應用程式在啟動時不被載入，而是結合路由配置，在需要時才動態載入相應模組。這樣 Angular 就不需要在第一個介面從伺服器下載所有的檔案，直到請求它，才下載相應的模組。這對提供效能和減少首屏的初始下載檔案尺寸有巨大的幫助，而且它可以很容易設定。

舉例來說，上文建立了3個模組，主程式模組以及feature1、feature2會被打成一個包（js），feature3會被單獨打一個包（js），當使用者訪問/feature3/* 的地址後，才會載入feature3這個包（js），否則永遠不會請求、載入feature3的模組，從而提高效能（首頁載入時間）。當一個專案大到一定程度時，最好考慮把某些模組設定為延遲載入模組。

延遲載入的路由定義（angular CLI會自動生成）：

// src/app/app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: 'feature3',
    loadChildren: () =>
      import('./feature3/feature3.module').then((m) => m.Feature3Module),
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

最後複習一下生成延遲載入模組的命令ng generate module feature3 --route feature3 --module app.module，或者簡寫為 ng g m feature3 --route feature3 --module app.module。

5. 總結

  1. Angular專案，就是模組（NgModule）的一個集合，任元件、服務等必須包含在一個模組中。
  2. 延遲載入模組用於提高首頁載入效能。
  3. Angular CLI命令，生成模組。



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






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

相關文章