综合练习

整合 /roadmaps/angular 核心节点：课程列表 CRUD 迷你应用，串联 Standalone 组件、Router、HttpClient、Reactive Forms 与 DI。完成后可流畅阅读企业 Angular 项目；本站实战仍以 Next.js 核心 + Spring Boot 为主栈。

学习目标

• 独立完成多文件 Standalone Angular 小应用
• 串联路由、Service、HttpClient、表单与 Guard
• 对照 React/Vue 实现，写简短概念迁移笔记

核心概念

功能要求

路由	功能
/	课程 track 列表，loading / error 三态
/tracks/:slug	详情页，显示 title 与 description
/tracks/new	新增 track 表单，POST 后跳列表

• TrackService：list()、getBySlug()、create()，对接 /api/tracks 或 mock
• authGuard（可选）：/tracks/new 需登录

列表页片段

@Component({
  standalone: true,
  imports: [RouterLink, AsyncPipe],
  template: `
    @if (tracks$ | async; as tracks) {
      <ul>
        @for (t of tracks; track t.slug) {
          <li><a [routerLink]="['/tracks', t.slug]">{{ t.title }}</a></li>
        }
      </ul>
    } @else { <p>加载中…</p> }
    <a routerLink="/tracks/new">新增</a>
  `,
})
export class TrackListComponent {
  tracks$ = inject(TrackService).list().pipe(catchError(() => of([])));
}

验收清单

• ng serve 可访问三路由；直接输入 URL 不白屏
• HttpClient 失败时有 error UI 与重试
• 表单校验：slug 仅小写连字符
• 延伸：interface Track、Interceptor 加 Token、NgRx 可选

练习

• 完成 mini 应用并 ng build 通过
• 写 200 字对比 Angular 与 React 实现同一列表页的差异
• 回到 /roadmaps/angular 勾选已完成节点

小结

路线图收官：CLI + 组件 + 绑定 + DI + HttpClient + Router + Forms。 企业岗位可继续 NG-ZORRO、NgRx 与 SSR；主栈请回 Next.js + Spring Boot。