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. 每一個模塊最好都有單獨的路由定義