Angularでのサービスの作成

サービスについて、自分自身で作成することから始めましょう。そのために、フォルダ test/src/appにファイル data.service.tsを作成します。私たちのサービスは、いくつかのデータを画面に表示する役割を担うことにしましょう。

サービスのためのクラスを作成します：

export class DataService {
	
}

ここで、デコレータ Injectableが必要です。これを使用することで、サービスクラスをコンポーネントクラスに注入できるようになります。注入については次のレッスンで説明します。今は必要なデコレータをインポートしましょう：

import { Injectable } from '@angular/core';

export class DataService {
	
}

このデコレータをクラスに適用します：

import { Injectable } from '@angular/core';

@Injectable()
export class DataService {
	
}

次に、このクラスにいくつかのデータを持たせるようにします。通常、Angularアプリケーションではサーバーからデータをロードしますが、学習目的のため配列を使用します。プライベートプロパティとして作成しましょう：

export class DataService {
	private data: string[] = ['a', 'b', 'c'];
}

データを取得するためのメソッドを作成します：

export class DataService {
	private data: string[] = ['a', 'b', 'c'];

	getData(): string[] {
		return this.data;
	}
}

私たちのサービスは準備ができました。次のレッスンでは、これをコンポーネントクラスに接続します。

商品オブジェクトの配列を返す独自のサービスを作成してください：

[
	{
		name: 'prod1',
		cost: 100,
	},
	{
		name: 'prod2',
		cost: 200,
	},
	{
		name: 'prod3',
		cost: 300,
	},
]