Back to Details

angular-coding

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Angular Coding Standards

Angular编码规范

Version-aware Angular development patterns.
适配不同版本的Angular开发模式。

Pre-Edit Analysis

编辑前分析

Trước khi edit Angular code, read: → 
C:\Users\BLogic\.cursor\skills\project-scanner\SKILL.md
Quality gates cho high-risk edits (change signature, shared service, delete/rename).
在编辑Angular代码之前，请阅读： → 
C:\Users\BLogic\.cursor\skills\project-scanner\SKILL.md
针对高风险编辑（修改签名、共享服务、删除/重命名）的质量管控。

Setup

设置步骤

Step 0: Scan Existing Patterns (Nếu project có code)
Trước khi tạo mới, scan project để follow convention đang dùng:
Glob: **/*.service.ts → Xem service pattern
Glob: **/*.component.ts → Xem component pattern  
Glob: **/*.model.ts → Xem model/interface pattern
Grep: FormGroup → Xem form pattern
Step 1: Detect Angular Version
Read 
package.json
and find 
@angular/core
version:
json
"@angular/core": "^17.0.0"  // → v17
"@angular/core": "~15.2.0"  // → v15
Step 2: Load Appropriate Patterns
Based on detected version, read the relevant files:
VersionFiles to Read
v13-14base.md + module-based.md
v15-16base.md + standalone.md + signals.md (preview)
v17base.md + standalone.md + signals.md + control-flow.md
v18-19+base.md + standalone.md + signals.md + control-flow.md + advanced-v18-19.md
步骤0：扫描现有编码模式（如果项目已有代码）
在创建新代码之前，扫描项目以遵循当前使用的约定：
Glob: **/*.service.ts → 查看服务模式
Glob: **/*.component.ts → 查看组件模式  
Glob: **/*.model.ts → 查看模型/接口模式
Grep: FormGroup → 查看表单模式
步骤1：检测Angular版本
读取
package.json
并查找
@angular/core
版本：
json
"@angular/core": "^17.0.0"  // → v17
"@angular/core": "~15.2.0"  // → v15
步骤2：加载对应版本的编码模式
根据检测到的版本，读取相关文件：
版本需读取的文件
v13-14base.md + module-based.md
v15-16base.md + standalone.md + signals.md（预览版）
v17base.md + standalone.md + signals.md + control-flow.md
v18-19+base.md + standalone.md + signals.md + control-flow.md + advanced-v18-19.md

Quick Reference

快速参考

Naming Conventions (All Versions)

命名规范（所有版本）

TypeConventionExample
SignalPrefix 
$
$user
, 
$state
ObservableSuffix 
$
isLoading$
, 
data$
PrivatePrefix 
_
_destroyed$
, 
_load()
类型规范示例
Signal前缀
$
$user
, 
$state
Observable后缀
$
isLoading$
, 
data$
私有成员前缀
_
_destroyed$
, 
_load()

Core Principles

核心原则

PriorityPrincipleGuideline
🥇Angular-native first95% dùng Angular built-in (reactive forms, validators, pipes, directives). 5% custom code khi Angular không hỗ trợ
🥈PerformanceOnPush, signals, object mapping > array loop, minimal subscriptions
🥉ReadabilitySimple code, dễ đọc, dễ sửa cho dev khác. OOP + SOLID
优先级原则指南
🥇优先使用Angular原生能力95%的场景使用Angular内置功能（响应式表单、验证器、管道、指令）。仅当Angular不支持时，再编写5%的自定义代码
🥈性能优先使用OnPush变更检测、Signal、对象映射优于数组循环、最小化订阅
🥉可读性优先代码简洁易懂，便于其他开发者阅读和修改。遵循OOP + SOLID原则

Decision Flow

决策流程

Có vấn đề cần giải quyết?
    ↓
Angular có built-in? (FormControl, Pipe, Directive, Validator...)
    ├─ YES → Dùng Angular (95%)
    └─ NO  → Tạo custom với SOLID pattern (5%)
有问题需要解决？
    ↓
Angular是否有内置解决方案？（FormControl、Pipe、Directive、Validator等）
    ├─ 是 → 使用Angular原生能力（95%场景）
    └─ 否  → 遵循SOLID模式编写自定义代码（5%场景）

File Index

文件索引

  • base.md - Common patterns all versions
  • module-based.md - NgModule patterns (v13-14)
  • standalone.md - Standalone components (v15+)
  • signals.md - Signals API (v16+)
  • control-flow.md - @if/@for/@defer (v17+)
  • advanced-v18-19.md - Signal inputs, linkedSignal (v18+)
  • base.md - 所有版本通用的编码模式
  • module-based.md - NgModule模式（v13-14）
  • standalone.md - 独立组件（v15+）
  • signals.md - Signal API（v16+）
  • control-flow.md - @if/@for/@defer（v17+）
  • advanced-v18-19.md - Signal输入、linkedSignal（v18+）