Angular 22+ 教程 01：初识 Angular——框架定位与技术选型

提到 Angular，不少老开发者脑中还停留在”笨重、模板老派、学习曲线陡峭”的印象，而这些印象大多来自 AngularJS 或 Angular 2~8 的岁月。到 2026 年的 v22，Angular 已经完成了一次彻底的自我重塑：信号驱动的响应式系统、默认 Zoneless 的变更检测、原生块状控制流、默认 AOT 编译与 strictTemplates。它仍然是那个”全家桶”，但内里早已现代化。本系列将基于 Angular v22 系统讲解现代 Angular 的核心知识，本文先回答第一个问题：Angular 是什么，它凭什么值得投入。

框架，而不是库

Angular 是由 Google 维护并开源的前端框架，Google 内部数千个产品长期使用它构建界面。理解 Angular 的第一步，是分清”框架”与”库”：

维度	库（如 React）	框架（如 Angular）
定位	提供 UI 渲染这一层	提供构建完整应用的全部基础设施
路由	社区方案自选（React Router 等）	内置 @angular/router
表单	自选（TanStack Form 等）	内置模板驱动/响应式表单、Signal Forms
HTTP	自选（axios、fetch 封装）	内置 HttpClient（默认 Fetch API）
状态管理	自选（Redux、Zustand 等）	内置 Signals
工程化	自选脚手架与构建链	官方 CLI 一条龙
测试	自选测试框架与工具	内置测试运行器与 TestBed

这种”batteries included”的设计带来一个直接后果：任意两个 Angular 项目长得都差不多。路由怎么写、服务怎么注入、表单怎么校验、测试怎么组织，都有官方答案。对于个人项目这可能是约束，对于几十人协作、生命周期以年计的企业项目，这是生产力。

TypeScript 优先的框架

Angular 从 Angular 2 开始就用 TypeScript 编写，也是三大前端方案中唯一把 TS 当作”母语”的：装饰器（@Component）、依赖注入元数据、模板类型检查都与 TS 深度绑定。Angular v22 要求 TypeScript 6，并且 strictTemplates 默认开启——模板里的绑定表达式与组件类代码享受同一套类型检查。

一个能说明问题的对比：

import { Component, input, signal } from '@angular/core';

interface User {
  id: number;
  name: string;
  email?: string;
}

@Component({
  selector: 'app-user-card',
  template: `
    @if (user().email; as email) {
      <a [href]="'mailto:' + email">{{ user().name }}</a>
    } @else {
      <span>{{ user().name }}（未留邮箱）</span>
    }
  `,
})
export class UserCardComponent {
  user = input.required<User>();
  clicked = signal(0);
}

user 是强类型的，模板里拼错字段名、传错类型，编译期直接报错，而不是等到运行时白屏。类型即文档，重构即安全。

企业级适用性

Angular 常年霸占大型企业、银行、保险、电信、医疗等行业的技术选型清单，并非偶然：

能力	企业视角的价值
统一规范	全家桶消除了”选型之争”，代码风格高度一致，人员流动成本低
语义化版本 + 自动迁移	每 6 个月一个 major 版本，`ng update` 携带自动迁移脚本（codemods），升级路径明确
CLI 工程化	脚手架、构建、测试、 lint 集成一体，新人第一天就能交付
依赖注入（DI）	天然的可测试性与模块化，服务可替换、可 mock
SSR 与增量 hydration	v22 默认增量 hydration，首屏与 SEO 开箱即用
@angular/aria	无障碍能力 GA，合规场景（政府、金融）友好
i18n	内置国际化与 ICU 消息格式

一句话总结：Angular 为”长期维护的大型应用和多团队协作”做了大量设计取舍，这些取舍在小项目里可能显得繁琐，在大项目里全是收益。

v22：被 signals 与 zoneless 重塑的 Angular

过去几年 Angular 的演进节奏非常快，理解这条时间线有助于摆脱旧印象：

版本	关键变化
v16	Signals 引入
v17	新控制流 `@if` / `@for` / `@switch`
v18	`@let` 模板局部变量；Zoneless 开发者预览
v19	standalone 组件成为默认；signal `input()` / `model()` / `output()` 稳定
v21	Zoneless 稳定，变更检测完全由信号驱动；`provideHttpClient()` 不再必需
v22	OnPush 成为默认策略（原 Default 更名 Eager）；Signal Forms 稳定；`@Service()` 装饰器；`resource()` / `httpResource()` 稳定

对照常见的旧印象：

