Angular入門-啟動過程
分析啟動過程無非就是兩件事：
- 載入了哪個啟動頁面和指令碼
- 啟動指令碼幹了什麼事
下面分步驟進行記錄。
-
載入了哪個啟動頁面和指令碼
在執行npm start命令之後會首先讀取package.json檔案，尋找其中關於start命令的定義，如下所示
找到之後便會執行start中的語句進行啟動，也就是說npm start命令和執行ng serve --proxy-config proxy.conf.json --port 4201這一坨命令的效果是完全一樣的。從這裡開始，ng命令開始接管啟動過程。
首先尋找應用目錄下angular.json檔案(不同Angular版本檔名略有差異，此處使用Angular 6.1.2)，尋找圖中所示的兩行
index條目指明瞭啟動時的載入頁面，為src/index.html；main條目指明瞭啟動時的載入指令碼，為src/main.ts。
通常情況這些內容是Angular cli自動生成的，並不需要做太多調整。 -
啟動指令碼幹了什麼事
首先來看main.ts
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module' 再來看AppModule裡面做了什麼事，轉至檔案app.module.ts
import {NgModule, APP_INITIALIZER, enableProdMode} from '@angular/core';
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
......
@NgModule({
imports: [
//Angular會自動載入imports中宣告的所有模組並載入,此過程是遞迴進行的,直至載入完最後一個模組
NoopAnimationsModule,
NavAsideModule,
......
],
declarations: [
AppComponent,
],
providers: [],
entryComponents: [],
//這裡指定了啟動元件,由於當前模組為主啟動模組,此處宣告的啟動元件即為主啟動元件,隨後程式進入其中
bootstrap: [AppComponent]
})
export class AppModule {
}
接下來看AppComponent，轉至檔案app.component.ts
import { Component } from '@angular/core';
@Component({
//當前元件對應的css選擇器
selector: 'app-root',
//對應的html模板
templateUrl: './app.component.html',
//對應的樣式表
styleUrls: ['./app.component.css']
})
export class AppComponent {
}
這裡做了什麼事暫時還看不出來，先來看index.html，這裡只摘取最重要的一部分
<html>
......
<body>
......
<app-root>Loading</app-root>
</body>
</html>
重點來了，此處app-root標籤即為AppComponent元件所對應的CSS選擇器的標籤名。
在Angular尚未完全載入所有元件時，頁面展示的內容為app-root中已有內容，本示例會顯示Loading字樣。在元件全部載入完成之後會將AppComponent元件中指定的html模板，即app.component.html中的內容替換掉app-root標籤內已有的內容。至此Angular應用啟動完成。
再來整理一下：
讀取angular.json配置檔案=》尋找index.html和main.ts=》
mian.ts中尋找bootstrapModule方法，分析方法入參AppModule=》
app.module.ts中分析imports所引用的其他模組，並遞迴載入=》
app.module.ts中尋找bootstrap所標記的主啟動元件,分析AppComponent=》
app.component.ts中分析該元件對應的CSS選擇器，html模板及樣式表=》
在index.html中尋找主啟動元件對應的標籤app-root，並在Angular載入過程中渲染標籤內的程式碼進行展示=》
全部元件載入完成之後，使用主啟動元件AppComponent所對應的html模板中的內容替換掉標籤app-root中原有的內容=》
載入完成