angular-developer

用途

Angular Developer 是一套面向 Angular 项目的开发指南与代码生成技能。它适用于在任何 Angular 项目或代码库中工作，包括创建或搭建新的 Angular 项目、应用或库；生成组件、服务、指令、管道、守卫或解析器；使用 Angular Signals、linkedSignal 或 resource 实现响应式；处理 Angular 表单；设置依赖注入、路由、懒加载或路由守卫；添加无障碍（ARIA）、动画或组件样式；编写或调试 Angular 相关测试；配置 Angular CLI 工具或 Angular MCP Server。

主要能力

该技能在提供指导前会先分析项目的 Angular 版本，因为不同版本的最佳实践和可用特性差异显著。生成代码时遵循 Angular 风格指南，兼顾可维护性与性能，并使用 Angular CLI 脚手架生成组件、服务、指令、管道和路由以保证一致性。代码生成完成后会运行 ng build 检查构建错误，若有错误则分析错误信息并修复后再继续。

新建项目

若用户未提供指南，创建新 Angular 项目时使用以下默认值：除非用户另有指定，使用最新稳定版 Angular；仅当目标 Angular 版本支持 Signal Forms 时，新项目优先使用 Signal Forms。

ng new 的执行规则分三步：

检查用户是否明确指定版本。若用户请求特定版本（如 Angular 15），绕过本地安装，严格使用 npx：npx @angular/cli@<requested_version> new <project-name>。
检查是否已有 Angular 安装。若未指定版本，在终端运行 ng version 检查系统是否已安装 Angular CLI。若命令成功并返回已安装版本，直接使用本地/全局安装：ng new <project-name>。
回退到最新版。若未指定版本且 ng version 命令失败（表明没有 Angular 安装），必须使用 npx 获取最新版：npx @angular/cli@latest new <project-name>。

组件

处理 Angular 组件时按任务查阅相应参考：基础（结构、元数据、核心概念、模板控制流 @if、@for、@switch）；输入（基于 Signal 的输入、转换、model 输入）；输出（基于 Signal 的输出与自定义事件最佳实践）；宿主元素（宿主绑定与属性注入）。如需更深入文档，可查阅 https://angular.dev/guide/components。

响应式与数据管理

管理状态与数据响应式时使用 Angular Signals，并查阅：Signals 概览（signal、computed 等核心概念、响应式上下文、untracked）；依赖状态 linkedSignal（创建与源信号关联的可写状态）；异步响应式 resource（将异步数据直接获取到 signal 状态）；副作用 effect（日志、第三方 DOM 操作 afterRenderEffect，以及何时不应使用 effect）。

表单

新应用多数情况下优先使用 signal forms。做表单决策时分析项目并考虑：若应用版本支持 Signal Forms 且是新表单，优先使用 signal forms；对于较旧应用或已有表单，匹配应用当前的表单策略。Signal Forms 使用信号管理表单状态；模板驱动表单用于简单表单；响应式表单用于复杂表单。

依赖注入

遵循以下指南：基础（依赖注入概览、服务与 inject() 函数）；创建和使用服务（创建服务、providedIn: 'root' 选项、注入到组件或其他服务）；定义依赖提供者（自动与手动提供、InjectionToken、useClass、useValue、useFactory 及作用域）；注入上下文（inject() 允许的位置、runInInjectionContext、assertInInjectionContext）；层级注入器（EnvironmentInjector 与 ElementInjector、解析规则、修饰符 optional 与 skipSelf、providers 与 viewProviders）。

Angular Aria

为以下模式构建无障碍自定义组件时查阅 Angular Aria 参考：Accordion、Listbox、Combobox、Menu、Tabs、Toolbar、Tree、Grid，包括构建无头、无障碍组件以及为 ARIA 属性设置样式。

路由

实现导航时查阅：定义路由（URL 路径、静态与动态段、通配符、重定向）；路由加载策略（急切与懒加载、上下文感知加载）；使用出口显示路由（<router-outlet>、嵌套出口、命名出口）；导航到路由（RouterLink 声明式导航与 Router 编程式导航）；用守卫控制路由访问（实现 CanActivate、CanMatch 等守卫）；数据解析器（用 ResolveFn 在路由激活前预取数据）；路由器生命周期与事件（导航事件的时间顺序与调试）；渲染策略（CSR、SSG 预渲染、带水合的 SSR）；路由过渡动画（启用和自定义 View Transitions API）。如需更深入文档，可访问官方 Angular 路由指南。

样式与动画

查阅：在 Angular 中使用 Tailwind CSS；Angular 动画（推荐使用原生 CSS，或使用旧版 DSL 实现动态效果）；组件样式（组件样式与封装的最佳实践）。

测试

编写或更新测试时查阅：基础（单元测试、异步模式、TestBed 的最佳实践）；组件测试工具（稳健组件交互的标准模式）；路由测试（使用 RouterTestingHarness 进行可靠导航测试）；端到端测试（使用 Cypress 或 Playwright 的 E2E 最佳实践）。

工具

查阅：Angular CLI（创建应用、生成代码、serve 与 build）；Angular MCP Server（可用工具、配置与实验性特性）。

反模式

使用 null 或 undefined 作为 signal 表单字段初始值——应改用 ''、0 或 []。
未先调用字段就访问表单字段状态标志：form.field.valid()——应使用 form.field().valid()。
当目标 Angular 版本支持 Signal Forms 时，仍用旧表单 API 开始新表单。
在 [formField] 输入上设置 min、max、value、disabled 或 readonly HTML 属性——应改为在 schema 规则中定义。
在注入上下文之外调用 inject()——需要时使用 runInInjectionContext。
对应当使用 computed() 的派生状态使用 effect()。
在嵌套 @for 循环中引用 $parent.$index——Angular 不支持 $parent，应改用 let outerIdx = $index。

技能介绍

用途