mcpField
D
d2-02-api-service

d2-02-api-service

github.com/softinter-chiangrai開発046 回インストール9 週間前に更新
リポジトリ

d2-02-api-service について

up-api の CRUD エンドポイントで公開されるエンティティ向けに、HttpClient を使う Angular サービスを作成するスキルです。対象エンティティが未確定なら確認し、この手順では再デプロイは不要です。

主な機能

  1. 01Angular サービスのテンプレート
  2. 02エンティティ別 CRUD サービス
  3. 03HttpClient の設定案内

活用シーン

  1. 01up-api のエンティティ用サービス作成
  2. 02app.config.ts での provideHttpClient 登録

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/softinter-chiangrai/up-ai-skill-training --skill d2-02-api-service

インストール後、Claude Code で/d2-02-api-serviceを入力して読み込まれたか確認します。

詳細

2日目・ステップ 2 — API サービス

この会話でエンティティがまだ確定していない場合は、どのエンティティかを確認します（up-api の CRUD エンドポイントで公開されているものと一致する必要があります）。

up-app/src/app/services/<entity>.service.ts：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

export interface <Entity> {
  id?: number;
  // one field per column from the Day 1 entity spec
}

@Injectable({ providedIn: 'root' })
export class <Entity>Service {
  private base = 'http://localhost:8080/api/<entity>s';
  constructor(private http: HttpClient) {}

  getAll(): Observable<<Entity>[]> { return this.http.get<<Entity>[]>(this.base); }
  getById(id: number): Observable<<Entity>> { return this.http.get<<Entity>>(`${this.base}/detail/${id}`); }
  save(item: <Entity>): Observable<<Entity>> { return this.http.post<<Entity>>(`${this.base}/save`, item); }
  update(id: number, item: <Entity>): Observable<<Entity>> { return this.http.put<<Entity>>(`${this.base}/update/${id}`, item); }
  delete(id: number): Observable<void> { return this.http.delete<void>(`${this.base}/${id}`); }
}

まだ登録されていない場合は、app.config.ts に provideHttpClient() を登録します。このステップでは再デプロイは不要です。

コメント

Markdown 対応