应用启动流程

  • angular.json
    ng serve ==> 命令会去angular.json中查找进入app的入口 ==> 找到关键字main对应的文件“main.ts”。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 "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"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
]
  • main.ts 启动程序会根据main.ts中的内容启动一个app.module的模块
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
    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();
     }
    platformBrowserDynamic().bootstrapModule(AppModule)
     .catch(err => console.log(err));
  • app.module.ts app.module.ts 中定义模块中具体的组件，AppComponent组件
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
      import { BrowserModule } from '@angular/platform-browser';
      import { NgModule } from '@angular/core';
      import { AppComponent } from './app.component';

      @NgModule({
      declarations: [
      AppComponent
      ],
      imports: [
      BrowserModule
      ],
      providers: [],
      bootstrap: [AppComponent]
      })
      export class AppModule { }
  • 页面展示 别人访问网页时，angular.json中找到index的页面，index.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
     <!doctype html>
     <html lang="en">
     <head>
      <meta charset="utf-8">
      <title>DemoHelloworld</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></app-root>
      </body>
      </html>

根据找到appComponenet组件进行页面展示

1
2
3
4
5
6
7
8
9
       import { Component } from '@angular/core';
       @Component({
             selector: 'app-root',
             templateUrl: './app.component.html',
             styleUrls: ['./app.component.css']
       })
       export class AppComponent {
          title = 'app';
       }