CodeRoadMap
首页路线题库资源库文章社区
CodeRoadMap

程序员的学习成长路线图。内容免费开放,登录后可同步路线图与课时进度。

由 程序员柏风 独立维护 · 关于作者

学习

  • 路线图
  • 课程
  • 面试题
  • 文章
  • 我

更多

  • 资源
  • 社区
  • 关于作者
  • 内容说明

© 2026 CodeRoadMap

津ICP备2026012044号-1·津公网安备12011002026155号·coderoadmap@126.com
Angular 核心/课时/Angular 是什么
RawBlame
课时目录12 节

Angular 核心

  1. 01Angular 是什么
  2. 02CLI 与项目结构
  3. 03组件与模板
  4. 04指令
  5. 05服务与依赖注入
  6. 06HttpClient
  7. 07Router
  8. 08表单
  9. 09RxJS 入门
  10. 10Signals 新特性
  11. 11Angular vs React/Vue
  12. 12综合练习

Angular 是什么

全框架 vs React/Vue;企业级 TypeScript 前端。

25 分钟

Angular 是什么

学完 JavaScript 核心 与 TypeScript 核心 后,Angular 提供一套 TypeScript 优先 的全栈前端框架:组件、路由、HTTP、表单、依赖注入开箱即用。CodeRoadMap platform 使用 Next.js + React;admin 使用 Vue;Angular 列入 /roadmaps/frontend 企业级 节点,面向银行、政务、大型 B 端岗位。

学习目标

  • 理解 Angular「全框架」与 React/Vue「库 + 生态」的差异
  • 明确 Angular 在本站 stack 中的定位
  • 对照 Vue 3 核心 与 React 核心 建立概念映射

核心内容

声明式 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(速览)

AngularReactVue
语言TypeScript 默认JS/TSJS/TS
模板HTML + 指令JSXHTML 模板
状态Signals / RxJSuseStateref / reactive
DI内置无(Context)provide/inject
路由/HTTP官方包社区选型Vue Router

生态位置

层Angular 常见选型
框架Angular 17+(Standalone)
CLI@angular/cli
UIAngular Material / NG-ZORRO
状态Signals + RxJS / NgRx

国内 金融、电信、政企 仍有大量 Angular 存量与招聘;读懂 Angular 是路线图技能,本站实战仍以 Next.js 核心 为主。

练习

  • 浏览 Angular 中文文档 首页,阅读「为何选 Angular」
  • 对照 roadmap 中 Angular 节点,列出与 React track 的三处概念对应

小结

Angular = TypeScript 全框架 + DI + 官方生态。 下一课用 CLI 创建项目。

加载本节练习…
下一课 →CLI 与项目结构