十一、Angular启动过程介绍

柔情只为你懂 2022-05-11 10:40 195阅读 0赞

#                                              Angular启动过程介绍 #

angular项目启动过程如下：  
![在这里插入图片描述][70]

### 1、angular.json声明项目入口 ###

...
    "options": {
                "outputPath": "dist/auction",
                "index": "src/index.html",
                "main": "src/main.ts",
                "polyfills": "src/polyfills.ts",
                "tsConfig": "src/tsconfig.app.json",
                "assets": [
                  "src/favicon.ico",
                  "src/assets"
                ],
                "styles": [
                  "src/styles.css"
                ],
                "scripts": []
              },
     ...

声明项目启动的时候展示的页面为src/index.html，加载的脚本为src/main.ts。

### 2、index.html ###

<!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>Auction</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>

### 3、main.tx ###

// main.ts是整个angular项目的入口
    // 导入enableProdMode用来关闭angular开发者模式
    import { enableProdMode } from '@angular/core';
    // 负责从angular浏览器模块中导入platformBrowserDynamic这个方法
    // platformBrowserDynamic这个方法告诉angular使用哪个模块来启动整个应用
    import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
    // 整个应用的主模块，来自本项目的app.module.ts文件
    import { AppModule } from './app/app.module';
    // angular多环境支持
    import { environment } from './environments/environment';
    
    // 如果是production模式，就启动enableProdMode来关闭开发者模式
    if (environment.production) {
      enableProdMode();
    }
    
    // 调用bootstrapModule方法来传入AppModule作为启动模块来启动应用
    platformBrowserDynamic().bootstrapModule(AppModule)
      .catch(err => console.error(err));

### 4、app.module.ts ###

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 { }// 控制器

### 5、app.componet.ts ###

// 导入angula核心包
    import { Component } from '@angular/core';
    // 装饰器
    @Component({
      selector: 'app-root', // 声明这个装饰器可以使用<app-root></app-root>标签在页面引用这个组件
      templateUrl: './app.component.html', // 模板：展示页面，与控制器进行数据交互
      styleUrls: ['./app.component.css']// 模板的样式设计
    })
    
     // 控制器：处理模板中的事件，为模板传递数据
    export class AppComponent {
      title = 'auction';
    }

[70]: /images/20220505/a8d8992bea8d499499dd7681a0db95b2.png