Angular Module Design

作者 aj-geddes3f5182cfd739无许可证355 个星标收录于 2026年10月8日更新于 2026年10月8日仓库7个月前更新

Design Angular modules using feature modules, lazy loading, and dependency injection. Use when organizing large Angular applications with proper separation of concerns.

仅含说明Software Development

AI 生成的概览

指导 Angular 模块架构，涵盖特性模块、懒加载与依赖注入。

功能: 该技能提供 Angular 应用架构指导，围绕特性模块、懒加载路由、使用 RxJS 的服务以及智能组件与展示型组件的分离。它包含一个 NgModule 快速入门示例，以及涵盖模块结构、路由、服务、组件模式和依赖注入提供者的参考指南。它还附带一个组件模板文件和一组最佳实践建议。它产出的是设计指导与代码模式，而不是运行工具。
适用场景: 适用于组织大型 Angular 应用、将其拆分为特性模块、添加懒加载，或决定如何组织服务、RxJS 状态与依赖注入提供者的场景。
运行要求: 不需要脚本或运行时工具，仅为说明文档与参考文档。使用其中的示例需要熟悉 Angular 与 TypeScript。

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:

typescript

// users.module.tsimport { 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 {}

// users.module.tsimport { 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 [blocked]	Feature Module Structure
Lazy Loading Routes [blocked]	Lazy Loading Routes
Service with RxJS [blocked]	Service with RxJS
Smart and Presentational Components [blocked]	Smart and Presentational Components
Dependency Injection and Providers [blocked]	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

来源与署名

来源：aj-geddes/useful-ai-prompts位于skills/angular-module-design提交3f5182c

许可证：无许可证

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

Angular Module Design

Angular Module Design

Table of Contents

Overview

When to Use

Quick Start

Reference Guides

Best Practices

✅ DO

❌ DON'T

来源与署名

更多来自 aj-geddes/useful-ai-prompts 的技能

Xss Prevention

Wireframe Prototyping

Web Performance Optimization

Vue Application Structure

Visual Regression Testing

User Persona Creation

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices