NgModule 模塊是Angular中一個重要的點，因為Angular的基本構(gòu)造塊就是NgModule。本篇文章就來帶大家了解一下Angular中的NgModule模塊，希望對大家有所幫助！

前端（vue）入門到精通課程：進入學(xué)習(xí)

NgModule 會把相關(guān)的代碼收集到一些功能集中，形成功能單元。在使用Angular CL 命令新建一個項目的時候，會給我們生成一個根模塊，命名為 AppModule，根模塊有一個根組件AppComponent，引導(dǎo)這個根模塊就可以啟動應(yīng)用。Angular 應(yīng)用是模塊化的，我們在開發(fā)中會根據(jù)其功能 作用 以及其特性，建立大大小小各種模塊，從而構(gòu)建其成為一個應(yīng)用程序，任何模塊都能包含任意數(shù)量的其它組件。【相關(guān)教程推薦：《angularjs視頻教程》】

1.@NgModule()

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core';  import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component';  @NgModule({   declarations: [     AppComponent   ],   imports: [     BrowserModule,     AppRoutingModule   ],   providers: [],   bootstrap: [AppComponent] }) export class AppModule { }

由⬆️代碼我們可以看到，NgModule 是一個帶有 @NgModule() 裝飾器的類，它接受一個元數(shù)據(jù)對象，該對象的屬性用來描述這個模塊。

點進去@NgModule() 裝飾器的類我們可以看到他有如下屬性以及官方的對其屬性的解釋。

export declare interface NgModule {     providers?: Provider[];// 本模塊向全局服務(wù)中貢獻的那些服務(wù)的創(chuàng)建器。 這些服務(wù)能被本應(yīng)用中的任何部分使用。（你也可以在組件級別指定服務(wù)提供商，這通常是首選方式。）     declarations?: Array<Type<any> | any[]>;// 那些屬于本 NgModule 的組件、指令、管道     imports?: Array<Type<any> | ModuleWithProviders<{}> | any[]>;// 那些導(dǎo)出了本模塊中的組件模板所需的類的其它模塊     exports?: Array<Type<any> | any[]>;//那些能在其它模塊的組件模板中使用的可聲明對象的子集     entryComponents?: Array<Type<any> | any[]>;     bootstrap?: Array<Type<any> | any[]>;     schemas?: Array<SchemaMetadata | any[]>; }

以下是本人使用Angular后對此元數(shù)據(jù)屬性個人口語化的理解

• providers：將本模塊所有在組件中注入的服務(wù)，在這里提前定義好，否則在此模塊中使用這個服務(wù)會有錯誤提示。

• declaration：declaration 英文意思為聲明。在這里聲明一些模塊中要使用到的一些組件，指令，管道等。

• imports：導(dǎo)入一些模塊，比如說我把所有的指令構(gòu)成一個模塊 我使用其中某些指令的時候，我可以選擇導(dǎo)入整個指令模塊。也可以導(dǎo)入一些通過npm install 安裝的一些模塊導(dǎo)入其中，才可以使用。

• exports：導(dǎo)出組件or指令管道等，以供引用此模塊的模塊可以使用此模塊的組件or 指令管道等。

• exporyComponents：entry component 表示 angular 的入口組件，可以引導(dǎo)組件是一個入口組件，Angular 會在引導(dǎo)過程中把它加載到 DOM 中。 其它入口組件是在其它時機動態(tài)加載的。字面上的意義，但是啥時候用呢，比如，我要彈出一個組件，那么這個組件是要動態(tài)加載到DOM中了吧，這個時候就需要將這個組件xxxComponent寫上了。

• bootstrap:這個模塊啟動的時候應(yīng)該啟動的組件，上面代碼可以看到AppModule是作為根模塊的啟動組件。

• schemas：不屬于Angular的組件或者指令的元素或者屬性都需要在這里進行聲明。

2.JavaScript 模塊 與 NgModule

JavaScript 和 Angular 都使用模塊來組織代碼，雖然它們的組織形式不同，但 Angular 的應(yīng)用會同時依賴兩者。

JavaScript 模塊：

模塊是內(nèi)含 JavaScript 代碼的獨立文件。要讓其中的東西可用，要寫一個導(dǎo)出語句

例：

export class AppComponent { ... }

在其他文件中需要使用

import { AppComponent } from './app.component';

而NgModulem模塊我們在隨筆的開頭以及介紹他的元數(shù)據(jù)，對其有一定的了解了。


NgModule 類 與 JavaScript 模塊有下列關(guān)鍵性的不同：

• 1.NgModule 只綁定了可聲明的類，這些可聲明的類只是供 Angular 編譯器用的。

• 2.NgModule 與 JavaScript 類把它所有的成員類都放在一個巨型文件中不同，只要把該模塊的類列在它的 @NgModule.declarations 列表中。

• 3.NgModule 只能導(dǎo)出可聲明的類。這可能是它自己擁有的也可能是從其它模塊中導(dǎo)入的。它不會聲明或?qū)С鋈魏纹渌愋偷念悺?/p>

