We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第15天，点击查看活动详情
本文是译文，采用意译。
你是否好奇 Angular 应用背后场景都发生了什么？
Angular
你想知道 Angular 应用是怎么启动的？本文你值得阅读。
Angular 应用的启动基于 angular.json 文件。这个不是应用的入口文件，而是应用的启动文件。
angular.json
如果你使用旧版的 Angular，比如版本 4 或 5 ，你会注意到没有 angular.json 这个文件，取而代之的是 angular-cli.json 文件。别在意，都是表达同样内容的文件，只是命名不同而已。
4
5
angular-cli.json
angular.json 包含应用的所有配置信息。Angular builder 将通过这份文件，查找到应用的入口。
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 路径等。
DNA
UI
builder
index
polyfills
👀Note：在接到新任务时候，开始一个新的 Angular 应用之前，我都会先看 angular.json 和 package.json 文件。我会通过这两个文件了解应用的初始信息。有时，通过它们你会发现应用上的一些奇怪的事情（比如：应用了多个 UI 框架），或许你应该清除一些脏东西。
package.json
应用的入口就是 "main": "src/main.ts"。如果你通过 angular-cli 去生成，你的 main.ts 会是以下内容：
"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 引导启动。
bootstrapModule
每个应用至少有一个 Angular 模块。root 根模块引导你启动引用，被称为启动模块。
root
因此，bootstrapping 就像是一种装置或说一种加载的技术，启动 Angular 应用。当我们加载组件或者模块的时候，它将被渲染。
bootstrapping
现在，我们找到了应用入口。builder 通过执行下面的命令汗，main.ts 完成它的工作。
platformBrowserDynamic().bootstrapModule(AppModule)
也许你注意到了，上面的方法中还传递了参数 AppModule。真正的应用代码！是的，应用的代码都包含在这里面。AppModule 包含了声明(declarations)，组件(components)，服务（services）和应用相关的其他代码。
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。
@NgModule
bootstrap
AppComponent
下面是 app.component.ts 文件：
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'; }
每个组件都声明三个属性：
HTML
之后，Angular 会调用 index.html 文件。
随便提下：Angular 是一个允许我们创建单页面应用的框架。index.html 是服务器提供的挂载页面。
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 怎么被渲染了（也就是我们上面提到的内容）。那么其他的页面或者组件是怎么渲染的呢？
main page
home page
首先， index.html 是一直被渲染的。不管我们做什么，index.html 都是主要的模块。<app-root> 标签里面的内容的更改是基于 URL的。这就引出了 app.routing.module.ts。通过 app.component.html 模版文件（如下）路由出口 Router-outlet ，页面组件可以和 URL 一一对应，然后在 <app-root> 标签内渲染。
<app-root>
URL
app.routing.module.ts
app.component.html
Router-outlet
<router-outlet></router-outlet>
下面是它们之间匹配的插图：
目前为止，你不需要知道路由权限。并不是所有的组件都需要路由守卫，目前知道有这么一回事就好。
以上就是 angular 应用怎么工作的经过了。希望读者已经理解。
angular
原文 -- How does an Angular application work?
【完】✅
The text was updated successfully, but these errors were encountered:
No branches or pull requests
一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第15天，点击查看活动详情
本文是译文，采用意译。
你是否好奇
Angular应用背后场景都发生了什么？你想知道
Angular应用是怎么启动的？本文你值得阅读。Angular应用的启动基于angular.json文件。这个不是应用的入口文件，而是应用的启动文件。应用入口在哪？
如果你使用旧版的
Angular，比如版本4或5，你会注意到没有angular.json这个文件，取而代之的是angular-cli.json文件。别在意，都是表达同样内容的文件，只是命名不同而已。angular.json包含应用的所有配置信息。Angular builder将通过这份文件，查找到应用的入口。我们来看下
angular.json文件包含什么，下面是一个例子。angular.json好比人类的DNA。在上面的文件内容中，我们知道使用了那种UI框架，使用了什么builder去构建应用，index页面路径，polyfills路径等。👀Note：在接到新任务时候，开始一个新的
Angular应用之前，我都会先看angular.json和package.json文件。我会通过这两个文件了解应用的初始信息。有时，通过它们你会发现应用上的一些奇怪的事情（比如：应用了多个UI框架），或许你应该清除一些脏东西。应用的入口就是
"main": "src/main.ts"。如果你通过angular-cli去生成，你的main.ts会是以下内容：正如你所看到的，这个文件的任务是为应用创建一个浏览器环境。应用通过
bootstrapModule引导启动。入口已确定，那什么是引导(What's bootstrapping)
每个应用至少有一个
Angular模块。root根模块引导你启动引用，被称为启动模块。因此，
bootstrapping就像是一种装置或说一种加载的技术，启动Angular应用。当我们加载组件或者模块的时候，它将被渲染。现在，我们找到了应用入口。
builder通过执行下面的命令汗，main.ts完成它的工作。也许你注意到了，上面的方法中还传递了参数
AppModule。真正的应用代码！是的，应用的代码都包含在这里面。AppModule包含了声明(declarations)，组件(components)，服务（services）和应用相关的其他代码。下面是典型的
AppModule文件：在这个
AppModule中，在@NgModule装饰器中，我们有一个引导bootstrap数组，表明加载AppComponent。应用已经打开，那么怎么编写里面的内容。
下面是
app.component.ts文件：每个组件都声明三个属性：
HTML之后，
Angular会调用 index.html 文件。随便提下：
Angular是一个允许我们创建单页面应用的框架。index.html是服务器提供的挂载页面。index.html这个文件最终调用根组件，也就是 app-root ，这个组件在文件app.component.ts中被定义。如下index.html文件。到目前为止，我们知道了
main page或者home page怎么被渲染了（也就是我们上面提到的内容）。那么其他的页面或者组件是怎么渲染的呢？首先，
index.html是一直被渲染的。不管我们做什么，index.html都是主要的模块。<app-root>标签里面的内容的更改是基于URL的。这就引出了app.routing.module.ts。通过app.component.html模版文件（如下）路由出口Router-outlet，页面组件可以和URL一一对应，然后在<app-root>标签内渲染。下面是它们之间匹配的插图：
以上就是
angular应用怎么工作的经过了。希望读者已经理解。原文 -- How does an Angular application work?
【完】✅
The text was updated successfully, but these errors were encountered: