Angular8 架构
这一章让我们看看Angular框架的架构呃。
Angular 框架基于四个核心概念，它们如下-
组件。
带有数据绑定和指令的模板。
模块。
服务和依赖注入。
组件
Angular 框架架构的核心是
Angular 组件。 Angular Component 是每个 Angular 应用程序的构建块。每个 Angular 应用程序都由一个多
Angular 组件 组成。它基本上是一个普通的 JavaScript/Typescript 类以及一个 HTML 模板和一个关联的名称。
HTML 模板可以从其相应的 JavaScript/Typescript 类访问数据。组件的 HTML 模板可以使用其选择器的值（名称）包含其他组件。 Angular 组件可能有一个可选的 CSS 样式与之关联，HTML 模板也可以访问 CSS 样式。
让我们分析
ExpenseManager 应用程序中的
AppComponent 组件。
AppComponent 代码如下-
// src/app/app.component.ts
import { Component } from '@angular/core'; @Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Expense Manager';
}
@Component 是一个装饰器，用于将普通的 Typescript 类转换为
Angular Component。
app-root 是组件的选择器/名称，它是使用组件装饰器的
selector 元数据指定的。
app-root 可以被应用程序根文件使用，
src/index.html 如下指定
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ExpenseManager</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
app.component.html 是与组件关联的 HTML 模板文档。组件模板是使用
@Component 装饰器的
templateUrl 元数据指定的。
app.component.css 是与组件关联的 CSS 样式文档。使用
@Component 装饰器的
styleUrls 元数据指定组件样式。
AppComponent 属性（标题）可以在 HTML 模板中使用，如下所述-
模板
模板基本上是 HTML 的超集。模板包含 HTML 的所有功能，并提供附加功能以将组件数据绑定到 HTML 中并动态生成 HTML DOM 元素。
模板的核心概念可以分为两个项目，它们如下-
数据绑定
用于将组件的数据绑定到模板。
这里，
title 是
AppComponent 中的一个属性，它使用
Interpolation 绑定到模板。
指令
用于包含逻辑以及允许创建复杂的 HTML DOM 元素。
<p *ngIf="canShow">
this sectiom will be shown only when the *canShow* propery's value in the corresponding component is *true* </p>
<p [showToolTip]='tips' />
这里，
ngIf 和
showToolTip（只是一个例子）是指令。
ngIf 仅在
canShow 为真时创建段落 DOM 元素。类似地，
showToolTip 是
Attribute Directives，它将工具提示功能添加到段落元素。
当用户将鼠标悬停在段落上时，会显示一个工具提示。 tooltip的内容来自其对应组件的tips属性。
模块
Angular Module 基本上是相关特性/功能的集合。
Angular Module 将多个组件和服务组合在一个上下文中。
例如，动画相关的功能可以分组到单个模块中，而 Angular 已经为动画相关的功能提供了一个模块，
BrowserAnimationModule 模块。
一个 Angular 应用程序可以有任意数量的模块，但只能将一个模块设置为根模块，这将引导应用程序，然后在必要时调用其他模块。一个模块也可以配置为从其他模块访问功能。简而言之，任何模块的组件都可以访问任何其他模块的组件和服务。
下图描述了模块及其组件之间的交互。
让我们检查一下
Expense Manager 应用程序的根模块。
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 { }
这里，
NgModule 装饰器用于将普通的 Typescript/JavaScript 类转换为 Angular 模块。
declarations 选项用于将组件包含到 AppModule 模块中。
bootstrap 选项用于设置AppModule模块的根组件。
providers 选项用于包含 AppModule 模块的服务。
imports 选项用于将其他模块导入到 AppModule 模块中。
下图描绘了模块、组件和服务之间的关系
服务
服务 是普通的 Typescript/JavaScript 类，提供非常具体的功能。
服务将完成一项任务并做到最好。该服务的主要目的是可重用性。与其在组件内部编写功能，不如将其分离到服务中，使其也可用于其他组件。
此外，
服务使开发人员能够组织应用程序的业务逻辑。基本上，组件使用服务来完成自己的工作。
依赖注入用于正确初始化组件中的服务，以便组件无需任何设置即可在必要时访问服务。
Angular 应用的工作流程
我们已经学习了 Angular 应用程序的核心概念。让我们看看一个典型的 Angular 应用程序的完整流程。
src/main.ts 是 Angular 应用程序的入口点。
src/main.ts 引导 AppModule (src/app.module.ts)，它是每个 Angular 应用程序的根模块。
platformBrowserDynamic().bootstrapModule(AppModule) .catch(err => console.error(err));
AppModule 引导
AppComponent (src/app.component.ts)，它是每个 Angular 应用程序的根组件。
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
这里，
AppModule 通过
imports 选项加载模块。
AppModule 还使用
依赖注入 (DI) 框架加载所有注册的服务。
AppComponent 呈现其模板
(src/app.component.html) 并使用相应的样式
(src/app.component.css)。 AppComponent 名称，
app-root 用于将其放置在
src/index.html 中。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ExpenseManager</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
AppComponent 可以使用在应用程序中注册的任何其他组件。
@NgModule({
declarations: [
AppComponent
AnyOtherComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
组件使用目标组件的选择器名称在其模板中通过指令使用其他组件。
<component-selector-name></component-selector-name>
此外，所有 Angular 组件都可以通过
依赖注入 (DI) 框架访问所有注册的服务。
