理解AngularDart的架构概要※仍在撰写中

为了理解AngularDart官方文档中的”架构概述”，我做了一个总结。

公式文件：https://angulardart.dev/guide/architecture

以下是公式文档中提供的架构图解，请逐一整理。

上述构成图的构成要素包括以下8个部分：
– 模块 (Modules)
– 组件 (Components)
– 模板 (Templates)
– 元数据 (Metadata)
– 数据绑定 (Data binding)
– 指令 (Directives)
– 服务 (Services)
– 依赖注入 (Dependency injection)

模块

模块是指Dart的编译单元，如库和包。

编译单元是指不具备Dart文件中的library和part directive的Dart文件。
另外，part directive 是指能将library分割成多个文件的指令。
参考：https://dart.dev/guides/libraries/create-library-packages

Angular应用程序至少有一个模块和一个根模块。
模块可以是功能模块，也可以是处理每个应用程序领域的代码块或工作流。
最简单的根模块示例定义了一个单一的根组件类，如下所示。
另外，根组件的命名通常是AppComponent。

class AppComponent {}

组件

组件是支持视图的应用逻辑。并且组件类通过定义类来支持逻辑。在@lacolaco的文章中，组件定义如下：

AngularDart中的Component是一种“轻量级”，“可重用”，“专注于单一目的”的UI元素。
参考：AngularDart入门 第3回 Angular Components

在组件类中，通过属性（成员变量）和方法的API来与视图进行交互。以下是官方文档中的示例代码。

class HeroListComponent implements OnInit {
  List<Hero> heroes;
  Hero selectedHero;
  final HeroService _heroService;

  HeroListComponent(this._heroService);

  void ngOnInit() async {
    heroes = await _heroService.getAll();
  }

  void selectHero(Hero hero) {
    selectedHero = hero;
  }
}

这段示例代码是从官方文档的教程中提取出来的，但实际实现的内容如下所述。

・HeroListComponent通过服务获取英雄列表来支持视图，并将其作为heroes属性列表进行保存。
・selectHero()定义了当用户从列表中选择并点击英雄时，将设置selectedHero属性。
・ngOnInit()是一个被称为生命周期钩子的功能，用于在用户在应用内导航时创建、更新和销毁组件。
ngOnInit()初始化/执行在调用组件时定义的动作。

参考：生命周期钩子

模板

定义视图组件的角色是模板。
模板用HTML格式定义了如何表达组件。
在官方教程中提供的下面模板示例通常是HTML格式，但也有一些不同之处。

<h2>Hero List</h2>

<p><i>Pick a hero from the list</i></p>
<ul>
  <li *ngFor="let hero of heroes" (click)="selectHero(hero)">
    {{hero.name}}
  </li>
</ul>

<hero-detail *ngIf="selectedHero != null" [hero]="selectedHero"></hero-detail>

模板使用典型的的HTML元素，如

和

。此外，还包含使用Angular模板语法的代码，如*ngFor、{{hero.name}}、(click)、[hero]和。模板的最后一行中的标签是一个自定义元素，代表一个新的组件HeroDetailComponent。新的组件（代码未显示）会显示用户从HeroListComponent显示的列表中选择的英雄的相关内容。HeroDetailComponent是HeroListComponent的子类。

HeroDetailComponent是一个自定义组件，可以像上面的代码一样，在相同的布局中混合使用自定义组件和原生HTML。

子类的层次图如下所示。

元数据

元数据在Angular中扮演着传达类处理方式的角色。
通过查看hero_list_component.dart中的HeroListComponent类的代码，我们可以看到它只是一个类，直到告诉Angular之前不是一个组件。
为了告诉Angular HeroListComponent是一个组件，我们需要在类中使用元数据来定义，而在Dart中可以使用@Component注释来定义元数据。

在下面的代码示例中，我们定义了HeroListComponent的元数据。
使用@Component注解将HeroListComponent类标识为组件类。

@Component(
  selector: 'hero-list',
  templateUrl: 'hero_list_component.html',
  directives: [coreDirectives, formDirectives, HeroDetailComponent],
  providers: [ClassProvider(HeroService)],
)
class HeroListComponent implements OnInit {
  // ···
}

此外，@Component注解接受提供Angular创建并显示组件及其视图所需信息的参数。我们将在下面解释所定义的元数据参数。

选择器

这个参数是用来在CSS选择器中，告诉Angular在父HTML中指定的标签上创建并插入该组件的实例。
例如，如果应用的HTML中包含，Angular会在这个标签之间插入HeroListComponent的视图实例。

２、模板URL

这个参数的作用是将组件的HTML模板传递给Angular，它使用相对路径进行定义。

３、指示（）

这个参数用来定义模板中所需组件和指令的列表。
在Angular中，要处理模板中显示的应用程序标签（如），需要在指令列表中声明相应标签的组件。
此外，指令被定义为文章中所述。

Angular的”指令”是一种类似于HTML标签属性的记法，用于操作该元素的机制。

参考：尝试自定义能够操作Web页面元素的Angular指令

定义coreDirectives后，可以使用像*ngFor这样的Angular模板语法。

参考：核心指令.dart

供应商

这个参数定义了组件需要的依赖注入提供程序的列表，以获取显示的英雄列表。这是告诉Angular组件构造函数需要HeroService的一种方式。关于依赖注入我们稍后会介绍。

※写作中

请参考

我参考了下面的内容，非常容易读和理解。

Angular 架构概述
使用 AngularDart 的 第3回 Angular Components
尝试自己制作能操控 Web 页面元素的 “Angular” 指令