日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

 [[412840]]

作為“為大型前端項目”而設計的前端框架，Angular 其實有許多值得參考和學習的設計，本系列主要用于研究這些設計和功能的實現(xiàn)原理。本文主要圍繞 Angular 中的最大特點——依賴注入，介紹 Angular 依賴注入在體系在應用引導過程中的的設計和實現(xiàn)。

多級依賴注入中，介紹了模塊注入器和元素注入器兩種層次結構的注入器。那么，Angular 在引導過程中，又是如何初始化根模塊和入口組件的呢？

Angular 的引導過程

前面我們說到，Angular 應用在瀏覽器中引導時，會創(chuàng)建瀏覽器平臺，并引導根模塊：

 
 
 

  
  
  
platformBrowserDynamic().bootstrapModule(AppModule); 
 
 
 

引導根模塊

根模塊 AppModule

在 Angular 中，每個應用有至少一個 Angular 模塊，根模塊就是你用來引導此應用的模塊，它通常命名為 AppModule。

當你使用 Angular CLI 命令 ng new 生成一個應用時，其默認的 AppModule 是這樣的：

 
 
 

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

引導根模塊的過程

我們來看看平臺層引導根模塊的過程中都做了些什么：

 
 
 

  
  
  
@Injectable() 
  
  
  
export class PlatformRef { 
  
  
  
  ... 
  
  
  
 
  
  
  
  bootstrapModuleFactory(moduleFactory: NgModuleFactory, options?: BootstrapOptions): 
  
  
  
      Promise> { 
  
  
  
    // 由于實例化模塊時，會需要創(chuàng)建一些提供者，所以這里需要在實例化模塊之前創(chuàng)建 NgZone 
  
  
  
    // 因此，這里創(chuàng)建了一個僅包含新 NgZone 的微型父注入器，并將其作為父傳遞給 NgModuleFactory 
  
  
  
    const ngZoneOption = options ? options.ngZone : undefined; 
  
  
  
    const ngZoneEventCoalescing = (options && options.ngZoneEventCoalescing) || false; 
  
  
  
    const ngZoneRunCoalescing = (options && options.ngZoneRunCoalescing) || false; 
  
  
  
    const ngZone = getNgZone(ngZoneOption, {ngZoneEventCoalescing, ngZoneRunCoalescing}); 
  
  
  
    const providers: StaticProvider[] = [{provide: NgZone, useValue: ngZone}]; 
  
  
  
    // ApplicationRef 將在 Angular zone 之外創(chuàng)建 
  
  
  
    return ngZone.run(() => { 
  
  
  
      // 在 ngZone.run 中創(chuàng)建 ngZoneInjector，以便在 Angular zone 中創(chuàng)建所有實例化的服務 
  
  
  
      const ngZoneInjector = Injector.create( 
  
  
  
          {providers: providers, parent: this.injector, name: moduleFactory.moduleType.name}); 
  
  
  
      const moduleRef = >moduleFactory.create(ngZoneInjector); 
  
  
  
      const exceptionHandler: ErrorHandler|null = moduleRef.injector.get(ErrorHandler, null); 
  
  
  
      if (!exceptionHandler) { 
  
  
  
        throw new Error('No ErrorHandler. Is platform module (BrowserModule) included?'); 
  
  
  
      } 
  
  
  
      ... 
  
  
  
      return _callAndReportToErrorHandler(exceptionHandler, ngZone!, () => { 
  
  
  
        const initStatus: ApplicationInitStatus = moduleRef.injector.get(ApplicationInitStatus); 
  
  
  
        initStatus.runInitializers(); 
  
  
  
        return initStatus.donePromise.then(() => { 
  
  
  
          ... 
  
  
  
          // 引導模塊 
  
  
  
          this._moduleDoBootstrap(moduleRef); 
  
  
  
          return moduleRef; 
  
  
  
        }); 
  
  
  
      }); 
  
  
  
    }); 
  
  
  
  } 
  
  
  
 
  
  
  
  bootstrapModule( 
  
  
  
      moduleType: Type, 
  
  
  
      compilerOptions: (CompilerOptions&BootstrapOptions)| 
  
  
  
      Array = []): Promise> { 
  
  
  
    const options = optionsReducer({}, compilerOptions); 
  
  
  
    // 編譯并創(chuàng)建 @NgModule 的實例 
  
  
  
    return compileNgModuleFactory(this.injector, options, moduleType) 
  
  
  
        .then(moduleFactory => this.bootstrapModuleFactory(moduleFactory, options)); 
  
  
  
  } 
  
  
  
 
  
  
  
