mcpField
A
angular-services

angular-services

github.com/oguzhan18開発7193 回インストール31 週間前に更新
リポジトリ

angular-services について

Angular 開発者向けのサービスと依存性注入のリファレンススキルです。サービス登録、inject()、ファクトリープロバイダー、遅延サービス、共有状態を扱います。

主な機能

  1. 01providedIn によるサービス登録
  2. 02inject() による依存性注入
  3. 03ファクトリープロバイダーの設定
  4. 04遅延サービスの構成
  5. 05サービスを使った状態共有

活用シーン

  1. 01アプリ全体で使うデータサービスの作成
  2. 02HTTP やルーティングの依存関係を注入
  3. 03ファクトリープロバイダーでロガーを設定
  4. 04コンポーネント間でカート状態を共有

インストール

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

$npx skills add https://github.com/oguzhan18/angular-ecosystem-skills --skill angular-services

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

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/discussions/
_INDEX.md
references/docs/
_INDEX.md
references/issues/
_INDEX.md
references/releases/
_INDEX.md

詳細

Angular サービス

バージョン： Angular 21（2025） タグ： サービス、@Injectable、DI

参考資料： サービスガイド • @Injectable API

ベストプラクティス

  • providedIn を指定してサービスを作成します
@Injectable({ providedIn: 'root' })
export class DataService {
  getData() {
    return this.http.get('/api/data');
  }
}
  • inject() 関数を使用します
@Injectable({ providedIn: 'root' })
export class UserService {
  private http = inject(HttpClient);
  
  getUsers() {
    return this.http.get<User[]>('/api/users');
  }
}
  • ファクトリープロバイダーを使用します
@Injectable({
  providedIn: 'root',
  useFactory: () => new LoggerService(environment.production)
})
export class LoggerService {
  constructor(private isProduction: boolean) {}
}
  • 遅延サービスには providedIn: 'any' を使用します
@Injectable({ providedIn: 'any' })
export class LazyService {}
  • コンポーネントでサービスを使用します
@Component({})
export class MyComponent {
  private dataService = inject(DataService);
  
  data$ = this.dataService.getData();
}
  • 複数のサービスを使用します
@Component({})
export class MyComponent {
  private auth = inject(AuthService);
  private http = inject(HttpClient);
  private router = inject(Router);
}
  • 共有状態にはサービスを使用します
@Injectable({ providedIn: 'root' })
export class CartService {
  private items = signal<Item[]>([]);
  
  cartItems = this.items.asReadonly();
  
  addItem(item: Item) {
    this.items.update(items => [...items, item]);
  }
}

コメント

Markdown 対応