Angular2 模塊簡介

Angular2 模塊簡介

NgModule 簡介

Angular 應用是模塊化的, 而NgModule我們可以把它當做一個容器,用於存放一些內聚的代碼塊,它接收一個元數據對象並通過該對象告訴 Angular 如何編譯和運行模塊代碼。它標記出該模塊擁有的組件、指令和管道, 並把它們的一部分公開出去,以便外部組件使用它們。 它可以嚮應用的依賴注入器中添加服務提供商。
每個 Angular 應用都至少有一個 NgModule 類,也就是根模塊,它習慣上命名爲 AppModule,並位於一個名叫 app.module.ts 的文件中。引導這個根模塊就可以啓動你的應用。

NgModule 元數據

NgModule 是一個帶有 @NgModule() 裝飾器的類。@NgModule() 裝飾器是一個函數,它接受一個元數據對象,該對象的屬性用來描述這個模塊。其中最重要的屬性如下。

  • declarations(可聲明對象表) —— 那些屬於本 NgModule 的組件、指令、管道。
  • exports(導出表) —— 那些能在其它模塊的組件模板中使用的可聲明對象的子集。
  • imports(導入表) —— 那些導出了本模塊中的組件模板所需的類的其它模塊。
  • providers —— 本模塊向全局服務中貢獻的那些服務的創建器。
    這些服務能被本應用中的任何部分使用。(你也可以在組件級別指定服務提供商,這通常是首選方式。)
  • bootstrap —— 應用的主視圖,稱爲根組件。它是應用中所有其它視圖的宿主。只有根模塊才應該設置這個 bootstrap 屬性。

通俗一點講即:

  1. 聲明哪些組件、指令、管道屬於該模塊;
  2. 公開某些類,以便其它的組件模板可以使用它們;
  3. 導入其它模塊,從其它模塊中獲得本模塊所需的組件、指令和管道;
  4. 在應用程序級提供服務,以便應用中的任何組件都能使用它。

如:

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { HttpModule, Http } from '@angular/http';
import { RouterModule } from '@angular/router';
import { appRoutes } from './app.routes';
import { AppcontentModule } from './appcontent/appcontent.module';
import { AppComponent } from './app.component';
import { CommonService } from './shared/common.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpModule,
    RouterModule.forRoot(appRoutes),
    AppcontentModule
  ],
  providers: [CommonService],
  bootstrap: [AppComponent]
})
export class AppModule { }

特性模塊

我們一般把自定義的其他模塊叫特性模塊。隨着應用的擴大,所有的事情都在一個模塊中完成難免會變亂,我們就會想着把統分爲多個模塊,每個模塊都只做各自的事情而互不干擾,用根模塊來引導程序並管理所有子模塊即通過路由定向以及爲它們提供全局配置與服務實例。
實現方式如下:

  1. 根模塊負責全局的路由。
  2. 核心模塊負責全局服務,也可以定義一些只在根模塊中使用的組件等,並只能由根模塊引入一次,不再導出。
  3. 共享模塊不做服務的提供,而是定義全局共享的組件等,以及幫助子模塊導入系統模塊,讓子模塊只需要導入此共享模塊就夠了。
  4. 子模塊內部可以細分自己的子路由到具體的子組件,以及提供自己的服務等。
  5. 除了頁面入口模塊(即除了根模塊外的具體業務模塊)之外的其他子模塊均考慮寫成惰性加載的模塊,以提升頁面引導的速度減少性能浪費。
  6. 當需要一個比較通用的全局服務時,可以將其加入CoreModule,也可以再創建一個僅被根模塊引入的特性模塊。進一步的,甚至可以將此模塊發佈到npm,這就需要更強的編碼能力和技術積累了。

Angular2模塊的目錄和目錄結構一般如下:

  1. 每個模塊一個應該單獨的文件夾
  2. 模塊內功能相關或相近
  3. 每個模塊最好都有單獨的路由定義

clipboard.png

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章