Angular开发指南_angular-developer

以下为本文档的中文说明

angular-developer 是 Angular 官方团队提供的 Angular 代码生成与架构指导技能，为 Angular 开发者提供了全面的最佳实践参考。该技能涵盖了 Angular 开发的各个关键领域：信号（Signals）响应式编程，包括 linkedSignal 和 resource 等新 API 的正确使用；表单处理，涵盖模板驱动表单和响应式表单的最佳实践；依赖注入，包括 provide 函数、注入上下文和层级注入器；路由配置，包括懒加载、路由守卫和路由解析器；服务端渲染（SSR）的支持；无障碍性（ARIA）的实践指南；动画系统的使用；组件样式方案，包括组件样式封装和 Tailwind CSS 的集成；自动化测试，包括单元测试和端到端测试的策略；以及 Angular CLI 工具链的高效使用。使用场景包括：新建 Angular 项目时的架构决策、为现有项目添加新组件或服务、优化应用性能、重构遗留代码、以及解决在开发过程中遇到的具体技术问题。核心原则是在给出任何建议之前，先分析项目的 Angular 版本——不同版本之间的最佳实践和可用特性差异很大，例如 Angular 17 引入的信号系统在 Angular 16 中并不存在。每当生成代码后，技能要求运行 ng build 确保没有构建错误，这体现了质量至上的工程理念。该技能遵循 Angular 官方风格指南，确保生成的代码在可维护性和性能方面达到生产级标准。

Angular Developer Guidelines

1. Always analyze the project’s Angular version before providing guidance, as best practices and available features can vary significantly between versions. If creating a new project with Angular CLI, do not specify a version unless prompted by the user.

2. When generating code, follow Angular’s style guide and best practices for maintainability and performance. Use the Angular CLI for scaffolding components, services, directives, pipes, and routes to ensure consistency.

3. Once you finish generating code, runng buildto ensure there are no build errors. If there are errors, analyze the error messages and fix them before proceeding. Do not skip this step, as it is critical for ensuring the generated code is correct and functional.

Creating New Projects

If no guidelines are provided by the user, here are same default rules to follow when creating a new Angular project:

1. Use the latest stable version of Angular unless the user specifies otherwise.
2. Use Signals Forms for form management in new projects (available in Angular v21 and newer) Find out more.

Execution Rules forng new:
When asked to create a new Angular project, you must determine the correct execution command by following these strict steps:

Step 1: Check for an explicit user version.

• IFthe user requests a specific version (e.g., Angular 15), bypass local installations and strictly usenpx.
• Command:npx @angular/cli@<requested_version> new <project-name>

Step 2: Check for an existing Angular installation.

• IFno specific version is requested, runng versionin the terminal to check if the Angular CLI is already installed on the system.
• IFthe command succeeds and returns an installed version, use the local/global installation directly.
• Command:ng new <project-name>

Step 3: Fallback to Latest.

• IFno specific version is requested AND theng versioncommand fails (indicating no Angular installation exists), you must usenpxto fetch the latest version.
• Command:npx @angular/cli@latest new <project-name>

Components

When working with Angular components, consult the following references based on the task:

• Fundamentals: Anatomy, metadata, core concepts, and template control flow (@if, @for, @switch). Read components.md
• Inputs: Signal-based inputs, transforms, and model inputs. Read inputs.md
• Outputs: Signal-based outputs and custom event best practices. Read outputs.md
• Host Elements: Host bindings and attribute injection. Read host-elements.md

If you require deeper documentation not found in the references above, read the documentation athttps://angular.dev/guide/components.

Reactivity and Data Management

When managing state and data reactivity, use Angular Signals and consult the following references:

• Signals Overview: Core signal concepts (signal,computed), reactive contexts, anduntracked. Read signals-overview.md
• Dependent State (linkedSignal): Creating writable state linked to source signals. Read linked-signal.md
• Async Reactivity (resource): Fetching asynchronous data directly into signal state. Read resource.md
• Side Effects (effect): Logging, third-party DOM manipulation (afterRenderEffect), and when NOT to use effects. Read effects.md

Forms

In most cases for new apps,prefer signal forms. When making a forms decision, analyze the project and consider the following guidelines:

• if the application is using v21 or newer and this is a new form,prefer signal forms.
  -For older applications or when working with existing forms, use the appropriate form type that matches the applications current form strategy.

• Signal Forms: Use signals for form state management. Read [signal-forms.md](refer
  ences/signal-forms.md)

• Template-driven forms: Use for simple forms. Read template-driven-forms.md

• Reactive forms: Use for complex forms. Read reactive-forms.md

Dependency Injection

When implementing dependency injection in Angular, follow these guidelines:

• Fundamentals: Overview of Dependency Injection, services, and theinject()function. Read di-fundamentals.md
• Creating and Using Services: Creating services, theprovidedIn: 'root'option, and injecting into components or other services. Read creating-services.md
• Defining Dependency Providers: Automatic vs manual provision,InjectionToken,useClass,useValue,useFactory, and scopes. Read defining-providers.md
• Injection Context: Whereinject()is allowed,runInInjectionContext, andassertInInjectionContext. Read injection-context.md
• Hierarchical Injectors: TheEnvironmentInjectorvsElementInjector, resolution rules, modifiers (optional,skipSelf), andprovidersvsviewProviders. Read hierarchical-injectors.md

