Angular 应用是怎么工作的？-CFANZ编程社区

本文是译文，采用意译。

你是否好奇 Angular 应用背后场景都发生了什么？

Angular 应用是怎么工作的？_bootstrap

你想知道 Angular 应用是怎么启动的？本文你值得阅读。

Angular 应用的启动基于 angular.json 文件。这个不是应用的入口文件，而是应用的启动文件。

应用入口在哪？

如果你使用旧版的 Angular，比如版本 4 或 5 ，你会注意到没有 angular.json 这个文件，取而代之的是 angular-cli.json 文件。别在意，都是表达同样内容的文件，只是命名不同而已。

angular.json 包含应用的所有配置信息。Angular builder 将通过这份文件，查找到应用的入口。

我们来看下 angular.json 文件包含什么，下面是一个例子。

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    "outputPath": "dist/angular-starter",
    "index": "src/index.html",
    "main": "src/main.ts",
    "polyfills": "src/polyfills.ts",
    "tsConfig": "tsconfig.app.json",
    "aot": false,
    "assets": [
      "src/favicon.ico",
      "src/assets"
    ],
    "styles": [
      "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
      "src/style.css"
    ]
  }
}

angular.json 好比人类的 DNA。在上面的文件内容中，我们知道使用了那种 UI 框架，使用了什么 builder 去构建应用，index 页面路径，polyfills 路径等。

👀Note：在接到新任务时候，开始一个新的 Angular 应用之前，我都会先看 angular.json 和 package.json 文件。我会通过这两个文件了解应用的初始信息。有时，通过它们你会发现应用上的一些奇怪的事情（比如：应用了多个 UI 框架），或许你应该清除一些脏东西。

应用的入口就是 "main": "src/main.ts"。如果你通过 angular-cli 去生成，你的 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();
}
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err console.error(err));

正如你所看到的，这个文件的任务是为应用创建一个浏览器环境。应用通过 bootstrapModule 引导启动。

入口已确定，那什么是引导(What's bootstrapping)

每个应用至少有一个 Angular 模块。root 根模块引导你启动引用，被称为启动模块。

因此，bootstrapping 就像是一种装置或说一种加载的技术，启动 Angular 应用。当我们加载组件或者模块的时候，它将被渲染。

现在，我们找到了应用入口。builder 通过执行下面的命令汗，main.ts 完成它的工作。

platformBrowserDynamic().bootstrapModule(AppModule)

也许你注意到了，上面的方法中还传递了参数 AppModule。真正的应用代码！是的，应用的代码都包含在这里面。AppModule 包含了声明(declarations)，组件(components)，服务（services）和应用相关的其他代码。

下面是典型的 AppModule 文件：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  entryComponents: [],
  bootstrap: [AppComponent]
})
export class AppModule

在这个 AppModule 中，在 @NgModule 装饰器中，我们有一个引导 bootstrap 数组，表明加载 AppComponent。

应用已经打开，那么怎么编写里面的内容。

下面是 app.component.ts 文件：

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular';
}

每个组件都声明三个属性：

Selector-- 用于访问该组件
Template/TemplateURL-- 包含组件的HTML
StylesURL-- 包含改组件的特定样式

之后，Angular 会调用 index.html 文件。

随便提下：Angular 是一个允许我们创建单页面应用的框架。index.html 是服务器提供的挂载页面。

Angular 应用是怎么工作的？_前端_02

index.html 这个文件最终调用根组件，也就是 app-root ，这个组件在文件 app.component.ts 中被定义。如下index.html 文件。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angular</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <!-- 调用根组件 -->
  <app-root></app-root>
</body>
</html>

到目前为止，我们知道了 main page 或者 home page 怎么被渲染了（也就是我们上面提到的内容）。那么其他的页面或者组件是怎么渲染的呢？

首先， index.html 是一直被渲染的。不管我们做什么，index.html 都是主要的模块。<app-root> 标签里面的内容的更改是基于 URL的。这就引出了 app.routing.module.ts。通过 app.component.html 模版文件（如下）路由出口 Router-outlet ，页面组件可以和 URL 一一对应，然后在 <app-root> 标签内渲染。