28、开发真实世界的 Angular 应用

开发真实世界的 Angular 应用

1. 项目概述

我们要创建一个名为 Angular Heroes Registry 的 Angular 10 应用，用户可以管理英雄并为他们分配任务。该应用的主要功能包括：
- 显示英雄列表
- 添加新英雄
- 为英雄分配新任务
- 标记任务为已完成

应用设计使用 Angular Material 和 Angular Flex Layout，采用内置的 Deep Purple/Amber Angular Material 主题，并包含 Angular Material 排版。

应用布局分为三个主要区域：
- 头部：包含带有 logo 的标题和两个链接，一个用于创建新英雄，另一个指向本章的源代码仓库。
- 主内容区：显示英雄列表或创建新英雄的表单。
- 侧边栏：包含特定英雄的信息和已分配的任务。

2. 搭建应用结构

应用启动时默认显示英雄列表，选择英雄后显示侧边栏，其中包含所选英雄的详细信息，还可以删除英雄或分配新任务，同时显示所选英雄的所有已分配任务，可选择完成其中一个。可以通过应用头部的链接添加新英雄。

3. 实现核心功能

核心功能包括全局使用的服务（如本地缓存或数据访问服务）和仅使用一次的组件（如头部或页脚组件）。

3.1 使用本地存储持久化数据

使用 Angular in - memory Web API 模拟后端 API 功能，但数据在浏览器刷新时会丢失，因此使用浏览器的本地存储来持久化数据。

创建一个 Angula