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