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

前一篇我们提到了一部分的启动流程，今天我们会探讨剩下的启动流程资讯。

首先，我们要先知道 JavaScript 是从哪一个程序开始跑，而 Angular 应用程序的进入点就是专案中的 main.ts 档案，如下图。

接着我们按住 ctrl 键去点击画面中的 AppModule（或是在画面中的 AppModule 点击一下，接着按 f12 键），就会打开 app.module.ts 的档案。

接着我们来简单说明一下，app.module.ts 档案中的组成。

1. AppModule 可以说是 Angular 应用程序中最重要的一支程序，可以看到他是一个 class 并被 export，在大部分的情况下，AppModule 里不需要撰写程序码。
1. 承上，我们不需要在 AppModule 里面撰写程序码，只需要套用一个 decorator(装饰器)，并设定为 NgModule，来宣告这个类别是一个 Angular 里的 module，而下面会继续说明 @NgModule 里宣告的几个 property。
1. declarations 这个 property 是用来宣告跟 view 有关的元件。
1. imports 这个 property 是用来汇入一些会在 AppModule 这个模组里会用到的其他模组，模组代表了元件的集合，就像一个群体，所以在 imports 里面汇入的 BrowserModule，就代表把 BrowserModule 里面所包含的 component 一并汇入进来。
1. providers 里头会注册一些 service（我们後续会再提到 service 的部分）。
1. bootstrap 则是启动 Angular 应用程序的根元件 AppComponent。

我们再按住 ctrl 键并点击 AppComponent，打开 app.component.ts，接着我们来看看 app.component.ts 的组成。

1. 我们同样可以看到 AppComponent 为一个 class，而里头预设有一个 title 的 property。
1. 这里是一个名为 Component 的 decorator(装饰器)，宣告 AppComponent 这个 class 代表着 Angular 里的一个 component（元件），接着会介绍 Component 里宣告的一些属性。
1. selector 是一个选取器，而 selector 里的 app-root 则是对应 index.html 里的 app-root 标签，如下图。
  
  这也代表着这个 component 会到网页中找到 app-root 这个标签，并把这个标签里的内容置换成 component 执行的结果。
1. templateUrl 代表 AppComponent 的 html template 所在的位置，也就是同目录下的 app.component.html 这个档案。
  
  而这个 html 档案，就是开发服务器的首页内容，如下图之对照。
  
  所以 Angular 里每一个 component 都有一个对应的 template，这个 HTML Template 负责资料显示，而程序码、事件及属性资料则会定义在该 component 的 class 里面，以本篇专案的结构来说，就是指 app.component.ts 这个档案。
1. styleUrls 定义了一个 CSS 档案，就是同目录底下的 app.component.css 档案，可以设定 app.component.html 里会用到的 CSS，在预设的情况，这个 CSS 档依附在 component 底下独立存在，即便将来开发过程中产生了更多 component，在不同的 component 里使用了相同的 class 名称去设定 CSS 样式，也不会互相冲突。

启动流程快速复习

首先在浏览器中输入应用程序对应的网址，打开 index.html。
index.html 里会载入一段 JavaScript，这是由 Webpack 产生的，并动态载入。
而 Angular 执行时，进入点是 main.ts 这个档案。
接着从 main.ts 这个档案里面，会启动 AppModule。
在 AppModule 里面又去启动 Angular 应用程序的根元件 AppComponent。
AppComponent 会开始执行 AppComponent 这个 class，并找到相对应的 template，接着载入这个 component 的 CSS 样式档（如果有设定的话）。
最後，程序执行结束，所有内容呈现在网页上。