angular-module-design
Design Angular modules using feature modules, lazy loading, and dependency injection. Use when organizing large Angular applications with proper separation of concerns.
适合你，如果正在重构或规划大型 Angular 应用的模块划分。
npx oh-my-skill add aj-geddes/useful-ai-prompts/angular-module-designcurl -fsSL https://oh-my-skill.com/install.sh | bash -s -- aj-geddes/useful-ai-prompts/angular-module-designnpx oh-my-skill verify aj-geddes/useful-ai-prompts/angular-module-design怎么用
商店整理自技能原文 · 版本 3f5182c · 表述以原文为准当用户请求设计Angular模块时，Claude会提供特性模块、懒加载、依赖注入等架构指导，并给出TypeScript代码示例。
当用户提出需要组织大型Angular应用，或涉及功能模块划分、路由懒加载、服务依赖注入等问题时触发。
技能原文 SKILL.md
Angular Module Design
Table of Contents
- [Overview](#overview)
- [When to Use](#when-to-use)
- [Quick Start](#quick-start)
- [Reference Guides](#reference-guides)
- [Best Practices](#best-practices)
Overview
Architect scalable Angular applications using feature modules, lazy loading, services, and RxJS for reactive programming patterns.
When to Use
- Large Angular applications
- Feature-based organization
- Lazy loading optimization
- Dependency injection patterns
- Reactive state management
Quick Start
Minimal working example:
// 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 {}
Reference Guides
Detailed implementations in the references/ directory:
| Guide | Contents | |---|---| | [Feature Module Structure](references/feature-module-structure.md) | Feature Module Structure | | [Lazy Loading Routes](references/lazy-loading-routes.md) | Lazy Loading Routes | | [Service with RxJS](references/service-with-rxjs.md) | Service with RxJS | | [Smart and Presentational Components](references/smart-and-presentational-components.md) | Smart and Presentational Components | | [Dependency Injection and Providers](references/dependency-injection-and-providers.md) | Dependency Injection and Providers |
Best Practices
✅ DO
- Follow established patterns and conventions
- Write clean, maintainable code
- Add appropriate documentation
- Test thoroughly before deploying
❌ DON'T
- Skip testing or validation
- Ignore error handling
- Hard-code configuration values