mcpField
A
angular-module-design

angular-module-design

github.com/aj-geddes开发373466 次安装34 周前更新
代码仓库

关于 angular-module-design

这项技能介绍如何用功能模块、延迟加载、服务和 RxJS 组织可扩展的 Angular 应用，适合开发大型应用的开发者，并提供常见架构模式的参考指南。

主要功能

  1. 01功能模块组织
  2. 02延迟加载路由
  3. 03使用 RxJS 的服务
  4. 04智能与展示型组件
  5. 05依赖注入模式

适用场景

  1. 01组织大型 Angular 应用
  2. 02通过延迟路由优化加载
  3. 03构建响应式服务
  4. 04应用依赖注入模式

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill angular-module-design

安装后在 Claude Code 中输入/angular-module-design确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
dependency-injection-and-providers.md
feature-module-structure.md
lazy-loading-routes.md
service-with-rxjs.md
smart-and-presentational-components.md
templates/
component-template.tsx

详细介绍

Angular 模块设计

目录

概述

使用功能模块、惰性加载、服务和 RxJS 响应式编程模式，构建可扩展的 Angular 应用。

适用场景

  • 大型 Angular 应用
  • 基于功能的组织方式
  • 惰性加载优化
  • 依赖注入模式
  • 响应式状态管理

快速入门

最简可运行示例：

// users.module.ts
import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { ReactiveFormsModule } from "@angular/forms";
import { UsersRoutingModule } from "./users-routing.module";
import { UsersListComponent } from "./components/users-list/users-list.component";
import { UserDetailComponent } from "./components/user-detail/user-detail.component";
import { UsersService } from "./services/users.service";

@NgModule({
  declarations: [UsersListComponent, UserDetailComponent],
  imports: [CommonModule, ReactiveFormsModule, UsersRoutingModule],
  providers: [UsersService],
})
export class UsersModule {}

参考指南

references/ 目录中的详细实现：

指南内容
功能模块结构功能模块结构
惰性加载路由惰性加载路由
使用 RxJS 的服务使用 RxJS 的服务
智能组件与展示组件智能组件与展示组件
依赖注入与提供者依赖注入与提供者

最佳实践

✅ 应做
  • 遵循既定模式和规范
  • 编写简洁、易于维护的代码
  • 添加适当的文档
  • 部署前进行全面测试
❌ 不应做
  • 跳过测试或验证
  • 忽略错误处理
  • 将配置值硬编码

评论

支持 Markdown