Angular 是由 Google 维护的 TypeScript 优先的 Web 应用框架。它将核心功能和可选功能作为一组 TypeScript 库实现，提供了一整套工具、API 和最佳实践，帮助开发者构建快速、可靠、可扩展的应用。

核心定位：适合大型团队协作、长期维护的企业级项目。与 React(灵活但需自选生态)和 Vue(渐进式、上手快)不同，Angular 是"开箱即用"的全家桶方案。

 核心架构(八大基石)

模块(NgModule)

Angular 应用由一组 NgModule 定义。每个模块是一个带有 @NgModule 装饰器的类，负责将相关的组件、指令、管道和服务组织成内聚的功能块。

typescript

1@NgModule({

2 declarations: [AppComponent], // 声明本模块拥有的组件/指令/管道

3 imports: [BrowserModule], // 导入依赖的其他模块

4 providers: [Logger], // 注册服务提供者

5 bootstrap: [AppComponent] // 根模块的启动组件

6})

7export class AppModule {}

注意：Angular v22 中，随着 Standalone Components 的普及，NgModule 的使用正在逐步简化，但理解其概念仍是基础。

组件(Component)

组件是 Angular 的基本构建单元，每个组件由三部分组成：

类：包含数据和业务逻辑

模板：定义视图的 HTML 结构

元数据：通过 @Component 装饰器关联类与模板

typescript

1@Component({

2 selector: 'app-article',

3 template: `

{{ title }}

`

4})

5export class ArticleComponent {

6 title = 'Angular 大全';

7}

模板与数据绑定

模板将 HTML 与 Angular 的标记组合，支持四种绑定方式：

表格

下载为表格

导出为图片

绑定类型语法方向用途

插值{{ value }}组件 → DOM显示数据

属性绑定[src]="imageUrl"组件 → DOM设置属性

事件绑定(click)="onClick()"DOM → 组件响应用户操作

双向绑定[(ngModel)]="name"双向表单输入

指令(Directive)

指令是带有 @Directive 装饰器的类，用于扩展 HTML 元素的行为：

组件指令：带有模板的指令(最常见的形式)

结构指令：改变 DOM 布局(如 @if、@for、@switch)

属性指令：改变元素外观或行为(如 ngClass、ngStyle)

服务与依赖注入(DI)

服务用于封装与视图无关的逻辑(如 HTTP 请求、日志、数据访问)。通过依赖注入，服务可以被注入到任何组件中，实现代码的模块化和可测试性。

typescript

1@Injectable({ providedIn: 'root' })

2export class ArticleService {

3 getArticles() { /* ... */ }

4}

v22 新特性：引入了 @Service() 装饰器，取代 @Injectable({ providedIn: 'root' }) 的写法，更加简洁。

路由(Router)

Angular Router 提供功能丰富的导航能力，包括路由守卫、数据预加载、惰性加载等：

typescript

1const routes: Routes = [

2 { path: 'articles', component: ArticleListComponent },

3 { path: 'articles/:id', component: ArticleDetailComponent },

4 { path: 'admin', loadChildren: () => import('./admin/admin.module') }

5];

管道(Pipe)

管道用于在模板中转换显示值，如日期格式化、货币格式化等：

html

1

发布日期：{{ article.date | date:'yyyy-MM-dd' }}

2

价格：{{ price | currency:'CNY' }}

生命周期钩子

组件从创建到销毁会经历一系列生命周期阶段，开发者可以在关键节点插入自定义逻辑：

文本

1ngOnChanges → ngOnInit → ngDoCheck → ngAfterContentInit

2→ ngAfterContentChecked → ngAfterViewInit → ngAfterViewChecked

3→ ngOnDestroy

 Signals：现代响应式核心

Signals 是 Angular 近年来最重要的架构革新，提供了细粒度的响应式状态管理：

typescript

1// 创建信号

2count = signal(0);

3

4// 计算信号(自动追踪依赖)

5doubleCount = computed(() => this.count() * 2);

6

7// 副作用(响应信号变化)

8effect(() => console.log('Count changed:', this.count()));

Signal 的优势：

编译时即可确定哪些组件需要更新，无需脏检查整个组件树

与 Zoneless 变更检测配合，彻底摆脱 zone.js 的运行时开销

天然支持懒加载和代码拆分

 最新版本速览(v20 → v22)

Angular v20(2026年5月)

effect、linkedSignal、toSignal 稳定

Zoneless 变更检测进入开发者预览

增量式 Hydration 正式 GA

路由级渲染模式配置

Angular v21(2025年11月)

Signal Forms 实验性发布

不再默认包含 zone.js

引入 AI 驱动开发工具(ai_tutor、MCP 服务器)

Angular Aria 组件库开发者预览

Angular v22(2026年7月，最新)

Signal Forms 稳定：将响应式表单的强类型与模板驱动表单的易用性融合

OnPush 成为默认变更检测策略：之前的 Default 重命名为 Eager

@Service() 装饰器：取代 @Injectable({ providedIn: 'root' })

injectAsync：支持服务懒加载和代码拆分

resource / httpResource 稳定：将异步数据建模为信号

@boundary 错误边界(开发者预览)：类似 React Error Boundary

Webpack 弃用：全面转向 Vite + esbuild 构建体系

WebMCP 实验性支持：面向 AI 编码智能体的新工具

 生态与工具链

表格

下载为表格

导出为图片

工具用途

Angular CLI项目脚手架、构建、测试、部署的一站式命令行工具

Angular DevTools浏览器扩展，可视化调试组件树、DI 树、性能火焰图

Angular MaterialGoogle 设计的 Material Design 组件库

Angular Aria基于 Signals 的无障碍 UI 组件库(v22 稳定)

NgRx基于 RxJS 的状态管理库(类似 Redux)

Angular Universal服务端渲染(SSR)，提升首屏速度和 SEO

 项目结构(现代 Standalone 模式)

文本

1src/

2├── app/

3│ ├── components/ # 可复用 UI 组件

4│ ├── pages/ # 页面级组件(路由目标)

5│ ├── services/ # 业务逻辑服务

6│ ├── models/ # TypeScript 接口/类型

7│ ├── guards/ # 路由守卫

8│ ├── interceptors/ # HTTP 拦截器

9│ ├── pipes/ # 自定义管道

10│ ├── directives/ # 自定义指令

11│ └── app.routes.ts # 路由配置

12├── assets/ # 静态资源

13├── environments/ # 环境配置

14├── index.html

15├── main.ts # 应用入口

16└── styles.css # 全局样式

 针对 CMS 项目的实战建议

结合你的 Express + MongoDB 后端，Angular 在前端可以这样配合：

管理后台：使用 Angular Material 快速搭建文章管理、用户管理、权限配置等 CRUD 界面

HTTP 通信：通过 HttpClient 与 Express API 交互，配合 HttpInterceptor 统一处理 Token 注入和错误拦截

路由守卫：使用 CanActivate 守卫实现后台权限控制

惰性加载：按功能模块拆分(如 /admin、/editor)，按需加载，减小首屏体积

SSR 预渲染：对于 CMS 的公开页面，使用 Angular Universal 做服务端渲染，提升 SEO 效果

 学习路线推荐

基础入门：TypeScript → 组件/模板/数据绑定 → 指令/管道

核心进阶：服务与 DI → 路由与导航 → 表单(Signal Forms)→ HTTP 通信

架构提升：Signals 响应式 → 变更检测机制 → 惰性加载 → 性能优化

工程化：单元测试(Jasmine/Karma)→ E2E 测试(Cypress)→ CI/CD → 部署