Day 09：一起了解 Angular 应用程序的启动流程（一）

启动 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 是被动态载入的，明天我们会继续探讨启动流程的其他细节。