• 4.與 JavaScript 模塊不同，NgModule 可以通過把服務(wù)提供商加到 @NgModule.providers 列表中，來用服務(wù)擴展整個應(yīng)用。

相比之下我們可以看出，NgModulem模塊更靈活，擴展性強，更具優(yōu)勢。

3.常用模塊

首先要知道跑起來一個項目需要引用什么基本的模塊，以下是Angular 提供的一些官方的模塊。

4.特性模塊的分類

官方文檔將模塊分為五大類。

• 領(lǐng)域特性模塊
• 帶路由的特性模塊
• 路由模塊
• 服務(wù)特性模塊
• 可視部件特性模塊

雖然我特么當(dāng)年根本不知道，但是在開發(fā)中慢慢摸索其實發(fā)現(xiàn)也是根據(jù)模塊的特性將模塊的分類，結(jié)果不經(jīng)相同。

以下為個人在開發(fā)中對功能模塊的劃分

1）.業(yè)務(wù)型模塊：整一個應(yīng)用程序，根據(jù)其業(yè)務(wù)功能我們可以將程序拆分為一個個模塊，有很明確的業(yè)務(wù)特性，圍繞其業(yè)務(wù)功能的模塊。例如：用戶模塊，訂單模塊等。它有自己獨立的路由，有提供與此模塊的服務(wù)，有一個or多個組件，它惰性懶加載，不會導(dǎo)出or提供任何組件or指令管道，引用官方、本應(yīng)用程序or第三方的功能模塊。它有明確的業(yè)務(wù)特性，不與別的模塊有耦合性。

2）.組件模塊：應(yīng)用程序中通常都有規(guī)范化的標(biāo)準(zhǔn)設(shè)計 ，比如說統(tǒng)一的table，card date 等。將這些都抽出來，做成一個個組件，在模塊中導(dǎo)出此組件以供其他模塊使用，這樣減少了應(yīng)用程序中重復(fù)的樣式代碼等。曾經(jīng)我是將所有這種可能多處要使用的封裝為組件后，統(tǒng)一在一個模塊中導(dǎo)出，后來演變?yōu)槊恳粋€組件都拆分為一個模塊。這樣也是發(fā)現(xiàn)如果這種通用性的組件多起來的話，假設(shè)有二三十個組件在這個UIComponent模塊中，而我因為要使用其中一兩個組件而導(dǎo)入這個模塊，性能是很差的，所以后來都將組件拆分為一個個模塊以供業(yè)務(wù)模塊使用，例：DateModule，InputModule..等。

3）.服務(wù)模塊：提供一些通用型的服務(wù)。比如說http服務(wù)對httpClient二次包裝適用于項目，文件服務(wù)，配置服務(wù)等。

4）.其他模塊：應(yīng)用程序中我們會根據(jù)需要會做一些指令管道等，其就形成一個指令模塊包含應(yīng)用程序中所有等指令，管道模塊包含應(yīng)用程序中的所有管道。后來覺得，其實這些指令管道不需要集中起來統(tǒng)一導(dǎo)出引用。因為一個模塊并不會引用到指令模塊中超過百分之八十的指令，so 只需要把它們集中到一個pipe文件夾下，哪個模塊需要用到具體個指令or管道，直接聲明在其模塊中使用便可。

5.創(chuàng)建，導(dǎo)入特性模塊

我們將系統(tǒng)根據(jù)其功能 業(yè)務(wù)劃分好模塊，有利于合作開發(fā)，代碼的維護和使用。

創(chuàng)建特性模塊

ng g m order

ng g c order/list  // 訂單模塊下新建一個list 組件

