BETA

[Angular 基礎]Service概要

投稿日:2020-01-27
最終更新:2020-01-27

この記事の概要

  • Angular のサービスについて解説しています。
    • Service をアプリケーション全体で共有するケースと、Component 単位で利用するケースについて記載しています。
    • Module 単位で利用するケースについては記載していません、すみません。

筆者について

  • 主にサーバサイド開発を経験しており、フロントエンドは React に少し触れたことのある程度です。

参照した情報源

https://angular.jp/guide/architecture-services

役割

  • Service は、アプリケーションや機能を構成するための部品として扱われます。
  • View から独立した処理や、View から利用される処理を Service として定義することができます。

ユースケース

  • View に表示するためのデータを、データベースから取得する。
  • 複数の View で使い回すデータを保持する。
  • 他の Service からデータを取得し、データベースを更新する。

インスタンスのライフサイクル

  • Service インスタンスのライフサイクルには、以下のようなパターンがあります。
    • アプリケーション全体で1つの Service を保持する
    • Module 毎に Service を保持する(この記事には記載していません)
    • Component 毎に Service を保持する

アプリケーション全体で1つの Service を保持する

  • providedIn: 'root' が指定された Service は、アプリケーション全体で Singleton となります。
  • アプリケーション全体 でデータを共有したい場合などに有用です。
// サンプルコード  
// src/app/service-in-root/service-in-root.service.ts  
@Injectable({  
  providedIn: 'root',  
);  

export class ServiceInRootService {  
  // ... 省略 ...  
}  

Component 毎に Service を保持する

  • 前述のいずれにも該当しない Service は、Component 毎に生成されます。
  • Component から処理を切り分けたい場合などに有用です。

Service ファイルの生成方法

  • ng generate service <サービス名> コマンドを実行することで生成できます。
    • 生成されるサービスには providedIn: 'root' が指定されていますが、不要な場合は削除して問題有りません。
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@sutoneaの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう