十一、Angular启动过程介绍

最新推荐文章于 2024-03-13 14:53:20 发布

原创最新推荐文章于 2024-03-13 14:53:20 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#angular启动过程

Angular 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了Angular项目从启动到运行的全过程，包括angular.json配置、index.html展示、main.ts入口文件、app.module.ts模块定义及app.component.ts组件声明。通过深入理解这些关键步骤，帮助开发者掌握Angular应用的构建与运行机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Angular启动过程介绍

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

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';
}