Angular

Google 维护的企业级前端框架,采用 TypeScript 开发,提供路由、表单、HTTP、测试等完整解决方案,适合大型团队和复杂项目。

2016发布年份
Google维护方

核心特性

TypeScript 原生

唯一以 TypeScript 为第一语言的主流框架,完整的类型安全和优秀的 IDE 支持。

TypeScript装饰器

Signals 响应式

Angular 16+ 引入的细粒度响应式原语,替代 Zone.js 的变更检测,性能大幅提升。

signal()computed()effect()

依赖注入

内置强大的 DI 系统,管理服务和模块间的依赖关系,支持层级注入和懒加载。

DI容器Provider

响应式表单

内置表单模块支持模板驱动和响应式两种模式,提供完整的验证和动态表单能力。

Reactive FormsValidators

生态系统

Angular Material

Google 官方 Material Design 组件库,30+ 高质量组件,支持 CDK 和主题定制。

CDKSchematics

NgRx

Angular 的 Redux 实现,基于 RxJS 的响应式状态管理,适合复杂应用场景。

StoreEffectsRxJS

Angular Universal

Angular 的 SSR 方案,提升首屏性能和 SEO,Angular 17+ 内置 SSR 支持。

SSRHydration

第三方组件库

PrimeNG 提供 80+ 组件,NG-ZORRO 是 Ant Design 的 Angular 实现,Clarity 来自 VMware。

PrimeNGNG-ZORROClarity

Angular CLI

官方命令行工具,一键生成组件、服务、模块,内置构建、测试、部署流程。

ng generateng buildSchematics

测试工具

内置 TestBed、Karma/Jasmine 集成,Cypress 和 Playwright 用于 E2E 测试。

TestBedJasmineKarma

快速入门

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

@Component({
  selector: 'app-counter',
  template: `
    <h1>计数: {{ count() }}</h1>
    <p>双倍: {{ double() }}</p>
    <button (click)="increment()">+1</button>
  `
})
export class CounterComponent {
  count = signal(0);
  double = computed(() => this.count() * 2);
  increment() { this.count.update(c => c + 1); }
}

学习资源

官方文档

Angular.dev 提供交互式教程和完整 API 参考。

angular.dev →

Angular Material

Material Design 组件库和 CDK 文档。

material.angular.io →

Nx 文档

Angular 生态最佳的 Monorepo 工具。

nx.dev →