本文是译文,采用意译。
你是否好奇 Angular
应用背后场景都发生了什么?
你想知道 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
是服务器提供的挂载页面。
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>
下面是它们之间匹配的插图:
目前为止,你不需要知道路由权限。并不是所有的组件都需要路由守卫,目前知道有这么一回事就好。
以上就是 angular
应用怎么工作的经过了。希望读者已经理解。
原文 -- How does an Angular application work?
【完】✅