```typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Routes, RouterModule } from '@angular/router';
import { HttpModule } from '@angular/http';

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

export const ROUTER_CONFIG: Routes = [
  { path: '', loadChildren: './home/home.module#HomeModule' },
  { path: 'about', loadChildren: './about/about.module#AboutModule' },
  { path: 'contact', loadChildren: './contact/contact.module#ContactModule' },
];

@NgModule({
  imports: [BrowserModule, HttpModule, RouterModule.forRoot(ROUTER_CONFIG)],
  bootstrap: [AppComponent],
  declarations: [AppComponent],
})
export class AppModule {}
```
上面的例項程式碼，定義了一個根元件和一些路由規則，透過這些規則，路由到不同的模組。

Angular 將生成對 VM（虛擬機器）友好的程式碼，以儘可能提高其高效能。

Angular 將為我們的每個模組(`module`)生成一個注入器 Injector，因此在我們的例子中，它將採用 AppModule（我們的裝飾類）並建立一個名為 AppModuleInjector 的注入器。

下面是編譯器生成的 AppModule Injector 程式碼：

```typescript
import { NgModuleInjector } from '@angular/core/src/linker/ng_module_factory';
import { CommonModule } from '@angular/common/src/common_module';
import { ApplicationModule, _localeFactory } from '@angular/core/src/application_module';
import { BrowserModule, errorHandler } from '@angular/platform-browser/src/browser';
import { RouterModule, ROUTER_FORROOT_GUARD } from '@angular/router/src/router_module';
import { NgLocaleLocalization, NgLocalization } from '@angular/common/src/localization';
import { ApplicationInitStatus, APP_INITIALIZER } from '@angular/core/src/application_init';
import { Testability, TestabilityRegistry } from '@angular/core/src/testability/testability';
import { HttpModule } from '@angular/http/src/http_module';
import { ApplicationRef, ApplicationRef_ } from '@angular/core/src/application_ref';
import { BrowserModule } from '@angular/platform-browser/src/browser';
import { Injector } from '@angular/core/src/di/injector';
import { LOCALE_ID } from '@angular/core/src/i18n/tokens';
import { RouterModule, provideForRootGuard } from '@angular/router/src/router_module';
import { Router } from '@angular/router/src/router';
import { NgZone } from '@angular/core/src/zone/ng_zone';
import { Console } from '@angular/core/src/console';
import { ROUTES } from '@angular/router/src/router_config_loader';
import { ErrorHandler } from '@angular/core/src/error_handler';

import { AppModule } from './app.module';
import { AppComponentNgFactory } from './app.component.ngfactory';

class AppModuleInjector extends NgModuleInjector<appmodule> {
  _CommonModule_0: CommonModule;
  _ApplicationModule_1: ApplicationModule;
  _BrowserModule_2: BrowserModule;
  _ROUTER_FORROOT_GUARD_3: any;
  _RouterModule_4: RouterModule;
  _HttpModule_5: HttpModule;
  _AppModule_6: AppModule;
  _ErrorHandler_7: any;
  _ApplicationInitStatus_8: ApplicationInitStatus;
  _Testability_9: Testability;
  _ApplicationRef__10: ApplicationRef_;
  __ApplicationRef_11: any;
  __ROUTES_12: any[];

constructor(parent: Injector) {
    super(parent, [AppComponentNgFactory], [AppComponentNgFactory]);  
  }

get _ApplicationRef_11(): any {
    if (this.__ApplicationRef_11 == null) {
      this.__ApplicationRef_11 = this._ApplicationRef__10;
    }
    return this.__ApplicationRef_11;
  }

get _ROUTES_12(): any[] {
    if (this.__ROUTES_12 == null) {
      this.__ROUTES_12 = [[
        {
          path: '', loadChildren: './home/home.module#HomeModule'
        },
        {
          path: 'about', loadChildren: './about/about.module#AboutModule'
        },
        {
          path: 'contact', loadChildren: './contact/contact.module#ContactModule'
        }
      ]];
    }
    return this.__ROUTES_12;
  }

createInternal(): AppModule {
    this._CommonModule_0 = new CommonModule();
    this._ApplicationModule_1 = new ApplicationModule();
    this._BrowserModule_2 = new BrowserModule(this.parent.get(BrowserModule, (null as any)));
    this._ROUTER_FORROOT_GUARD_3 = provideForRootGuard(this.parent.get(Router, (null as any)));
    this._RouterModule_4 = new RouterModule(this._ROUTER_FORROOT_GUARD_3);
    this._HttpModule_5 = new HttpModule();
    this._AppModule_6 = new AppModule();
    this._ErrorHandler_7 = errorHandler();
    this._ApplicationInitStatus_8 = new ApplicationInitStatus(this.parent.get(APP_INITIALIZER, (null as any)));
    this._Testability_9 = new Testability(this.parent.get(NgZone));

this._ApplicationRef__10 = new ApplicationRef_(
      this.parent.get(NgZone),
      this.parent.get(Console),
      this,
      this._ErrorHandler_7,
      this,
      this._ApplicationInitStatus_8,
      this.parent.get(TestabilityRegistry, (null as any)),
      this._Testability_9
    );
    return this._AppModule_6;
  }

getInternal(token: any, notFoundResult: any): any {
    if (token === CommonModule) { return this._CommonModule_0; }
    if (token === ApplicationModule) { return this._ApplicationModule_1; }
    if (token === BrowserModule) { return this._BrowserModule_2; }
    if (token === ROUTER_FORROOT_GUARD) { return this._ROUTER_FORROOT_GUARD_3; }
    if (token === RouterModule) { return this._RouterModule_4; }
    if (token === HttpModule) { return this._HttpModule_5; }
    if (token === AppModule) { return this._AppModule_6; }
    if (token === ErrorHandler) { return this._ErrorHandler_7; }
    if (token === ApplicationInitStatus) { return this._ApplicationInitStatus_8; }
    if (token === Testability) { return this._Testability_9; }
    if (token === ApplicationRef_) { return this._ApplicationRef__10; }
    if (token === ApplicationRef) { return this._ApplicationRef_11; }
    if (token === ROUTES) { return this._ROUTES_12; }

return notFoundResult;
  }

destroyInternal(): void {
    this._ApplicationRef__10.ngOnDestroy();
  }
}
```

