综合练习

整合本 track：课程列表 + Router + HttpClient + Reactive Form，模拟企业 B 端迷你应用。完成后读 Angular 项目会轻松许多；CodeRoadMap platform 仍基于 Next.js 核心 + React 核心，admin 用 Vue 3 核心。

学习目标

• 独立完成多文件 Standalone Angular 小应用
• 串联路由、Service、HttpClient 与表单
• 对照 Vue/React Todo 理解概念迁移

核心内容

功能要求

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

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

Service 骨架

@Injectable({ providedIn: "root" })
export class TrackService {
  private http = inject(HttpClient);

  list() { return this.http.get<Track[]>("/api/tracks"); }
  getBySlug(slug: string) { return this.http.get<Track>(`/api/tracks/${slug}`); }
  create(body: CreateTrackDto) { return this.http.post<Track>("/api/tracks", body); }
}

列表页片段

@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（TypeScript 核心）、Interceptor 加 Token

练习