请求的译文尚未完成，当前显示原始英文。
SKILL.md
只读
名称
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 Module Design
Table of Contents
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 | Feature Module Structure |
| Lazy Loading Routes | Lazy Loading Routes |
| Service with RxJS | Service with RxJS |
| Smart and Presentational Components | Smart and Presentational Components |
| Dependency Injection and Providers | 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
