HTML CSS JAVASCRIPT BOOTSTRAP JQUERY PHP SQL PYTHON PYTHON2 JAVA C C++ C# Linux AI 教程库 参考手册 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

Angular 8 - 架构

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

Angular 框架基于四个核心概念，它们如下 −

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

组件

Angular框架架构的核心是Angular组件。 Angular 组件是每个 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 模板中使用，如下所述 −

{{ 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 是属性指令，它将工具提示功能添加到段落元素。

当用户将鼠标悬停在段落上时，会显示工具提示。 工具提示的内容来自其相应组件的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 应用程序的完整流程。

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

❮ 上一节 下一节 ❯