我們看最后cli給我們生成的目錄結(jié)構(gòu)

order.module.ts

import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { ListComponent } from './list/list.component';  @NgModule({   declarations: [ListComponent],//定義list組件   exports: [ListComponent],//導(dǎo)出list組件   imports: [     CommonModule   ] }) export class OrderModule { }

list.component.ts

import { Component, OnInit } from '@angular/core';  @Component({   selector: 'app-list',   templateUrl: './list.component.html',   styleUrls: ['./list.component.scss'] }) export class ListComponent implements OnInit {    constructor() { }    ngOnInit() {   }  }

導(dǎo)入使用特性模塊

現(xiàn)在我們導(dǎo)入根模塊

app.module.ts

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core';  import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { OrderModule } from './order/order.module';  @NgModule({   declarations: [     AppComponent   ],   imports: [     BrowserModule,     AppRoutingModule,     OrderModule //將order模塊導(dǎo)入   ],   providers: [],   bootstrap: [AppComponent] }) export class AppModule { }

app.component.html 在跟模塊使用

<!--The content below is only a placeholder and can be replaced.--> <div style="text-align:center">   <h1>     Welcome to {{ title }}!   </h1> </div>  <app-list></app-list> <router-outlet></router-outlet>

我們可以看到渲染了order模塊的list組件

6.惰性加載模塊

如果我們將所有的模塊都導(dǎo)入根模塊，那么應(yīng)用在初始化加載的時候就會非常慢。這時候我們應(yīng)該考慮使用惰性加載。根據(jù)需求加載相應(yīng)都模塊，減少應(yīng)用初始化包的大小以及減少加載的時間，提高用戶體驗性。

惰性加載的模塊特點是該模塊擁有路由模塊。so 接著上面我們創(chuàng)建了一個訂單模塊 我們給訂單模塊加上路由。并再創(chuàng)建一個user.module以及user.module模塊下的list組件。

order.module

import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common';  import { OrderRoutingModule } from './order-routing.module'; import { ListComponent } from './list/list.component';   @NgModule({   declarations: [ListComponent],   imports: [     CommonModule,     OrderRoutingModule   ] }) export class OrderModule { }

order-routing.module

import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { ListComponent } from './list/list.component';   const routes: Routes = [   {     path: 'list',     component: ListComponent   }, ];  @NgModule({   imports: [RouterModule.forChild(routes)],   exports: [RouterModule] }) export class OrderRoutingModule { }

user模塊如此類推

接下來配置路由

AppRoutingModule在頂級路由中配置

import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router';  const routes: Routes = [   {     path: 'orders',     loadChildren: './order/order.module#OrderModule'   },   {     path: 'orders',     loadChildren: './user/user.module#UserModule'   } ];  @NgModule({   imports: [RouterModule.forRoot(routes)],   exports: [RouterModule] }) export class AppRoutingModule { }

我們給app.component.html新增兩個button

<!--The content below is only a placeholder and can be replaced.--> <div style="text-align:center">   <h2>     Welcome to {{ title }}!   </h2> </div>   <button routerLink="/user/list">user</button> <button routerLink="/order/list">order</button>  <router-outlet></router-outlet>

效果圖

惰性加載模塊有什么好處呢，在大型項目中往往有許多個模塊，而且大很大。如果一個模塊1m，如果我們在瀏覽器輸入地址打開這個應(yīng)用，瞬間要加載100m 是非常慢的，而且我們并非要是用到著這100個模塊。將系統(tǒng)業(yè)務(wù)拆分為各個模塊，劃分好界限。按需加載，我點擊了user 我加載user 模塊我出現(xiàn)user 列表，對user進行操作。當(dāng)我需要使用時才加載極大的減少了頁面初始加載的時間以及減少了資源的消耗。

7.共享模塊

共享模塊顧名思義，就是共享于所有的模塊中。首先得定義好這個模塊的具體功能特性，比如指令、管道和組件等分別封裝成一個個模塊，哪些業(yè)務(wù)模塊需要使用到其里面的功能變導(dǎo)入其模塊中便可。簡單的比如，本系統(tǒng)的input 都是統(tǒng)一樣式的，我們可以制作一個input 模塊 然后在其他模塊直接導(dǎo)入使用。這極大的規(guī)范了系統(tǒng)的統(tǒng)一性和降低了以后的維護成本。