Angular 应用是怎么工作的?

1,010 阅读4分钟

本文是译文,采用意译。

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

img_1.png

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

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

应用入口在哪?

如果你使用旧版的 Angular,比如版本 45 ,你会注意到没有 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.jsonpackage.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';
}

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

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

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

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

spa.png

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> 标签内渲染。

<router-outlet></router-outlet>

下面是它们之间匹配的插图:

what-happen.png

目前为止,你不需要知道路由权限。并不是所有的组件都需要路由守卫,目前知道有这么一回事就好。

以上就是 angular 应用怎么工作的经过了。希望读者已经理解。

thanks.png

原文 -- How does an Angular application work?

【完】✅