Angular 是什么
全框架 vs React/Vue;企业级 TypeScript 前端。
25 分钟
Angular 是什么
学完 JavaScript 核心 与 TypeScript 核心 后,Angular 提供一套 TypeScript 优先 的全栈前端框架:组件、路由、HTTP、表单、依赖注入开箱即用。CodeRoadMap platform 使用 Next.js + React;admin 使用 Vue;Angular 列入 /roadmaps/frontend 企业级 节点,面向银行、政务、大型 B 端岗位。
学习目标
核心内容
声明式 UI
Angular 同样遵循 UI = f(state):模板绑定数据,变更检测更新 DOM。
import { Component } from "@angular/core";
@Component({
selector: "app-track-list",
standalone: true,
template: `
<ul>
@for (t of tracks; track t.id) {
<li>{{ t.title }}</li>
}
</ul>
`,
})
export class TrackListComponent {
tracks = [
{ id: 1, title: "Angular 核心" },
{ id: 2, title: "TypeScript 核心" },
];
}
Angular vs React/Vue(速览)
| Angular | React | Vue | |
|---|---|---|---|
| 语言 | TypeScript 默认 | JS/TS | JS/TS |
| 模板 | HTML + 指令 | JSX | HTML 模板 |
| 状态 | Signals / RxJS | useState | ref / reactive |
| DI | 内置 | 无(Context) | provide/inject |
| 路由/HTTP | 官方包 | 社区选型 | Vue Router |
生态位置
| 层 | Angular 常见选型 |
|---|---|
| 框架 | Angular 17+(Standalone) |
| CLI | @angular/cli |
| UI | Angular Material / NG-ZORRO |
| 状态 | Signals + RxJS / NgRx |
国内 金融、电信、政企 仍有大量 Angular 存量与招聘;读懂 Angular 是路线图技能,本站实战仍以 Next.js 核心 为主。