為了便於閱讀，上面所有的 import 程式碼，已經手動匯入更改為命名匯入。在實際生成的程式碼中，每個模組都使用萬用字元匯入以避免命名衝突。

例如， HttpModule 會像這樣被匯入：

```typescript
import * as import6 from '@angular/http/src/http_module';
```

然後使用 import6.HttpModule 而不是 HttpModule 來引用它。

我們會從上述生成程式碼中學習三個知識點：類的屬性、模組匯入以及依賴注入機制的工作方式。

# AppModuleInjector properties

在 AppModuleInjector 上為每個提供者/依賴項建立屬性：

```typescript
// ...
class AppModuleInjector extends NgModuleInjector<appmodule> {
  _CommonModule_0: CommonModule;
  _ApplicationModule_1: ApplicationModule;
  _BrowserModule_2: BrowserModule;
  // ...
}
```

這是上面編譯輸出的一個片段——所以我們將關注定義在類上的三個屬性：

- CommonModule
- ApplicationModule
- BrowserModule

我們的模組只宣告瞭 BrowserModule，那麼 CommonModule 和 ApplicationModule 是從哪裡來的呢？ 這些實際上是由 BrowserModule 為我們匯出的，所以我們不需要自己匯入它們。

模組中每個屬性的末尾還附加了一個數字。 就像使用萬用字元匯入一樣，這是為了避擴音供者之間潛在的命名衝突。

