What is Angular Service – Angular 9 Service by Example
Angular サービスとは何かを学び、最新の Angular 9 バージョンで例を作成します。
Angular サービスは、依存性注入によってコンポーネントや他のサービスと配線することができるシングルトンである。
ウィキペディアによると、
In software engineering, dependency injection is a technique where one object supplies the dependencies of another object.
この用語に脅かされないように、これは単に Angular（または Angular の一部、インジェクター）がサービスのインスタンスを作成して、要求元のコンポーネントにインスタンスを提供することを意味します。
> ✋ Angular 9/8 サービス & Dependency Injection via providedIn, root & any Tutorial 👈
Angular docs:
DI は Angular フレームワークに組み込まれ、新しいコンポーネントに対し、それらが必要とするサービスとその他のものを提供するのにいたるところで使用されています。 コンポーネントはサービスを消費します。つまり、サービスをコンポーネントに注入し、コンポーネントがそのサービス クラスにアクセスできるようにすることができます。
Angular でクラスをサービスとして定義するには、@Injectable() デコレーターを使用して、Angular が依存関係としてコンポーネントに注入することを可能にするメタデータを提供します。
- サービスのメタデータを @Injectable() デコレーターに渡す (サービスはどこでも利用できる)、
- 特定のモジュール内のプロバイダーの配列 (サービスはモジュールのコンポーネントとサービスでのみ利用可能)、
- 特定のコンポーネント内のプロバイダーの配列 (サービスはそのコンポーネントでのみ利用可能) の3つの方法で行うことができます。
Angular 9 Service by Example
では、例としてサービスを作成してみましょう。
Angular プロジェクトを作成し、Angular CLI v9 がインストールされていることを確認します。
コマンド ライン インターフェイスに向かい、プロジェクトのフォルダーに移動します。
$ cd your-angular-project次に、次のコマンドを実行して、新しいサービスを生成します。service.ts ファイルを開きます。
@Injectable({
providedIn: 'root'
})
export class MyExampleService {
}providedIn プロパティのおかげで、提供する必要がある機能を実装する以外は、このサービスの使用を開始するために何もする必要がありません。
また、新しいサービス (たとえば、組み込みの HttpClient サービス) に、そのコンストラクターを介して他のサービスを注入できます。
import { HttpClient } from '@angular/common/http';@Injectable({
providedIn: 'root'
})
export class MyExampleService { constructor(private httpClient: HttpClient) { }
}サービスのメソッドを実装したら、他のコンポーネントにインポートおよび注入して、コンポーネント内でサービスのパブリック メソッドを呼び出すことができます。
Angular docs:
Typically, a component’s job is to enable the user experience and nothing more.Angularのドキュメントによると、コンポーネントの仕事はユーザー エクスペリエンスを有効にすることであり、それ以上ではありません。 コンポーネントは、（テンプレートによってレンダリングされた）ビューとアプリケーション ロジックの間を仲介するために、データ バインディング用のプロパティとメソッドを提示する必要があります。
コンポーネントは、サーバーからデータを取得する、ユーザー入力を検証する、またはコンソールに直接記録するなど、特定のタスクをサービスに委譲することができます。