Angular总结二：Angular 启动过程

要弄清楚 Angular 的启动过程，就要弄明白 Angular 启动时加载了哪个页面，加载了哪些脚本，这些脚本做了哪些事？

通过 Angular 的编译依赖文件 .angular-cli.json 可以看到 apps 这个对象类的数组

这个对象中有 root 这个属性，这个是 Angular 应用的根目录，也即是 src 目录是 Angular 应用的根目录。

这个对象中有 index 这个属性，这个是 Angular 启动时加载的页面，也即是 src 目录下的 index.html 是 Angular 启动时加载的页面。

这个对象中有 main 这个属性，这个是 Angular 启动时加载的脚本，也既是 src 目录下的 main.ts 是 Angular 启动时加载的脚本。负责引导 Angular 的启动。

main.ts 文件内容如下

1. 引入 enableProdMode 模块，可以通过这个方法来关闭 Angular 的开发者模式，if(environment.production){enableProdMode();}如果为生产环境则关闭开发者模式，

2. Angular 导入 platformBrowserDynamic 模块来启动这个应用，

3. 导入命令行工具生成的整个应用的主模块 AppModule，

4. 导入环境配置文件 environment, 通过该目录下的 environment.prod.ts 配置文件配置生产环境，通过 environment.ts 文件来配置开发环境，还可以自定义测试环境，如 environment.test.ts

Angular 通过 AppModule 模块来启动应用，并加载该模块需要的子模块

app.module.ts 内容如下：

1. 向外暴露了一个 AppModule 类。

2. 使用 NgModule 装饰器生命了一个模块

3. declarations 申明模块中有什么东西，该申明中只能声明组件、指令、管道

4. imports 申明要让应用正常运转还需要什么东西，因为程序要运行在浏览器中，所以 BrowserModule 模块是必须要的。

5. providers 申明模块中需要用到的服务

6. bootstrap 属性申明了主组件

Angular 应用在加载时，会加载 AppModule 模块以及该模块所依赖的所有子模块。

为了弄明白加载的页面，分析 app.comonment.ts 这个组件：

1. 从 angular 核心模块中引入 Component 组件模块，

2. 在元数据装饰器中指明了选择器 app-root ，模板 app.comonent.html，样式 app.component.css，

3. 在 AppComponent 类中，定义了 title 属性，并为其赋值。

在 index.html 中

<app-root></app-root> 这里的内容将会被替换，替换内容为选择器为 app-root 的模板内容，既是 app.component.html  的内容：

1. 该模板中，{{title}} 是插值表达式，被其控制器的类的属性 title 值替换为 “app”。

于是，启动 Angular 应用并在浏览器中查看时，先显示“欢迎...”，随后被替换为 app.component.html 的内容：