SuperAPI AI 工具集

angular-architect

前端与建站

查看项目

更新于 10-15 18:31

技能介绍

用途

Angular Architect 是一个面向 Angular 17+ 的资深 Angular 架构技能,主要用于企业级 Angular 应用的开发与架构设计。它强调使用独立组件(standalone components)、signals 和标准化的工程约束来构建应用。

核心工作流

技能按照以下流程工作:

  1. 分析需求——识别组件、状态需求与路由架构。
  2. 设计架构——规划独立组件、signal 使用方式与状态流转。
  3. 实现功能——使用 OnPush 策略和响应式模式构建组件。
  4. 管理状态——按需设置 NgRx store、effects、selectors;在继续之前使用 Redux DevTools 验证 store hydration 和 action 流。
  5. 优化——应用性能最佳实践与打包优化;运行 ng build --configuration production 验证包体积并标记回退。
  6. 测试——使用 TestBed 编写单元测试与集成测试;验证达到 >85% 覆盖率阈值。

主要能力

  • 生成 Angular 17+ 独立组件。
  • 配置带有懒加载和守卫的高级路由。
  • 实现 NgRx 状态管理。
  • 应用 RxJS 模式。
  • 使用 OnPush 变更检测策略与响应式模式。
  • 提供按主题加载的参考指南,覆盖组件、RxJS、NgRx、路由、测试。

使用方式

技能根据上下文加载对应参考指南:

主题 参考文件 加载时机
Components references/components.md 独立组件、signals、input/output
RxJS references/rxjs.md Observables、操作符、subjects、错误处理
NgRx references/ngrx.md Store、effects、selectors、entity adapter
Routing references/routing.md Router 配置、守卫、懒加载、resolvers
Testing references/testing.md TestBed、组件测试、服务测试

技能包含的关键代码模式示例:

  • 使用 OnPush 和 Signals 的独立组件:通过 input.required、output、computed 等定义组件输入输出与派生值。
  • 使用 takeUntilDestroyed 的 RxJS 订阅管理:在构造时捕获 DestroyRef,并在 ngOnInit 中使用。
  • NgRx Action / Reducer / Selector:使用 createAction、createReducer、createFeatureSelector、createSelector 定义状态管理。

约束

必须遵循:

  • 使用独立组件(Angular 17+ 默认)。
  • 在合适场景使用 signals 进行响应式状态管理。
  • 使用 OnPush 变更检测策略。
  • 使用严格的 TypeScript 配置。
  • 在 RxJS 流中实现正确的错误处理。
  • 在 *ngFor 循环中使用 trackBy 函数。
  • 编写测试并达到 >85% 覆盖率。
  • 遵循 Angular 风格指南。

禁止:

  • 使用基于 NgModule 的组件(兼容性要求除外)。
  • 忘记取消订阅 observables(使用 takeUntilDestroyed 或 async pipe)。
  • 使用没有适当错误处理的异步操作。
  • 跳过无障碍属性。
  • 在客户端代码中暴露敏感数据。
  • 在没有正当理由的情况下使用 any 类型。
  • 在 NgRx 中直接变更 state。
  • 对关键逻辑跳过单元测试。

输出模板

实现 Angular 功能时提供:

  • 带有独立配置的组件文件。
  • 涉及业务逻辑时的服务文件。
  • 使用 NgRx 时的状态管理文件。
  • 包含全面测试用例的测试文件。
  • 架构决策的简要说明。

适用场景与限制

适用于使用 Angular 17+ 进行企业级应用开发的场景,尤其是需要独立组件、signals、NgRx 状态管理、高级路由与严格测试覆盖率的项目。其约束明确禁止在非兼容性需求下使用 NgModule 组件、直接变更 NgRx state 以及滥用 any 类型。关于平台支持、收费与价格等具体信息暂未提供。