Angular Aria

When building accessible custom components for any of the following patterns: Accordion, Listbox, Combobox, Menu, Tabs, Toolbar, Tree, Grid, consult the following reference:

• Angular Aria Components: Building headless, accessible components (Accordion, Listbox, Combobox, Menu, Tabs, Toolbar, Tree, Grid) and styling ARIA attributes. Read angular-aria.md

Routing

When implementing navigation in Angular, consult the following references:

• Define Routes: URL paths, static vs dynamic segments, wildcards, and redirects. Read define-routes.md
• Route Loading Strategies: Eager vs lazy loading, and context-aware loading. Read loading-strategies.md
• Show Routes with Outlets: Using<router-outlet>, nested outlets, and named outlets. Read show-routes-with-outlets.md
• Navigate to Routes: Declarative navigation withRouterLinkand programmatic navigation withRouter. Read navigate-to-routes.md
• Control Route Access with Guards: ImplementingCanActivate,CanMatch, and other guards for security. Read route-guards.md
• Data Resolvers: Pre-fetching data before route activation withResolveFn. Read>Styling and Animations

  When implementing styling and animations in Angular, consult the following references:

  • Using Tailwind CSS with Angular: Integrating Tailwind CSS into Angular projects. Read tailwind-css.md
  • Angular Animations: Using native CSS (recommended) or the legacy DSL for dynamic effects. Read angular-animations.md
  • Styling components: Best practices for component styles and encapsulation. Read component-styling.md

  Testing

  When writing or updating tests, consult the following references based on the task:

  • Fundamentals: Best practices for unit testing (Vitest), async patterns, andTestBed. Read [testing-fundamentals.md](references/testing-fund
    amentals.md)
  • Component Harnesses: Standard patterns for robust component interaction. Read component-harnesses.md
  • Router Testing: UsingRouterTestingHarnessfor reliable navigation tests. Read router-testing.md
  • End-to-End (E2E) Testing: Best practices for E2E tests with Cypress. Read e2e-testing.md

  Tooling

  When working with Angular tooling, consult the following references:

  • Angular CLI: Creating applications, generating code (components, routes, services), serving, and building. Read cli.md
  • Code Modernization: Automatically refactoring to modern standards using migrations. Read migrations.md
  • Angular MCP Server: Available tools, configuration, and experimental features. Read mcp.md
    3e:[“" , " ","","L41”,null,{“content”:“$42”,“frontMatter”:{“name”:“angular-developer”,“description”:“Generates Angular code and provides architectural guidance. Trigger when creating projects, components, or services, or for best practices on reactivity (signals, linkedSignal, resource), forms, dependency injection, routing, SSR, accessibility (ARIA), animations, styling (component styles, Tailwind CSS), testing, or CLI tooling.”,“license”:“MIT”,“metadata”:{“author”:“Copyright 2026 Google LLC”,“version”:“1.0”}}}]

  3f:[“KaTeX parse error: Expected '}', got 'EOF' at end of input: …,"children":[["”,“div”,null,{“className”:“flex items-center justify-between border-b border-border bg-muted/30 px-4 py-2.5”,“children”:[[“KaTeX parse error: Expected '}', got 'EOF' at end of input: …","children":["”,“span”,null,{“className”:“truncate text-xs font-medium text-muted-foreground”,“children”:“同仓库更多 Skills”}]}],[“KaTeX parse error: Expected 'EOF', got '}' at position 88: …ldren":"同仓库"}]]}̲],["”,“div”,null,{“className”:“p-4 sm:p-5”,“children”:[[“" , " h 2 " , n u l l , " i d " : " r e l a t e d − s k i l l s − h e a d i n g " , " c l a s s N a m e " : " t e x t − 2 x l f o n t − s e m i b o l d t r a c k i n g − n o r m a l t e x t − f o r e g r o u n d " , " c h i l d r e n " : " 同仓库更多 S k i l l s " ] , [ " ","h2",null,{"id":"related-skills-heading","className":"text-2xl font-semibold tracking-normal text-foreground","children":"同仓库更多 Skills"}],["","h2",null,"id":"related−skills−heading","className":"text−2xlfont−semiboldtracking−normaltext−foreground","children":"同仓库更多Skills"],["”,“div”,null,{“className”:“mt-4 grid gap-3 sm:grid-cols-2”,“children”:[“L 43 " , " L43","L43","L44”,“$L45”]}]]}]]}]

  46:I[206516,[“/_next/static/chunks/051aanbhrv4br.js”,“/_next/static/chunks/0mizr60h7ayzt.js”,“/_next/static/chunks/0v9lm1dmbdoo-.js”,“/_next/static/chunks/0rxr1j1j3j-.r.js”,“/_next/static/chunks/02ftybezfvqjd.js”,“/_next/static/chunks/0.v9ksvnnj8ia.js”,“/_next/static/chunks/0bn6id9_{6nx3k.js",“/_next/static/chunks/13ybnhn37c.tc.js”,“/_next/static/chunks/0_fnrdtruz8uf.js”,“/_next/static/chunks/0r6l15utt1mwb.js”,“/_next/static/chunks/0dm9a5into854.js”,"/_next/static/chunks/0}7k6hqoibtcn.js”,“/next/static/chunks/0b4cao.4y…j.js”,“/_next/static/chunks/02i-n28z7kjd0.js”],“default”]