开发学院,分享开发教程和最新动态

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样式。

component.jpg

  让我们分析一下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应用程序可以有任意数量的模块,但只有一个模块可以设置为根模块,这将引导应用程序,然后在必要时调用其他模块。模块也可以被配置为从其他模块访问功能。简而言之,来自任何模块的组件都可以访问来自任何其他模块的组件和服务。

  下图描述了模块及其组件之间的交互。

module.jpg

  让我们检查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应用程序的完整流程。

angular_application.jpg

  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组件访问。