Angular 入门与 CLI

对照 /roadmaps/angular 路线图起点：Angular 是 TypeScript 优先 的全栈前端框架，CLI 脚手架、Standalone 组件、官方 Router/HttpClient 开箱即用。学完 TypeScript 核心 后，本 track 系统覆盖路线图节点；本站 platform 用 Next.js 核心 + React，Angular 面向企业 B 端岗位。

学习目标

• 理解 Angular「全框架」与 React「库 + 生态」的定位差异
• 用 CLI 创建 Standalone 项目并读懂目录结构
• 对照路线图「Learn the Basics」节点建立学习顺序

核心概念

CLI 与项目结构

npm install -g @angular/cli
ng new my-app --standalone --routing --style=css
ng serve

典型目录：src/app/ 放组件与路由；app.config.ts 注册全局 provider；angular.json 管构建。Angular 17+ 默认 Standalone，不再强制 NgModule 启动。

最小 Standalone 组件

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  standalone: true,
  template: `<h1>{{ title }}</h1>`,
})
export class AppComponent {
  title = "Angular 路线图实战";
}

与 React/Next 对照

	Angular	React / Next.js
创建	ng new	create-next-app / Vite
语言	TypeScript 默认	JS/TS 可选
模板	HTML + 指令	JSX
路由/HTTP	官方包	社区选型 / App Router

练习

• 用 CLI 创建项目，ng serve 后修改首页标题
• 打开 /roadmaps/angular，勾选已学「Basics」子项

小结

Angular = CLI + Standalone + 官方全家桶。 下一课组件与生命周期。