Angular v21 发布:引入实验性 Signal Forms 与全面革新

Angular v21 正式发布,带来了实验性的 Signal Forms 库、预览版 Angular Aria 可访问性组件,并默认启用 Vitest 测试运行器和无 Zone 变更检测。此次更新还大幅改进了文档,为构建可扩展、高性能的现代 Web 应用提供了强大支持。

Angular v21 发布:引入实验性 Signal Forms 与全面革新

Angular 框架的最新版本 v21 现已发布。此版本带来了诸多新特性,包括实验性的 Signal Forms、预览版 Angular Aria,以及对 Angular MCP 服务器的更新。

Angular 技术项目经理 Jens Kuehlers 和高级开发者关系工程师 Mark “Techson” Thompson 在一篇博客文章中写道:“随着 v21 的发布,Angular 将成为您日常开发的更佳伙伴——在提供 Angular 框架稳定性的同时,使您能够构建出色的、可扩展且对所有人都具备可访问性的 AI 驱动应用程序。”

Signal Forms:基于信号的表单状态管理

Signal Forms 是一个允许开发者使用信号(Signals)来管理表单状态的库。该库通过信号定义表单模型,并同步到绑定到它的表单字段,确保访问表单字段时具有完全的类型安全。常见的验证模式,如电子邮件验证或正则表达式匹配,已内置其中,开发者也可以创建自己的自定义验证规则。

Angular Aria:专注于可访问性的无样式组件

Angular Aria 是一个新的库,提供了一系列以可访问性为首要目标构建的无样式(headless)组件。开发者预览版包含了八种 UI 模式:手风琴(Accordion)、组合框(Combobox)、网格(Grid)、列表框(Listbox)、菜单(Menu)、标签页(Tabs)、工具栏(Toolbar)和树形控件(Tree)。这些组件没有预定义样式,开发者可以按需进行自定义。

文档中写道:“构建可访问的组件看似简单,但根据 W3C 可访问性指南实现它们需要付出巨大的努力并具备可访问性专业知识。Angular Aria 是一个实现了常见 WAI-ARIA 模式的无样式、可访问指令集合。这些指令处理键盘交互、ARIA 属性、焦点管理和屏幕阅读器支持。您所需要做的只是提供 HTML 结构、CSS 样式和业务逻辑。”

Angular MCP 服务器新工具

团队还宣布了 Angular MCP 服务器中的新工具,该服务器最初在 Angular v20.2 中引入:

  • get_best_practices:提供对 Angular 最佳实践指南的访问。
  • list_projects:查找工作空间中的所有 Angular 项目。
  • search_documentation:搜索官方的 Angular 文档。
  • find_examples:提供现代 Angular 模式的示例。
  • onpush_zoneless_migration:分析代码并提供迁移到 OnPush 和无 Zone 变更检测的计划。
  • ai_tutor:帮助开发者学习核心 Angular 概念并获得反馈。

测试与变更检测的重大变革

Angular v21 标志着 Vitest 成为默认的测试运行器。团队在 2023 年弃用了之前的测试运行器 Karma,随后探索了多种替代方案,包括 Jest、Web Test Runner 和 Vitest,最终决定采用 Vitest。目前 Karma 和 Jasmine 仍得到完全支持,因此无需立即迁移。

此外,在此版本中,用于修补浏览器 API 并跟踪应用程序状态的库 zone.js 不再默认包含。无 Zone(Zoneless)变更检测将成为新的默认方式。团队解释说,这种方式能带来更好的核心网页指标(Core Web Vitals)、原生的 async-await 支持、更好的生态系统兼容性、更小的包体积、更轻松的调试以及更强的控制力。

文档体验的全面改进

Angular 团队在此版本中投入了大量精力来改进文档体验:

  • 路由文档被彻底重构,现在提供了关于所有路由方面的更详细信息。
  • 改进了依赖注入指南。
  • 新增了关于如何为主题化 Material 组件的指南。
  • 新增了关于如何将 Angular 与 Tailwind CSS 结合使用的指南。

其他更新

此版本还包括其他一些更新:

  • 将 CLDR 库支持从 v41 升级到 v47。
  • 在模板中添加了对正则表达式的支持。
  • 新增了内置的 Signals 格式化工具。

有关最新版本的更多信息,请参阅 Angular 团队的博客文章。

comments powered by Disqus
使用 Hugo 构建
主题 StackJimmy 设计