当 Angualr CLI 构建一个 Angular 应用时，会按如下步骤进行：
- 解析
index.html文件内容，识别出在<body>标签中包含的 HTML 标签元素。 - 如果发现未知的非标准的 HTML 标签元素，如
<app-root>. - Angular CLI 会搜索应用的组件树，找到与
<app-root>标签元素匹配的组件。 - 在
<app-root>标签元素的下一层级，绘制匹配的组件模板。
<app-root _nghost-icj-c11="" ng-version="10.2.5">
<div _ngcontent-icj-c11="" role="banner" class="toolbar">
...
</div>
<div _ngcontent-icj-c11="" role="main" class="content">
...
</div>
</app-root>
应用的组件来自哪里？组件又是如何与 index.html 文件中的定制 HTML 标签关联匹配的呢？
模块
Angular 应用的组件，都是通过模块（module）进行组织管理的。每个 Angular 应用可以包含多个模块，但是必须包含一个主模块，AppModule。
Angular 应用中的组件（component）需要在一个模块中进行注册，才能在应用运行时，被 Angular 框架发现和使用。
下面分析一下 AppModule 模块的代码，看看组件是如何在模块中注册的。
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 { }
在上面的代码中，我们可以看到，在模块的 declarations 属性中，包含了 AppComponent 组件。换句话说，AppComponent 组件通过 declarations 注册到了 AppModule 模块中。模块的 declarations 属性是一个数组类型，可以包含多个组件。所有添加到 declarations 属性中的组件，都可以被 Angualr 应用搜索到。
选择器
Angular 应用通过选择器（selector） 在 HTML 标签元素和 Angular 组件之间建立连接。
在 Angular 组件类中，可以设置选择器的名称：
selector: 'app-root'
在 index.html 文件中，可以设置 HTML 标签元素，标签元素的名称与组件类中选择器的名称相同。
<app-root></app-root>
组件模板
当 Angualr 遇到未知的 HTML 标签元素时，他就会搜索已经注册的组件，如果 HTML 标签元素的名称与组件类的选择器名称相同，就在该 HTML 标签元素下绘制组件模板（Component Template）的内容。
组件模板的文件地址，是通过组件类的 templateUrl 属性指定的。
templateUrl: './app.component.html',
我们可以使用 HTML 标准标签元素和 Angular 模板语法编写组件模板文件。Angular 模板语言对 HTML 和 JavaScript 进行了扩展，定制了他们对外观和行为。下面一行代码可以让我们有个初步的了解。
<span>{{ title }} app is running!</span>
{{ }} 是 Angular 模板语言的一种语法，称为 interpolation，其功能是读取组件类中的 title 属性，把 title 属性的值转换为文本，在页面中进行展现。假如 title 属性的值是 “Hello Angular 10”，那么，上面的代码在页面上的显示效果如下：
Hello Angular 10 app is running!
启动应用
最后，我们了解一下，Angular 应用是如何启动的。Angular 应用启动的代码位于 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));
Angular 应用的启动入口一直都是一个模块。在上面的代码中，AppModule 是应用入口，作为参数传递给 bootstrapModule 方法。而 platformBrowserDynamic 表示应用运行的目标平台是浏览器。
小结
通过阅读本文，希望大家对 Angular 应用的组成部分和运行机制有一个整体的了解，能够对继续深入学习 Angular 提供一些帮助。
网友评论