啟動 Angular 開發伺服器

我們先打開 VS Code 的終端機面版，輸入 npm start，而 npm start 就會執行 ng serve 這個指令，把 Angular 開發伺服器運行起來。

而在開發伺服器啟動之前，Angular 會透過 Webpack 把專案裡的 TypeScript 進行編譯，並且會將所有的 JavaScript 合併在一起，並產生五個檔案。

而上述這五個檔案，會在首頁啟動時，預設就會全部載入進來。

我們可以點擊下圖裡的網址，打開首頁來看看。

在成功運行的開發伺服器首頁，點擊右鍵來選擇檢視網頁原始碼。

我們可以透過原始碼來看到幾個檢視的重點：

• 1. base 這個標籤在 Angular 開發時是個很重要的標籤，跟之後我們會探討的「路由」有關。
• 2. app-root 是這個網頁主體 body 裡唯一一個標籤，代表了 Angular 的根元件。
• 3. 這裡會載入五個 JavaScript，也就是我們使用 npm start 時所產生的，因為 Angular 是 JS 的框架，因此載入 JavsScript 是理所當然，而 Angular 就會在載入這些 JavaScript 之後，正式執行，過程中會伴隨一段啟動流程，在啟動完成後，app-root 標籤裡會被動態載入一些 DOM，再呈現於畫面上。

此時我們可以回到應用程式首頁，點擊右鍵，選擇檢查，對照一下 app-root 標籤，就可以看到剛剛在原始碼中，沒看到的內容了。

接著我們切換回 VS Code 的畫面，找到 Angular 應用程式首頁的檔案 index.html，我們可以發現 app-root 這個標籤，但是卻沒看到有載入 JavaScript。

看一下上圖，我們可以了解到，Webpack 除了幫我們封裝 JS，同時也動態的修改了 index.html，且自動在 body 標籤結尾前，自動加入了合併之後的 JS 檔案，因為這些檔案是動態載入的，所以就無需在 index.html 重複載入 JS 檔案了。

今天，我們了解到 Angular 應用程式在開發時期，JavaScript 是被動態載入的，明天我們會繼續探討啟動流程的其他細節。