  private _moduleDoBootstrap(moduleRef: InternalNgModuleRef): void { 
  
  
  
    const appRef = moduleRef.injector.get(ApplicationRef) as ApplicationRef; 
  
  
  
    // 引導應用程序 
  
  
  
    if (moduleRef._bootstrapComponents.length > 0) { 
  
  
  
      // 在應用程序的根級別引導新組件 
  
  
  
      moduleRef._bootstrapComponents.forEach(f => appRef.bootstrap(f)); 
  
  
  
    } else if (moduleRef.instance.ngDoBootstrap) { 
  
  
  
      moduleRef.instance.ngDoBootstrap(appRef); 
  
  
  
    } else { 
  
  
  
      ... 
  
  
  
    } 
  
  
  
    this._modules.push(moduleRef); 
  
  
  
  } 
  
  
  
} 
 
 
 

根模塊引導時，除了編譯并創(chuàng)建 AppModule 的實例，還會創(chuàng)建 NgZone，關于 NgZone 的請參考。在編譯和創(chuàng)建 AppModule 的過程中，便會創(chuàng)建 ApplicationRef ，即 Angular 應用程序。

引導 Angular 應用程序

前面在引導根模塊過程中，創(chuàng)建了 Angular 應用程序之后，便會在應用程序的根級別引導新組件：

 
 
 

  
  
  
// 在應用程序的根級別引導新組件 
  
  
  
moduleRef._bootstrapComponents.forEach(f => appRef.bootstrap(f)); 
 
 
 

我們來看看這個過程會發(fā)生什么。

應用程序 ApplicationRef

一個 Angular 應用程序，提供了以下的能力：

 
 
 

  
  
  
@Injectable() 
  
  
  
export class ApplicationRef { 
  
  
  
  // 獲取已注冊到該應用程序的組件類型的列表 
  
  
  
  public readonly componentTypes: Type[] = []; 
  
  
  
  // 獲取已注冊到該應用程序的組件的列表 
  
  
  
  public readonly components: ComponentRef[] = []; 
  
  
  
  // 返回一個 Observable，指示應用程序何時穩(wěn)定或不穩(wěn)定 
  
  
  
  // 如果在應用程序引導時，引導任何種類的周期性異步任務，則該應用程序將永遠不會穩(wěn)定（例如輪詢過程） 
  
  
  
  public readonly isStable!: Observable; 
  
  
  
 
  
  
  
  constructor( 
  
  
  
      private _zone: NgZone, private _injector: Injector, private _exceptionHandler: ErrorHandler, 
  
  
  
      private _componentFactoryResolver: ComponentFactoryResolver, 
  
  
  
      private _initStatus: ApplicationInitStatus) { 
  
  
  
        // 創(chuàng)建時，主要進行兩件事： 
  
  
  
        // 1. 宏任務結束后，檢測視圖是否需要更新。 
  
  
  
        // 2. 在 Angular Zone 之外創(chuàng)建對 onStable 的預訂，以便在 Angular Zone 之外運行回調。 
  
  
  
  } 
  
  
  
  // 在應用程序的根級別引導新組件 
  
  
  
  bootstrap(componentOrFactory: ComponentFactory|Type, rootSelectorOrNode?: string|any): 
  
  
  
      ComponentRef {} 
  
  
  
  // 調用此方法以顯式處理更改檢測及其副作用 
  
  
  
  tick(): void {} 
  
  
  
  // 關聯(lián)視圖，以便對其進行臟檢查，視圖銷毀后將自動分離 
  
  
  
  attachView(viewRef: ViewRef): void {} 
  
  
  
  // 再次從臟檢查中分離視圖 
  
  
  
  detachView(viewRef: ViewRef): void {} 
  
  
  
} 
 
 
 

那么，我們來看看 bootstrap() 過程中，Angular 都做了些什么。

在應用程序的根級別引導根組件

將新的根組件引導到應用程序中時，Angular 將指定的應用程序組件安裝到由 componentType 的選擇器標識的 DOM 元素上，并引導自動更改檢測以完成組件的初始化。

 
 
 

  
  
  
@Injectable() 
  
  
  
