Angular的启动过程

深藏阁楼爱情的钟 2021-06-26 16:06 418阅读 0赞

在上一篇的博客中，我们详细了解了新项目的项目结构。知道了`main.ts`是整个`Angular`项目的入口点，那么，`Angular`项目的启动过程是怎样的呢？

那么我们就要搞清楚三个问题。

1.启动时加载了哪个页面。  
2.启动时执行了哪些脚本  
3.这些脚本都做了什么

首先我们看一下`angular-cli.json`这个文件，上一篇博客说到这个文件是命令行工具的配置文件。我们先来看看里面的代码

{
      "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
      "project": {
        "name": "test"//项目名称
      },
      "apps": [
        {
          "root": "src",/*指向的是angular应用启动时从哪个目录找资源,默认指向src目录*/
          "outDir": "dist",
          "assets": [/*资源目录*/
            "assets",
            "favicon.ico"
          ],
          "index": "index.html",/* index指向Angular应用启动时加载的页面 默认指向src目录中index.html*/
          "main": "main.ts",/* main属性指向Angular应用启动时加载的脚本 默认指向src目录中的main.ts*/
          "polyfills": "polyfills.ts",
          "test": "test.ts",
          "tsconfig": "tsconfig.app.json",
          "testTsconfig": "tsconfig.spec.json",
          "prefix": "app",
          "styles": [
            "styles.css"
          ],
          "scripts": [
            "../node_modules/jquery/dist/jquery.js"
          ],
          "environmentSource": "environments/environment.ts",
          "environments": {
            "dev": "environments/environment.ts",
            "prod": "environments/environment.prod.ts"
          }
        }
      ],
      "e2e": {
        "protractor": {
          "config": "./protractor.conf.js"
        }
      },
      "lint": [
        {
          "project": "src/tsconfig.app.json"
        },
        {
          "project": "src/tsconfig.spec.json"
        },
        {
          "project": "e2e/tsconfig.e2e.json"
        }
      ],
      "test": {
        "karma": {
          "config": "./karma.conf.js"
        }
      },
      "defaults": {
        "styleExt": "css",
        "component": {}
      }
    }

上面的代码我们主要看`apps`中的`root`、`index`和`main`属性：  
`root`属性指向的是`angular`应用启动时从哪个目录找资源,默认指向`src`目录  
`index`指向`Angular`应用启动时加载的页面 默认指向`src`目录中`index.html`  
`main`属性指向`Angular`应用启动时加载的脚本 默认指向`src`目录中的`main.ts`

这个时候我们就知道了  
程序启动时加载的是`index.html`这个页面，执行了`main.ts`这个脚本。

下面我们来看看脚本做了什么。

`main.ts`中的代码

/*开发者模式的配置*/
    import { enableProdMode } from '@angular/core';
    /*告诉Angular使用哪个模块启动应用*/
    import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
    /*导入主模块*/
    import { AppModule } from './app/app.module';
    /*倒入环境配置*/
    import { environment } from './environments/environment';
    
    /*如果是生产环境 关闭开发者模式*/
    if (environment.production) {
      enableProdMode();
    }
    
    /*程序的起点，整个程序就是从这里运行的，AppModule指向的是/app/app.module，也就是说程序启动时会去加载/app/app.module这个文件*/
    platformBrowserDynamic().bootstrapModule(AppModule);

`main.ts`告诉Angular主模块是`AppModule`,Angular也就知道了去加载`AppModule`。

`index.html`中的代码很简单，在上一篇博客中也说过`<app-root></app-root>` 这个标签就是组件展示的地方。

<!doctype html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>Test</title>
      <base href="/">
    
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="icon" type="image/x-icon" href="favicon.ico">
    </head>
    <body>
      <app-root>Loading...</app-root>
    </body>
    </html>

好了，到现在为止我们就知道上面的三个问题的答案了  
下面就是`Angular`应用的启动过程

1.Angular应用在启动时首先会去`angular-cli.json`这个配置文件中去寻找要加载的页面和脚本。  
默认是加载`index.html`和`main.ts`

![这里写图片描述][20180829130122994]

2.然后去`main.ts`中找到声明指定的主模块，默认的主模块是`app.module`

![这里写图片描述][20180829130218223]

3.然后去`app.module`中找到指定的主组件，默认的主组件是`app.component`  
![这里写图片描述][20180829130359448]

4.然后再去`app.component`中找到指定的选择器，模板和样式等等  
![这里写图片描述][20180829130506808]

5.最后，将组件渲染到`index.html`中的选择器中  
![这里写图片描述][20180829130605838]

在将组件渲染到选择器之前，会先显示选择器本身的内容，直到将选择器中的内容替换为主组件中模本的内容。  
这也就是为什么我们打开页面的时候会先出现`loading`的字样。

以上就是整个项目的启动过程！

[20180829130122994]: /images/20210626/9c82c281f6f24f90a9de1e091b891da4.png
[20180829130218223]: /images/20210626/ae8e8067417d408eb59feeb63d0ba0f8.png
[20180829130359448]: /images/20210626/b98d4ce2057849cf976e7e84e8ba89ad.png
[20180829130506808]: /images/20210626/9418d062214247dfb026bc25dbefb711.png
[20180829130605838]: /images/20210626/0dcd5ea99d114f979678cd76840a932a.png