angular-developer

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Angular Developer Guidelines

Angular开发者指南

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.
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.
Once you finish generating code, run
```
ng build
```
to 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.

在提供指导前，务必先分析项目的Angular版本，因为不同版本之间的最佳实践和可用功能差异很大。如果使用Angular CLI创建新项目，除非用户要求，否则不要指定版本。
生成代码时，遵循Angular的风格指南和可维护性、性能相关的最佳实践。使用Angular CLI来搭建组件、服务、指令、管道和路由，以确保一致性。
完成代码生成后，运行
```
ng build
```
确保没有构建错误。如果存在错误，分析错误信息并修复后再继续。不要跳过此步骤，因为这是确保生成的代码正确且可用的关键。

Creating New Projects

创建新项目

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

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

Execution Rules for
ng 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.

IF the user requests a specific version (e.g., Angular 15), bypass local installations and strictly use
```
npx
```
.

Command:

npx @angular/cli@<requested_version> ng new <project-name>

Step 2: Check for an existing Angular installation.

IF no specific version is requested, run
```
ng version
```
in the terminal to check if the Angular CLI is already installed on the system.
IF the command succeeds and returns an installed version, use the local/global installation directly.
Command:
```
ng new <project-name>
```

Step 3: Fallback to Latest.

IF no specific version is requested AND the
```
ng version
```
command fails (indicating no Angular installation exists), you must use
```
npx
```
to fetch the latest version.

Command:

npx @angular/cli@latest ng new <project-name>

如果用户没有提供指导原则，创建新Angular项目时请遵循以下默认规则：

除非用户另有指定，否则使用Angular的最新稳定版本。
在新项目中使用Signals Forms进行表单管理（Angular v21及以上版本可用）了解更多。

ng new
执行规则：当要求创建新Angular项目时，必须遵循以下严格步骤确定正确的执行命令：

步骤1：检查用户是否指定明确版本。

如果用户要求特定版本（例如Angular 15），跳过本地安装，严格使用
```
npx
```
。

命令：

npx @angular/cli@<requested_version> ng new <project-name>

步骤2：检查是否已安装Angular。

如果用户未指定版本，在终端运行
```
ng version
```
检查系统是否已安装Angular CLI。
如果命令执行成功并返回已安装版本，直接使用本地/全局安装的版本。
命令：
```
ng new <project-name>
```

步骤3：回退到最新版本。

如果用户未指定版本且
```
ng version
```
命令执行失败（表示未安装Angular），必须使用
```
npx
```
获取最新版本。

命令：

npx @angular/cli@latest ng 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 at

https://angular.dev/guide/components

处理Angular组件时，根据任务参考以下文档：

基础内容：组件结构、元数据、核心概念和模板控制流（@if、@for、@switch）。阅读components.md
输入属性：基于Signal的输入、转换和模型输入。阅读inputs.md
输出属性：基于Signal的输出和自定义事件最佳实践。阅读outputs.md
宿主元素：宿主绑定和属性注入。阅读host-elements.md

如果需要上述参考文档中没有的更深入内容，请查阅

https://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, and
```
untracked
```
. 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

管理状态和数据响应性时，使用Angular Signals并参考以下文档：

Signals概述：核心Signal概念（
```
signal
```
、
```
computed
```
）、响应式上下文和
```
untracked
```
。阅读signals-overview.md
依赖状态（
linkedSignal
）：创建与源Signal关联的可写状态。阅读linked-signal.md
异步响应式编程（
resource
）：将异步数据直接获取到Signal状态中。阅读resource.md
副作用（
effect
）：日志记录、第三方DOM操作（
```
afterRenderEffect
```
）以及不适合使用effect的场景。阅读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
Template-driven forms: Use for simple forms. Read template-driven-forms.md
Reactive forms: Use for complex forms. Read reactive-forms.md

对于大多数新应用，优先使用Signal Forms。在决定表单类型时，分析项目并遵循以下指导原则：

如果应用使用v21或更新版本且是新建表单，优先使用Signal Forms。
- 对于旧版应用或处理现有表单时，使用与当前应用表单策略匹配的合适表单类型。
Signal Forms：使用Signal管理表单状态。阅读signal-forms.md
模板驱动表单：适用于简单表单。阅读template-driven-forms.md
响应式表单：适用于复杂表单。阅读reactive-forms.md

Dependency Injection

依赖注入

When implementing dependency injection in Angular, follow these guidelines:

