Back to Details

angular

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Angular

Angular

Angular is a platform for building mobile and desktop web applications. Angular 19 (2025) has completely reinvented itself with Signals, Standalone Components, and optional Zone.js.
Angular 是一个用于构建移动端和桌面端 Web 应用的平台。Angular 19（2025 版本）通过 Signals、独立组件（Standalone Components）以及可选的 Zone.js 完成了全面革新。

When to Use

适用场景

  • Enterprise Applications: Strict structure, opinionated, and "batteries-included" (Router, Forms, HTTP).
  • Large Teams: TypeScript and strict patterns make it easier for large teams to collaborate.
  • Long-term Maintenance: Angular's update story is excellent (CLI automates migrations).
  • 企业级应用：结构严谨、约定式设计，且“功能完备”（内置路由、表单、HTTP 模块）。
  • 大型团队：TypeScript 和严格的编码模式便于大型团队协作开发。
  • 长期维护项目：Angular 的更新机制非常完善（CLI 可自动完成迁移）。

Quick Start (Signals)

快速入门（Signals 示例）

typescript
import { Component, signal, computed } from "@angular/core";

@Component({
  selector: "app-counter",
  standalone: true,
  template: `
    <p>Count: {{ count() }}</p>
    <p>Double: {{ double() }}</p>
    <button (click)="increment()">Increment</button>
  `,
})
export class CounterComponent {
  count = signal(0);
  double = computed(() => this.count() * 2);

  increment() {
    this.count.update((c) => c + 1);
  }
}
typescript
import { Component, signal, computed } from "@angular/core";

@Component({
  selector: "app-counter",
  standalone: true,
  template: `
    <p>Count: {{ count() }}</p>
    <p>Double: {{ double() }}</p>
    <button (click)="increment()">Increment</button>
  `,
})
export class CounterComponent {
  count = signal(0);
  double = computed(() => this.count() * 2);

  increment() {
    this.count.update((c) => c + 1);
  }
}

Core Concepts

核心概念

Signals

Signals

The new reactivity primitive. Fine-grained reactivity that allows Angular to drop 
Zone.js
and only update the exact text node that changed.
全新的响应式原语。细粒度响应式设计让 Angular 可以不再依赖 
Zone.js
，仅更新发生变化的具体文本节点。

Standalone Components

独立组件（Standalone Components）

No more 
NgModule
. Components import their dependencies directly.
无需再使用 
NgModule
。组件可直接导入所需依赖。

Deferrable Views (
@defer
)

延迟加载视图（
@defer
）

Built-in syntax to lazy-load parts of templates.
html
@defer (on viewport) {
<heavy-chart />
} @placeholder {
<p>Loading...</p>
}
内置语法支持模板部分内容懒加载。
html
@defer (on viewport) {
<heavy-chart />
} @placeholder {
<p>Loading...</p>
}

Best Practices (2025)

2025 最佳实践

Do:
  • Use Signals: Prefer 
    signal()
    over 
    BehaviorSubject
    for component state.
  • Use 
    inject()
    : Prefer the 
    inject(Service)
    function over constructor dependency injection.
  • Go Zoneless: Enable 
    provideExperimentalZonelessChangeDetection()
    for better performance.
Don't:
  • Don't use 
    NgModule
    : Unless maintaining legacy code.
  • Don't use 
    CommonModule
    : Use new control flow syntax (
    @if
    , 
    @for
    ) instead of 
    *ngIf
    , 
    *ngFor
    .
推荐做法：
  • 使用 Signals：组件状态管理优先使用 
    signal()
    而非 
    BehaviorSubject
    。
  • 使用 
    inject()
    ：优先使用 
    inject(Service)
    函数替代构造函数依赖注入。
  • 启用无 Zone 模式：启用 
    provideExperimentalZonelessChangeDetection()
    以获得更好的性能。
不推荐做法：
  • 不要使用 
    NgModule
    ：除非维护遗留代码。
  • 不要使用 
    CommonModule
    ：使用新的控制流语法（
    @if
    、
    @for
    ）替代 
    *ngIf
    、
    *ngFor
    。

References

参考资料