HTTP Client 與服務配置

HTTP Client 的變更

1. 新的配置方式

在 app.config.ts 中設定：

import { provideHttpClient } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient()  // 新的方式，要打 API 要加這行
  ]
};

2. 依賴注入的新舊寫法

舊版寫法（建構函數注入）：

constructor(private http: HttpClient) { }

新版寫法（使用 inject）：

private http = inject(HttpClient);

Master Service 實作範例

// master.service.ts
import { HttpClient } from '@angular/common/http';
import { Injectable, inject } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class MasterService {
  private http = inject(HttpClient);
  
  // 取得巴士路線
  getRoutes() {
    return this.http.get('api/routes');
  }

  // 訂票
  bookTicket(data: any) {
    return this.http.post('api/booking', data);
  }
}

在組件中使用

// search.component.ts
import { Component, inject } from '@angular/core';
import { MasterService } from '../service/master.service';

@Component({
  selector: 'app-search',
  // ...
})
export class SearchComponent {
  private masterService = inject(MasterService);
  
  searchRoutes() {
    this.masterService.getRoutes().subscribe(
      routes => console.log(routes)
    );
  }
}

重點摘要

• Angular 17+ 棄用 HttpClientModule

• 使用 provideHttpClient() 配置 HTTP

• 推薦使用 inject() 進行依賴注入

• Service 統一管理 API 請求