3.3　模塊與依賴注入

在圖3.4的Angular應用的概要組件圖中沒有出現模塊的字樣，然而這不代表它沒出現在圖里。實際上圖中的指令、服務、控制器都是定義在Angular的模塊里。讀者從圖3.6展現的圖中可以看到所有類型的Angular組件都是歸屬于作為容器的某個模塊的。

圖3.6　Angular模塊與組件定義關系

自然地，如果要會使用Angular，就需要解決兩個問題：如何在模塊里創建組件以及如何使用其他模塊里的組件。下文的3.3.1和3.3.2節將分別回答這兩個問題。

3.3.1　根模塊

Angular或者Ionic新建的項目，都會存在一個根模塊，默認名是AppModule。如果你使用了模塊化來創建應用，包括AppModule，每個都會存在一個@NgModule裝飾器的類（雖然他很像Java中的注解，但是他的官方命名叫裝飾器）。我們新建的頁面，如果不使用懶加載，都要在@NgModule中先聲明后使用。

下面舉個例子，簡單介紹一下@NgModule中的內容：

     //app.module.ts


     import { NgModule }      from '@angular/core';
     import { BrowserModule } from '@angular/platform-browser';
     @NgModule({
     imports:      [ BrowserModule ],
     providers:    [ Logger ],
     declarations: [ AppComponent ],
     exports:      [ AppComponent ],
     bootstrap:    [ AppComponent ]
     })
     export class AppModule { }

?　Imports：本模塊聲明的組件模板需要的類所在的其他模塊。

?　Providers：服務的創建者，并加入到全局服務列表中，可用于應用任何部分。

?　Declarations：聲明本模塊中擁有的視圖類。Angular有三種視圖類：組件、指令和管道。

?　Exports：declarations的子集，可用于其他模塊的組件模板。

?　Bootstrap：指定應用的主視圖（稱為根組件），它是所有其他視圖的宿主。只有根模塊才能設置bootstrap屬性。

3.3.2　使用模塊與組件依賴注入

依賴注入是提供類的新實例的一種方式，還負責處理類所需的全部依賴。大多數依賴都是服務。Angular使用依賴注入來提供新組件以及組件所需的服務。

比如我們要給某組件導入HttpService這個服務，看這段代碼：

     constructor(private service: HttpService) {
         ...
     }

這個constructor就是構造函數，依賴注入在constructor中進行。你也許會覺得前面寫上private、public之類的很怪，這是TypeScript語法比較特殊，習慣就好。

當Angular創建組件時，會首先為組件所需的服務請求一個注入器injector。我們必須先用注入器injector為HttpService注冊一個提供商provider。

我們必須在providers寫上才能用，看這段代碼：

     @Component({
     selector:    'some-list',
     templateUrl: './some-list.component.html',
     providers:  [ HttpService]
     })