【Angular】-启动Angular应用

我们以三个问题为导向来理解Angular的启动！
1、启动时加载了哪个页面？
2、启动时加载了哪些脚本?
3、这些脚本做了什么事？

启动时加载了哪个页面？加载了哪些脚本？

首先我们先打开angular-cli.json文件，代码如下：

"apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css"
      ],

里边有一个apps数组，数组中有一个index属性和一个main属性；
index属性指向src文件中的index.html文件，这是angular启动时加载的页面。
main属性指向src文件中的main.ts文件，这是angular启动时加载的脚本，负责引导angular启动。

这些脚本做了什么事？

接着我们打开main.ts脚本文件

'./加载一些模块'
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

'./设置环境'
if (environment.production) {
  enableProdMode();
}

'./传入AppModule，作为启动模块'
platformBrowserDynamic().bootstrapModule(AppModule);

在main.ts文件中加载了一些模块，设置了环境，然后将AppModule作为启动模块；接下会分析AppModule模块中需要依赖哪些模块，并加载哪些模块；
然后会分析这些模块需要哪些模块，以此类推，直到加载完所有需要依赖的模块。
然后augular会在index.html中寻找app-root，找到这个组件后，会用足组件（app.component.ts）中指定的模版内容（app.component.html）中的内容替换app-root中的内容。

index.html文件中的代码：
这里写图片描述
app.component.ts文件中代码：

启动后的实际效果如下

这里写图片描述