Angular 8 架构
让我们看看本章中 Angular 框架的架构。
Angular框架基于四个核心概念，它们如下：
- 成分。
- 模板与 数据绑定 and 指令 .
- Modules.
- 服务和依赖注入。
零件
Angular 框架架构的核心是 角组件 . Angular 组件是每个 Angular 应用程序的构建块。每个 Angular 应用程序都由一个以上的应用程序组成 角组件 .它基本上是一个普通的 JavaScript / Typescript 类以及一个 HTML 模板和一个关联的名称。
HTML 模板可以从其对应的 JavaScript / Typescript 类中访问数据。组件的 HTML 模板可以使用其选择器的值(名称)包含其他组件。 Angular 组件可能有一个与之关联的可选 CSS 样式，并且 HTML 模板也可以访问 CSS 样式。
让我们分析一下 应用组件 我们的组件 费用经理 应用。这 应用组件 代码如下：
// 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';
}
@零件 是一个装饰器，它用于将普通的 Typescript 类转换为 角组件 .
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 模板文档。组件模板是使用指定的 模板网址 元数据 @零件 装饰师。
app.component.css 是与组件关联的 CSS 样式文档。组件样式是使用指定的 样式网址 元数据 @零件 装饰师。
应用组件 属性(标题)可以在 HTML 模板中使用，如下所述：
{{ title }}
Template
模板基本上是一组超 HTML。模板包含了 HTML 的所有特性，并提供了将组件数据绑定到 HTML 并动态生成 HTML DOM 元素的附加功能。
模板的核心概念可以分为以下两项：
数据绑定
用于将组件中的数据绑定到模板。
{{ title }}
Here, title 是一个属性 应用组件 它使用绑定到模板 插值 .
指令
用于包含逻辑以及支持创建复杂的 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' />
Here, ngIf and 显示工具提示 (只是一个例子)是指令。 ngIf 仅在以下情况下创建段落 DOM 元素 canShow 是真的。相似地， 显示工具提示 is 属性指令 ，它将工具提示功能添加到段落元素。
当用户将鼠标悬停在段落上时，会显示一个工具提示。 tooltip 的内容来自其对应组件的tips 属性。
Modules
角模块 基本上是相关特性/功能的集合。 角模块 将多个组件和服务组合在一个上下文中。
例如，动画相关功能可以组合成一个模块，Angular 已经为动画相关功能提供了一个模块， 浏览器动画模块 module.
Angular 应用程序可以有任意数量的模块，但只能将一个模块设置为根模块，它将引导应用程序，然后在必要时调用其他模块。一个模块也可以配置为访问其他模块的功能。简而言之，任何模块的组件都可以访问任何其他模块的组件和服务。
下图描述了模块及其组件之间的交互。
让我们检查一下我们的根模块 费用经理 应用。
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 { }
Here,
-
NgModule 装饰器用于将普通的 Typescript / JavaScript 类转换为 角模块 .
-
声明 选项用于将组件包含到 应用模块 module.
-
引导程序 选项用于设置根组件 应用模块 module.
-
提供者 选项用于包括服务 应用模块 module.
-
imports 选项用于将其他模块导入 应用模块 module.
下图描述了 Module、Component 和 Services 之间的关系
Services
Services 是提供非常特定功能的普通 Typescript / JavaScript 类。 Services 将完成一项任务并做到最好。该服务的主要目的是可重用性。与其在组件中编写功能，不如将其分离到服务中，使其也可以在其他组件中使用。
Also, Services 使开发人员能够组织应用程序的业务逻辑。基本上，组件使用服务来完成自己的工作。 依赖注入 用于正确初始化组件中的服务，以便组件可以在必要时访问服务而无需任何设置。
Angular 应用程序的工作流程
我们已经学习了 Angular 应用程序的核心概念。让我们看看典型 Angular 应用程序的完整流程。
src/main.ts 是 Angular 应用程序的入口点。
src/main.ts 引导 AppModule (src/app.module.ts)，它是每个 Angular 应用程序的根模块。
platformBrowserDynamic().bootstrapModule(AppModule) .catch(err => console.error(err));
应用模块 引导 应用组件 (src/app.component.ts)，它是每个 Angular 应用程序的根组件。
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Here,
应用模块 通过加载模块 imports option.
应用模块 还使用加载所有注册的服务 依赖注入 (DI) 框架。
应用组件 呈现其模板 (src/app.component.html) 并使用相应的样式 (src/app.component.css)。应用组件 name, 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>
应用组件 可以使用在应用程序中注册的任何其他组件。
@NgModule({
declarations: [
AppComponent
AnyOtherComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
组件通过其模板中的指令使用目标组件的选择器名称来使用其他组件。
<component-selector-name></component-selector-name>
此外，所有 Angular 组件都可以通过以下方式访问所有注册的服务 依赖注入 (DI) 框架。