export class ApplicationRef { 
  
  
  
  bootstrap(componentOrFactory: ComponentFactory|Type, rootSelectorOrNode?: string|any): 
  
  
  
      ComponentRef { 
  
  
  
    ... 
  
  
  
    // 如果未與其他模塊綁定，則創(chuàng)建與當前模塊關聯(lián)的工廠 
  
  
  
    const ngModule = 
  
  
  
        isBoundToModule(componentFactory) ? undefined : this._injector.get(NgModuleRef); 
  
  
  
    const selectorOrNode = rootSelectorOrNode || componentFactory.selector; 
  
  
  
    // 創(chuàng)建組件 
  
  
  
    const compRef = componentFactory.create(Injector.NULL, [], selectorOrNode, ngModule); 
  
  
  
    const nativeElement = compRef.location.nativeElement; 
  
  
  
    // 創(chuàng)建可測試服務掛鉤 
  
  
  
    const testability = compRef.injector.get(Testability, null); 
  
  
  
    const testabilityRegistry = testability && compRef.injector.get(TestabilityRegistry); 
  
  
  
    if (testability && testabilityRegistry) { 
  
  
  
      testabilityRegistry.registerApplication(nativeElement, testability); 
  
  
  
    } 
  
  
  
    // 組件銷毀時，銷毀關聯(lián)視圖以及相關的服務 
  
  
  
    compRef.onDestroy(() => { 
  
  
  
      this.detachView(compRef.hostView); 
  
  
  
      remove(this.components, compRef); 
  
  
  
      if (testabilityRegistry) { 
  
  
  
        testabilityRegistry.unregisterApplication(nativeElement); 
  
  
  
      } 
  
  
  
    }); 
  
  
  
    // 加載組件，包括關聯(lián)視圖、監(jiān)聽變更等 
  
  
  
    this._loadComponent(compRef); 
  
  
  
    ... 
  
  
  
    return compRef; 
  
  
  
  } 
  
  
  
} 
 
 
 

在創(chuàng)建根組件的過程中，會關聯(lián) DOM 元素視圖、添加對狀態(tài)變更的檢測機制。

根組件是一個入口組件，Angular CLI 創(chuàng)建的默認應用只有一個組件 AppComponent ，Angular 會在引導過程中把它加載到 DOM 中。

在根組件的創(chuàng)建過程中，通常會根據(jù)根組件中引用到的其他組件，觸發(fā)一系列組件的創(chuàng)建并形成組件樹。大多數(shù)應用只有一個組件樹，并且只從一個根組件開始引導。

創(chuàng)建組件過程

Angular 中創(chuàng)建組件的過程如下：

1. 當 Angular 創(chuàng)建組件類的新實例時，它會通過查看該組件類的構造函數(shù)，來決定該組件依賴哪些服務或其它依賴項。
2. 當 Angular 發(fā)現(xiàn)某個組件依賴某個服務時，它會首先檢查是否該注入器中已經(jīng)有了那個服務的任何現(xiàn)有實例。如果所請求的服務尚不存在，注入器就會使用以前注冊的服務提供者來制作一個，并把它加入注入器中，然后把該服務返回給 Angular。
3. 當所有請求的服務已解析并返回時，Angular 可以用這些服務實例為參數(shù)，調用該組件的構造函數(shù)。

Angular 會在執(zhí)行應用時創(chuàng)建注入器，第一個注入器是根注入器，創(chuàng)建于引導過程中。借助注入器繼承機制，可以把全應用級的服務注入到這些組件中。

到這里，Angular 分別完成了根模塊、根組件和組件樹的引導過程，通過編譯器則可以將組件和視圖渲染到頁面上。

總結

在應用程序的引導過程中，Angular 采取了以下步驟來加載我們的第一個視圖：

 
 
 

  
  
  
index.html 
  
  
  
Main.ts 
 
 
 

本文我們重點從根模塊的引導過程開始，介紹了引導 Angular 應用程序、引導根組件、組件的創(chuàng)建等過程。至于組件樹的創(chuàng)建和渲染，則可以參考 編譯器 相關的內容。

 

當前題目：Angular框架解讀--依賴注入的引導過程
網(wǎng)頁地址：http://m.5511xx.com/article/dhciiep.html