Fundamentals: Overview of Dependency Injection, services, and the
```
inject()
```
function. Read di-fundamentals.md
Creating and Using Services: Creating services, the
```
providedIn: '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: Where
```
inject()
```
is allowed,
```
runInInjectionContext
```
, and
```
assertInInjectionContext
```
. Read injection-context.md
Hierarchical Injectors: The
```
EnvironmentInjector
```
vs
```
ElementInjector
```
, resolution rules, modifiers (
```
optional
```
,
```
skipSelf
```
), and
```
providers
```
vs
```
viewProviders
```
. Read hierarchical-injectors.md

在Angular中实现依赖注入时，遵循以下指导原则：

基础内容：依赖注入概述、服务和
```
inject()
```
函数。阅读di-fundamentals.md
创建和使用服务：创建服务、
```
providedIn: 'root'
```
选项以及在组件或其他服务中注入。阅读creating-services.md
定义依赖提供者：自动与手动提供、
```
InjectionToken
```
、
```
useClass
```
、
```
useValue
```
、
```
useFactory
```
和作用域。阅读defining-providers.md
注入上下文：允许使用
```
inject()
```
的场景、
```
runInInjectionContext
```
和
```
assertInInjectionContext
```
。阅读injection-context.md
分层注入器：
```
EnvironmentInjector
```
与
```
ElementInjector
```
、解析规则、修饰符（
```
optional
```
、
```
skipSelf
```
）以及
```
providers
```
与
```
viewProviders
```
的区别。阅读hierarchical-injectors.md

Angular Aria

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

构建以下模式的可访问自定义组件时，参考以下文档：手风琴、列表框、组合框、菜单、标签页、工具栏、树形控件、网格：

Angular ARIA组件：构建无样式、可访问的组件（手风琴、列表框、组合框、菜单、标签页、工具栏、树形控件、网格）以及ARIA属性样式设置。阅读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 with
```
RouterLink
```
and programmatic navigation with
```
Router
```
. Read navigate-to-routes.md
Control Route Access with Guards: Implementing
```
CanActivate
```
,
```
CanMatch
```
, and other guards for security. Read route-guards.md
Data Resolvers: Pre-fetching data before route activation with
```
ResolveFn
```
. Read data-resolvers.md
Router Lifecycle and Events: Chronological order of navigation events and debugging. Read router-lifecycle.md
Rendering Strategies: CSR, SSG (Prerendering), and SSR with hydration. Read rendering-strategies.md
Route Transition Animations: Enabling and customizing the View Transitions API. Read route-animations.md

If you require deeper documentation or more context, visit the official Angular Routing guide.

在Angular中实现导航时，参考以下文档：

定义路由：URL路径、静态与动态片段、通配符和重定向。阅读define-routes.md
路由加载策略：即时加载与懒加载，以及上下文感知加载。阅读loading-strategies.md
使用路由插座显示路由：使用
```
<router-outlet>
```
、嵌套插座和命名插座。阅读show-routes-with-outlets.md
导航到路由：使用
```
RouterLink
```
的声明式导航和使用
```
Router
```
的编程式导航。阅读navigate-to-routes.md
使用守卫控制路由访问：实现
```
CanActivate
```
、
```
CanMatch
```
等守卫以保障安全。阅读route-guards.md
数据解析器：使用
```
ResolveFn
```
在路由激活前预获取数据。阅读data-resolvers.md
路由生命周期与事件：导航事件的时间顺序和调试方法。阅读router-lifecycle.md
渲染策略：CSR、SSG（预渲染）和带 hydration 的SSR。阅读rendering-strategies.md
路由过渡动画：启用和自定义View Transitions API。阅读route-animations.md

如果需要更深入的文档或更多上下文，请访问Angular官方路由指南。

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

在Angular中实现样式与动画时，参考以下文档：

在Angular中使用Tailwind CSS：将Tailwind CSS集成到Angular项目中。阅读tailwind-css.md
Angular动画：使用原生CSS（推荐）或旧版DSL实现动态效果。阅读angular-animations.md
组件样式：组件样式和样式封装的最佳实践。阅读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, and
```
TestBed
```
. Read testing-fundamentals.md
Component Harnesses: Standard patterns for robust component interaction. Read component-harnesses.md
Router Testing: Using
```
RouterTestingHarness
```
for reliable navigation tests. Read router-testing.md
End-to-End (E2E) Testing: Best practices for E2E tests with Cypress. Read e2e-testing.md

编写或更新测试时，根据任务参考以下文档：

基础内容：单元测试（Vitest）的最佳实践、异步模式和
```
TestBed
```
。阅读testing-fundamentals.md
组件测试工具：健壮的组件交互标准模式。阅读component-harnesses.md
路由测试：使用
```
RouterTestingHarness
```
进行可靠的导航测试。阅读router-testing.md
端到端（E2E）测试：使用Cypress进行E2E测试的最佳实践。阅读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
Angular MCP Server: Available tools, configuration, and experimental features. Read mcp.md

使用Angular工具链时，参考以下文档：

Angular CLI：创建应用、生成代码（组件、路由、服务）、启动开发服务器和构建项目。阅读cli.md
Angular MCP Server：可用工具、配置和实验性功能。阅读mcp.md