Angular 工程化應用之模塊（module）

首先我們來看下【Angular 官網模塊】的定義：

NgModules 用於配置注入器和編譯器，並幫你把那些相關的東西組織在一起。

NgModule 是一個帶有 @NgModule 裝飾器的類。 @NgModule 的參數是一個元數據對象，用於描述如何編譯組件的模板，以及如何在運行時創建注入器。 它會標出該模塊自己的組件、指令和管道，通過 exports 屬性公開其中的一部分，以便外部組件使用它們。 NgModule 還能把一些服務提供商添加到應用的依賴注入器中。

• Angular 模塊化

1. 模塊是組織應用和使用外部庫擴展應用的最佳途徑；
2. Angular 自己的庫都是 NgModule，比如 FormsModule、HttpClientModule 和 RouterModule。 很多第三方庫也是 NgModule，比如 Material Design、 Ionic 和 AngularFire2。
3. NgModule 把組件、指令和管道打包成內聚的功能塊，每個模塊聚焦於一個特性區域、業務領域、工作流或通用工具。
4. 模塊還可以把服務加到應用中。 這些服務可能是內部開發的（比如你自己寫的），或者框架內置的（比如 Angular 的路由和 HTTP 客戶端），或者外部模塊（Material Design、Ionic）；
5. 模塊可以在應用啓動時急性加載，也可以由路由器進行異步的惰性加載；

• NgModule 的元素可以做什麼？

1. 聲明某些組件、指令和管道屬於這個模塊；
2. 公開其中的部分組件、指令和管道，以便其它模塊中的組件模板中可以使用它們；
3. 導入其它帶有組件、指令和管道的模塊，這些模塊中的元件都是本模塊所需的；
4. 提供一些供應用中的其它組件使用的服務；

每個 Angular 應用都至少有一個模塊，也就是根模塊。 你可以引導那個模塊，以啓動該應用。

爲什麼要自定義模塊？

當我們開發一個應用程序時，功能單一隻需要少量的組件就可以完成，此時根模塊就是需要一併的加載這些組件；但是隨着業務的發展，應用程序相應的改造和成長，就需要不斷的重構和改造組件，有一些可能是特定的組件，他們之間有着密切相關的功能集，假如再按原來的方式一併的在根組件中掛載這些組件，那麼該應用程序就顯得比較雜亂，並且首次加載應用程序性能也隨之降低，持續原有的方式就不足以體現 Angular 框架工程化的優勢了，此時我們就需對組件進行模塊化改造，以更好的體現Angular工程化實踐。

組件模塊化的優點（相對）：

1. 項目（中大型）結構工程化明顯，方便靈活擴展和結構複用。
2. 可以在根組件中動態實現子組件懶加載，提升應用程序初始化性能和用戶體驗；
3. 有密切相關的功能組件更加集中化或者組件模塊化，對組件進行分類歸併形成一個合理的模塊；

Angular 模塊分類：

 

如何在Angular項目中創建自定義模塊以及實現路由模塊的懶加載？

• 通過Angular指令在headerRout文件中創建一個名爲modules的文件夾，並同時創建了一個名爲user的模塊；

PS E:\Angular\headRout> ng g module modules/user

• 將需要的子組件創建在user模塊下，此時組件默認引入在子組件的根模塊下；

PS E:\Angular\headRout> ng g component modules/user/components/nav

• 創建帶路由模塊的根組件；

PS E:\Angular\headRout> ng g component modules/user --routing 

•  配置user模塊中的根路由；

/* 路由配置 */
const routes: Routes = [
  {path:'user',component: UserComponent} 
];

• 創建模塊中的服務；

PS E:\Angular\headRout> ng g service modules/user/services/head

• 在user模塊的根模塊中引入服務；

import { HeadService } from './services/head.service';

• 如何在項目根組件中使用模塊中的組件（包括模塊的根組件和子組件）；

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
 
//引入模塊中的組件
import { UserComponent } from './user.component';
import { NavComponent } from './components/nav/nav.component';
//引入服務
import { HeadService } from './services/head.service';
 
@NgModule({
  //聲明組件：User模塊組件
  declarations: [ UserComponent, NavComponent],
  //暴露組件：將其他外部模塊需要使用的組件用exports暴露出來，供外部其他組件使用
  exports:[UserComponent],
  //聲明模塊
  imports: [
    CommonModule
  ],
  //聲明服務
  providers:[HeadService]
})
export class UserModule { }

• 在項目根模塊中引入並聲明自定義模塊；

//引入自定義模塊
import { UserModule } from './modules/user/user.module';
 
@NgModule({
  /* 聲明組件 */
  declarations: [
    AppComponent,
    HeaderComponent,
    HomeComponent,
    MiaoshaComponent,
    CouponComponent
  ],
  /* 聲明模塊 */
  imports: [
    BrowserModule,
    AppRoutingModule,
    UserModule   //聲明自定義模塊
  ],
  /* 聲明服務 */
  providers: [],
  /* 啓動應用 */
  bootstrap: [AppComponent]
})
export class AppModule { }

• 根組件的html頁面中掛載自定義模塊；

<app-header></app-header>
<router-outlet></router-outlet>
<hr /><br />
//模塊子組件掛載
<app-user></app-user>

• 根組件路由模塊【app-routing.module.ts】實現自定義模塊懶加載；

/* 配置路由 */
const routes: Routes = [
  {path:'user', loadChildren:'./modules/user.module#UserModule'}, /* 載入自定義模塊，#UserModule是自定義模塊的類名稱 */
  {path:'', pathMatch:'full', redirectTo:'user'} /* 此處是配置默加載認模塊，如果存在多個自定義模塊 */
];

以上就是在Angular項目中自定義模塊的全部過程分析。