Angular 8 教程: Angular 8 体系结构
让我们在本章中了解Angular8框架的体系结构。
Angular8框架基于四个核心概念，它们如下
-组件
-带有数据绑定和指令的模板
-模块
-服务和依赖注入
组件
Angular8框架架构的核心是Angular Component。Angular Component是每个Angular8应用程序的构建模块。每个Angular8应用由一个或多个Angular Component(组件)组成,Component(组件)可以理解为一个普通的JavaScript/Typescript类以及一个HTML模板和一个相关的名称。
HTML模板可以从其对应的JavaScript/Typescript类中访问数据。组件的HTML模板可能包括使用其选择器值(名称)的其他组件。Angular组件可能有一个可选的CSS样式与之相关联，并且HTML模板也可以访问CSS样式。
让我们分析一下ExpenseManager应用程序中的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是组件的选择器/名称，它是使用组件装饰器的选择器元数据指定的。应用程序根目录可由应用程序根目录文档src/index.html使用，如下所述
<!doctype html> <html> <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属性(title)可以在HTML模板中使用，如下所述
{{ title }}模板
模板基本上是一套HTML的超集。模板包含了HTML的所有特性，并提供了额外的功能来将组件数据绑定到HTML中，并动态生成HTML DOM元素。
模板的核心概念可以分为以下两个项目:
数据绑定
用于将组件中的数据绑定到模板。
{{ title }}这里，title是AppComponent中的一个属性，它使用插值绑定到模板。
指令
用于包含逻辑以及创建复杂的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(只是一个例子)是指令。只有当canShow为true的时候，才创建段落DOM元素。同样，showToolTip是属性指令，它将工具提示功能添加到段落元素中。
当用户将鼠标悬停在该段落上时，将显示一个工具提示。工具提示的内容来自其对应组件的tips属性。
模块
Angular8模块基本上是相关特性/功能的集合。Angular8 Module将多个组件和服务分组在一个上下文中。
例如，动画相关功能可以组合成单个模块，Angular已经为动画相关功能提供了一个模块，即BrowserAnimationModule模块。
Angular8应用程序可以有任意数量的模块，但只有一个模块可以设置为根模块，这将引导应用程序，然后在必要时调用其他模块。模块也可以被配置为从其他模块访问功能。简而言之，来自任何模块的组件都可以访问来自任何其他模块的组件和服务。
下图描述了模块及其组件之间的交互。
让我们检查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选项用于将组件包含到AppModulemodule中。
bootstrap选项用于设置AppModulemodule的根组件。
providers选项用于包含AppModulemodule模块的服务。
imports选项用于将其他模块导入到AppModulemodule中。
下图描述了模块、组件和服务之间的关系
服务
服务是提供非常具体功能的普通类型脚本/JavaScript类。服务将做一个单一的任务,服务的主要目的是可重用性,与其在组件中编写一个功能，不如将它分离成一个服务，这样它也可以在其他组件中使用。
此外，服务使开发人员能够组织应用程序的业务逻辑。基本上，组件使用服务来完成自己的工作。依赖注入用于正确初始化组件中的服务，以便组件可以在必要时访问服务，而无需任何设置。
Angular8应用的工作流程
我们已经学习了Angular8应用的核心概念。让我们看看典型的Angular8应用程序的完整流程。
src/main.ts是Angular8应用的切入点。
src/main.ts引导AppModule (src/app.module.ts)，它是Angular8应用程序的根模块。
platformBrowserDynamic().bootstrapModule(AppModule) .catch(err => console.error(err));
AppModule引导app component(src/app.component.ts)，它是Angular8应用程序的根组件。
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }在这里，AppModule通过导入选项加载模块。
AppModule还使用依赖注入(DI)加载所有注册的服务。
AppComponent呈现其模板(src/app.component.html)并使用相应的样式(src/app.component.css)。AppComponent名称，app-root用于将其放置在src/index.html中。
<!doctype html> <html> <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使用目标组件的名称在其模板中通过指令使用组件。
<component-selector-name></component-selector-name>
此外，所有注册的服务都可以通过依赖注入(DI)被所有Angular组件访问。