SuperAPI AI 工具集

angular-architecture

前端与建站

查看项目

更新于 10-16 05:51

技能介绍

用途:为 Angular 应用提供架构与组织规范,适用于搭建项目结构、定义功能模块和配置懒加载等场景。资料将其优先级标为 P0(CRITICAL)。

主要能力与原则:

  • 基于功能组织:按 feature folder 组织(如 features/dashboard/),内含组件、服务与模型;遵循 LIFT(Locate、Identify、Flat structure、Try DRY)。
  • Standalone 优先:组件、管道、指令使用 standalone,新代码消除 NgModule,使用 standalone: true(Angular 20+ 默认可省略)。
  • core/ 与 shared/:全局单例(如 AuthService、拦截器)放 core/;可复用 UI、管道、工具放 shared/;单例不得放入 shared/。
  • Smart 与 Dumb:Smart(Container)组件负责调用服务、管理状态;Dumb(Presentational)组件仅暴露 inputs/outputs,不含逻辑,以分离数据与渲染并提升可测试性。

使用方式:提问或给出建议时使用规范中的确切术语(feature folder、LIFT、loadComponent、loadChildren、core/、shared/、Smart、Dumb),说明选择时给出术语及其具体后果。

懒加载要求:所有功能路由必须用 loadComponent 或 loadChildren 懒加载。示例:{ path: 'dashboard', loadComponent: () => import('./features/dashboard/dashboard.component').then(m => m.DashboardComponent) }。扁平模块,避免深层嵌套;barrel files 谨慎使用,某些构建工具下直接导入更利于 tree-shaking。

强制检查清单:功能路由是否全部使用 loadComponent 或 loadChildren;组件、管道、指令是否 standalone;全局服务是否在 core/、可复用 UI 是否在 shared/;展示型组件是否无逻辑且仅有 @Input/@Output;本地状态是否在适用处使用 Signals(Angular 16+)。

反模式:新代码不使用 NgModule;不急切导入功能,全部懒加载;不按类型建顶层目录(如 /components、/services),而按功能组织。

限制:资料未提供具体版本兼容细节、迁移步骤与工具集成说明。