Angular 8 - 架构

让我们看看本章中 Angular 框架的架构。

Angular 框架基于四个核心概念，如下 -

  • 成分。
  • 具有数据绑定和指令的模板。
  • 模块。
  • 服务和依赖注入。

成分

Angular框架架构的核心是Angular Component。Angular 组件是每个 Angular 应用程序的构建块。每个 Angular 应用程序都由一个或多个Angular Component组成。它基本上是一个简单的 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是组件的选择器/名称，它是使用组件装饰器的选择器元数据指定的。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 模板中使用，如下所述 -

{{ title }}

模板

模板基本上是 HTML 的超级集合。模板包含 HTML 的所有功能，并提供附加功能将组件数据绑定到 HTML 中并动态生成 HTML DOM 元素。

模板的核心概念可以分为两项，如下：

数据绑定

用于将组件中的数据绑定到模板。

{{ title }}

这里，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为 true时才创建段落 DOM 元素。类似地，showToolTip是Attribute Directives，它将工具提示功能添加到段落元素。

当用户将鼠标悬停在段落上时，会显示工具提示。工具提示的内容来自其相应组件的tips属性。

模块

Angular 模块基本上是相关特性/功能的集合。Angular Module将多个组件和服务分组到一个上下文中。

例如，动画相关功能可以分组为单个模块，并且 Angular 已经为动画相关功能提供了一个模块，即BrowserAnimationModule模块。

一个 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 { }

这里，

  • NgModule装饰器用于将普通 Typescript/JavaScript 类转换为Angular 模块。

  • 声明选项用于将组件包含到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通过导入选项加载模块。

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)框架访问所有注册的服务。