学习如何使用新的 Signals API 构建现代的 Angular 18 应用程序,并了解常见的基于信号的 UI 模式。
你将会学到的
- 在 GitHub 仓库中提供代码及可下载的 ZIP 文件
- 学习如何使用 Signals 构建现代化的 Angular 应用程序
- 深入学习 Angular Signals,包括 computed()、effect()等更多功能
- 学习 Signals 与 RxJs 的互操作性
- 学习如何今天就用最小化的 RxJs 构建 Angular 应用程序
- 学习常见的基于信号的 UI 模式
- 学习使用 Signals 进行错误处理及信号驱动的身份验证
- 学习使用 Signals 实现主从模式,以及其他常用模式
要求
你只需要掌握一些 TypeScript、HTML 与 CSS 的基础知识,对 Angular 的基本了解,这就足够了。
说明
相信你已经听闻不少关于 Angular Signals 的消息,它们为你提供了一种全新的编写 Angular 应用程序的方式!你也可能听说 RxJs 在 Angular 中逐渐变得可选。那么,大家都关心的问题来了:如果一个 Angular 应用完全基于 Signals 且尽量减少 RxJs 的使用,那它会是什么样子呢?
而这正是本课程的核心所在!
我们将构建一个小规模的应用程序,采用 Signals,并向你展示一系列在构建信号风格应用时几乎肯定会用到的常见设计模式。
课程大纲概览
我们将按照以下结构展开本课程:首先,我们将详细阐述 Angular 中的 Signals 是什么,为什么它们如此有用,并深入探讨三个核心原语:Signals、计算 Signals 和 Effects。
随后,我们将运用核心的信号概念,从零开始构建一个小型的 Angular 应用,采用全新的信号驱动组件编写 API(我们会避开基于装饰器的老 API)。
我们将涵盖一个完整的 CRUD 案例,使用 Signals 与本地后端,同时探讨在 Angular 中使用 async/await 进行 HTTP 请求的不同方法,涉及或不涉及 Angular 的 HTTP 客户端。
我们将展示如何处理错误,并覆盖如何使用信号驱动的方法实现诸如加载指示器、用户消息处理、主从场景、基于状态的信号服务等一系列常见应用功能和模式,这些都是你构建信号风格应用时可能需要的。
此外,我们还会演示如何在前端使用 Signals 和功能性守卫(guards)进行身份验证。
如果你在某些特殊情况下需要 RxJs,你也将学到 Signals 提供的强大 RxJs 互操作性。
课程目录
- 深入探索 Angular Signals
- 关于信号驱动的变更检测
- 计算 Signals
- Effects
- 新的信号驱动组件 API:输入和输出
- 使用 Signals 的完整 CRUD 案例
- 可选 RxJs 的 HTTP(两种实现方式)
- 错误处理与 Signals
- 使用 Signals 的加载指示器
- 基于状态的信号服务
- 使用 Signals 处理用户错误信息
- 基于信号的 Angular 身份验证
- 基于信号的视图查询
- viewChild, viewChildren, contentChild, contentChildren
- 使用 Signals 和 model() API 的双向绑定
- 基于信号的主从场景
- RxJs 互操作性
课程学习成果
通过本课程,你将详细学习如何使用 Signals 构建现代化的 Angular 应用,采用新的信号驱动组件编写 API,配合 async/await,同时尽可能减少 RxJs 的使用。
你将熟悉一系列广泛应用于几乎所有你将构建的信号风格应用中的常见信号驱动模式。
课程结束时,你将对信号的核心概念感到非常熟悉,并确切知道如何从头到尾使用 Signals 构建一个 Angular 应用。
此课程面向哪些人
寻求学习如何使用 Signals 构建 Angular 应用程序的开发者们找到了正确的地方。