旧印象	v22 的事实
“要学 NgModule，样板代码多”	standalone 默认，新项目根本没有 NgModule
“依赖 zone.js，性能差”	Zoneless 默认，无 zone.js，信号驱动精准更新
“模板语法落后于 JSX”	`@if` / `@for` / `@let` / `@defer`，编译期类型检查不输 JSX
“服务要写一堆装饰器样板”	`@Service()` 一行搞定，配合 `inject()`
“变更检测全家桶扫描，卡”	OnPush 默认 + 细粒度信号依赖追踪

六大核心概念总览

先建立全局地图，后续每篇展开一个专题：

flowchart LR
  subgraph app["Angular 应用（standalone，v22）"]
    C["组件 Component<br/>模板 + 类"]
    T["模板 Template<br/>绑定 / 控制流"]
    SIG["信号 Signals<br/>响应式状态"]
    S["服务 Service<br/>@Service()"]
    DI["依赖注入<br/>inject()"]
    R["路由 Router"]
    CD["变更检测<br/>OnPush 默认 / Zoneless"]
  end
  C --> T
  C -.状态.-> SIG
  C --> DI --> S
  R --> C
  SIG --> CD
  T --> CD

1）组件与模板：组件是视图的基本单元，由 @Component 装饰的类加上模板构成。v22 中组件默认 standalone，通过 imports 声明依赖，不再需要模块中转（第 7 篇）。

2）数据绑定与信号：插值 {{ }}、属性绑定 [ ]、事件绑定 ( )、双向绑定 [( )] 构成数据流；状态用 signal() / computed() / input() / model() 表达（第 7、21 篇）。

3）指令：属性型指令改变元素行为（如高亮），结构型指令与块控制流负责增删 DOM（第 8、11、12 篇）。

4）服务与依赖注入：跨组件共享的逻辑放服务里，v22 用 @Service() 声明、inject() 注入，懒加载场景用 injectAsync()（第 18、19 篇）。

5）路由：@angular/router 提供路径到组件的映射、守卫、懒加载与嵌套路由（第 24 篇）。

6）变更检测：v22 默认 OnPush + Zoneless，框架只在与信号关联的视图上做最小化更新，旧的 Eager（原 Default）策略仅在明确指定时使用（第 20 篇）。

一段浓缩了上述概念的 v22 代码：

import { Component, Service, computed, inject, signal } from '@angular/core';

@Service()
export class CounterStore {
  count = signal(0);
  doubled = computed(() => this.count() * 2);
  increment() {
    this.count.update(v => v + 1);
  }
}

@Component({
  selector: 'app-root',
  template: `
    <button type="button" (click)="store.increment()">
      点了 {{ store.count() }} 次（x2 = {{ store.doubled() }}）
    </button>
    @if (store.count() >= 10) {
      <p>已经点了 {{ store.count() }} 次，歇会儿吧</p>
    }
  `,
})
export class AppComponent {
  store = inject(CounterStore);
}

没有 NgModule、没有 zone.js、没有手动变更检测，这就是 2026 年的 Angular。

什么项目适合 Angular

选型时可以用下面这张清单快速判断：

团队规模较大、成员水平参差、需要强约定统一风格
应用生命周期长（三年以上），升级与可维护性比”上手快”更重要
业务系统复杂：大量表单、表格、权限、流程（ERP、CRM、后台管理）
对类型安全、测试覆盖、无障碍合规有硬性要求
需要 SSR、SEO、PWA 等完整能力但不想自己拼装工具链

反过来，如果你在做一个短平快的活动页、原型 Demo，或者团队已经深度绑定 React/Vue 生态，Angular 的前期学习投入未必划算。下一篇会把 Angular 与 React、Vue 乃至 ASP.NET Core 放到同一张桌上逐维度比较。

小结

Angular 是 Google 维护的全框架：路由、表单、HTTP、状态、测试、SSR 全部内置，换取一致的工程规范。
TypeScript 优先且 strictTemplates 默认开启，模板与类代码共享类型安全。
企业级的核心价值在：统一规范、CLI 工程化、DI 可测试性、明确的升级路径。
v22 的现代形象：Signals、Zoneless、OnPush 默认、新控制流、@Service()，旧印象需要清零重估。
六大核心概念：组件与模板、绑定与信号、指令、服务与 DI、路由、变更检测，是整个系列的骨架。

系列导航

下一篇：Angular 与 React / Vue / ASP.NET Core 的比较
延伸阅读：环境搭建与 Getting Started · 新的控制流 @if / @for / @switch · Signals——响应式编程新范式

CHARLIE SAYS