我們可以匯入兩個使用具有共享名稱的服務的模組並且沒有遞增的數字，它們都將被分配給相同的屬性，這可能會導致進一步的錯誤。

# Module imports

編譯時，Angular 使用它匯入的每個提供程式的直接路徑，例如，當我們編寫以下程式碼時：

```typescript
import { CommonModule } from '@angular/common';
```

編譯後的程式碼實際上為：

```typescript
import * as import5 from '@angular/common/src/common_module';
```

因此，當程式碼被編譯並捆綁在一起時，我們可以利用 tree-shaking 並且只包含我們實際使用的每個模組的部分。

# Dependency Injection

每個模組處理自己的依賴注入，如果它沒有依賴，則轉到父模組，直到找到或未找到它，後者情況下我們會得到一個錯誤。

重要的是要注意，所有依賴項都使用令牌來唯一標識它們，無論是在註冊時還是在查詢時。

有兩種不同的方式來啟動我們的依賴項，要麼在 createInternal 中，要麼作為屬性的 getter。

例如，我們使用 BrowserModule 和 HttpModule，它們是在這裡建立的：

```typescript
class AppModuleInjector extends NgModuleInjector<appmodule> {
  _CommonModule_0: CommonModule;
  _ApplicationModule_1: ApplicationModule;
  _BrowserModule_2: BrowserModule;
  _HttpModule_5: HttpModule;
  _AppModule_6: AppModule;

createInternal(): AppModule {
    this._CommonModule_0 = new CommonModule();
    this._ApplicationModule_1 = new ApplicationModule();
    this._BrowserModule_2 = new BrowserModule(this.parent.get(BrowserModule, (null as any)));
    this._HttpModule_5 = new HttpModule();
    this._AppModule_6 = new AppModule();
    // ...
    return this._AppModule_6;
  }
}
```
您可以看到 BrowserModule 的兩個匯出 - CommonModule 和 ApplicationModule 已建立，以及我們其他匯入的模組。 我們的實際模組也被建立（AppModule），因此它可以被其他模組使用。

對於所有其他提供者，它們是在需要時透過類中的 getter 建立的。 這是為了避免在不需要時建立提供程式的例項，同時提高初始渲染效能。

每當我們談到 Angular 中的注入器時，它指的是從我們的模組中生成（編譯）的程式碼。

當 Angular 查詢依賴項（例如我們透過建構函式注入的依賴項）時，它會在模組注入器中查詢，如果找不到則向上遍歷父模組。 如果它不存在，將會丟擲一個錯誤。

當我們在建構函式中使用型別定義時，Angular 使用這些型別（即類）作為查詢依賴項的標記。 然後將該令牌傳遞給 getInternal 並返回依賴項的例項（如果存在）。再次透過原始碼來學習：

```typescript
class AppModuleInjector extends NgModuleInjector<appmodule> {
  // new BrowserModule(this.parent.get(BrowserModule, (null as any)));
  _BrowserModule_2: BrowserModule;

// new HttpModule()
  _HttpModule_5: HttpModule;

// new AppModule()
  _AppModule_6: AppModule;

getInternal(token: any, notFoundResult: any): any {
    if (token === BrowserModule) {
      return this._BrowserModule_2;
    }
    if (token === HttpModule) {
      return this._HttpModule_5;
    }
    if (token === AppModule) {
      return this._AppModule_6;
    }

return notFoundResult;
  }
}
```
因此，在 getInternal 方法中，可以看到 Angular 正在使用簡單的 if 語句檢查我們的令牌，並將返回提供者的相關屬性 - 如果找到的話。

否則，我們將使用返回的 notFoundResult 來拯救 getInternal 方法。 當 Angular 遍歷我們的模組以找到所需的依賴項時，這個 notFoundResult 將為空 - 直到它找到依賴項，或者到達根模組但仍然找不到它，此時將會丟擲一個錯誤。</appmodule></appmodule></appmodule></appmodule>

Angular 依賴注入機制實現原理的深入介紹

相關文章