Angular开发者指南：从项目创建到组件与信号式状态管理的最佳实践

angular-developer by angular/angular

267 周安装量

100,200 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/angular/angular --skill angular-developer

开发 TypeScript JavaScript 框架

🇨🇳中文介绍

Angular 开发者指南

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

创建新项目

如果用户未提供指导，以下是创建新 Angular 项目时遵循的一些默认规则：

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

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

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

如果用户请求了特定版本（例如，Angular 15），则绕过本地安装，严格使用 npx。
命令： npx @angular/cli@<requested_version> ng new <project-name>

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

响应式与数据管理

在管理状态和数据响应式时，请使用 Angular Signals 并查阅以下参考资料：

Signals 概述：核心信号概念（signal、computed）、响应式上下文和 untracked。阅读 signals-overview.md
依赖状态 (linkedSignal)：创建与源信号关联的可写状态。阅读 linked-signal.md
异步响应式 (resource)：将异步数据直接获取到信号状态中。阅读 resource.md
副作用 (effect)：日志记录、第三方 DOM 操作（afterRenderEffect）以及何时不应使用 effects。阅读 effects.md

对于大多数新应用，首选信号表单。在做出表单决策时，请分析项目并考虑以下准则：

如果应用程序使用的是 v21 或更高版本，并且这是一个新表单，首选信号表单。
对于较旧的应用程序或处理现有表单时，请使用与应用程序当前表单策略匹配的适当表单类型。
信号表单：使用 signals 进行表单状态管理。阅读 signal-forms.md
模板驱动表单：用于简单表单。阅读 template-driven-forms.md
响应式表单：用于复杂表单。阅读 reactive-forms.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 组件：构建无头、可访问的组件（手风琴、列表框、组合框、菜单、选项卡、工具栏、树、网格）以及样式化 ARIA 属性。阅读 angular-aria.md

在 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（预渲染）和带水合的 SSR。阅读 rendering-strategies.md
路由过渡动画：启用和自定义视图过渡 API。阅读 route-animations.md

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

在 Angular 中实现样式和动画时，请查阅以下参考资料：

在 Angular 中使用 Tailwind CSS：将 Tailwind CSS 集成到 Angular 项目中。阅读 tailwind-css.md
Angular 动画：使用原生 CSS（推荐）或旧版 DSL 实现动态效果。阅读 angular-animations.md
样式化组件：组件样式和封装的最佳实践。阅读 component-styling.md

在编写或更新测试时，根据任务查阅以下参考资料：

基础：单元测试（Vitest）的最佳实践、异步模式和 TestBed。阅读 testing-fundamentals.md
组件测试工具：稳健的组件交互标准模式。阅读 component-harnesses.md
路由测试：使用 RouterTestingHarness 进行可靠的导航测试。阅读 router-testing.md
端到端 (E2E) 测试：使用 Cypress 进行 E2E 测试的最佳实践。阅读 e2e-testing.md

在使用 Angular 工具时，请查阅以下参考资料：

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

🇺🇸English

Angular Developer Guidelines

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.

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 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.

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>

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.

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

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

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, , and . Read

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 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

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

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, 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

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

Weekly Installs

267

Repository

angular/angular

GitHub Stars

100.2K

First Seen

6 days ago

Security Audits

Gen Agent Trust HubPass SocketPass SnykWarn

Installed on

github-copilot265

codex265

opencode265

cursor265

kimi-cli264

gemini-cli264

React 组合模式指南：Vercel 组件架构最佳实践，提升代码可维护性

106,200 周安装

runInInjectionContext

assertInInjectionContext

Hierarchical Injectors : The EnvironmentInjector vs ElementInjector, resolution rules, modifiers (optional, skipSelf), and providers vs viewProviders. Read hierarchical-injectors.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

Angular开发者指南：从项目创建到组件与信号式状态管理的最佳实践

🇨🇳中文介绍

Angular 开发者指南

创建新项目

相关 Skills

组件

响应式与数据管理

表单

依赖注入

Angular Aria

路由

样式与动画

测试

工具

🇺🇸English

Angular Developer Guidelines

Creating New Projects

Components

Reactivity and Data Management

Forms

Dependency Injection

Angular Aria

Routing

Styling and Animations

Testing

Tooling

最新 Skills