Serviceを作る｜AngularでWebサイト作成

Angularの学習の為に、AngularでWebサイトを作ってみることにしました（Angularのバージョンは4.3.6です）。
適宜作業内容をまとめていきます。

基本的な部分は公式チュートリアルなどを参考にしながら進めています。

今回はコンポーネントに表示するデータをWebAPIからとってくる（または登録する）処理を記述するServiceを作っていきます。

開発環境

・OS：Windows8.1 64bit
・node：v7.2.1
・npm：4.0.5
・Angular：4.3.6
・開発ツール：VisualStudioCode

手順

手順1.Beanクラスの作成

Beanという言い方はあまりしないようですが分かりやすいので。
今回はUser属性を格納するオブジェクトにしたいので、以下の様にuser.tsを作成します。

export class User {
    id:number
    name:string
}

手順2.Serviceの作成

以下の様なuser.service.tsを作成します。

import { Injectable } from '@angular/core';
import { User } from './user'; //←手順1で作成したUserをimportしておく。
import { Observable } from 'rxjs/Observable';
import { Headers, Http, Response } from '@angular/http';
import 'rxjs/add/operator/toPromise';

@Injectable() //←DIを可能にします。
export class UserService {

	private url = 'users'; //←リクエストするURL。適宜変更。
	private headers: Headers = new Headers({
		'Content-Type': 'application/json', //←HTTPHeader情報。色々追加可能。
	});

	constructor(private http: Http) { } //←コンストラクタ

	//User一覧取得メソッド
	getUsers(): Promise<User[]> {
		return this.http.get(this.url,{ headers: this.headers }).toPromise()
		.then((response: Response) => response.json().data as User[])
		.catch(this.handleError);
	}
	//User詳細取得メソッド
	getUser(id: number): Promise<User> {
		const url: string = `${this.url}/${id}`;
		return this.http.get(url,{ headers: this.headers }).toPromise()
		.then((response: Response) => response.json().data as User)
		.catch(this.handleError);
	}
	//User更新メソッド
	update(user: User): Promise<User> {
		const url: string = `${this.url}/${user.id}`;
		return this.http
		.put(url, JSON.stringify(user), { headers: this.headers }).toPromise()
		.then(() => user)
		.catch(this.handleError);
	}
	//User追加メソッド
	create(name: string): Promise<User> {
		return this.http
		.post(this.url, JSON.stringify({ name: name }), { headers: this.headers }).toPromise()
		.then((response: Response) => response.json().data)
		.catch(this.handleError);
	}
	//User削除メソッド
	delete(id: number): Promise<void> {
		const url = `${this.url}/${id}`;
		return this.http.delete(url, { headers: this.headers }).toPromise()
		.then(() => null)
		.catch(this.handleError);
	}
	//エラーハンドリングメソッド
	private handleError(error: any): Promise<any> {
		console.error('Error occured : ', error);
		return Promise.reject(error.message || error);
	}
}

※各メソッドの動きは、以下の様な流れ。
・Httpオブジェクトのget,post,put,deleteメソッドを用いてAPIリクエスト。
・戻り値のObservableオブジェクトをtoPromiseでPromiseに変換。
・thenメソッドのクロージャで取得したresponseデータを返す。
・エラー発生時はhandleErrorメソッドを実行。

手順3.AppModuleにServiceを追加

importを行い、

import { UserService } from './user/user.service'; //←追加

providersに追加。

providers: [
    UserService, //←追加
],

感想

今回はService追加を行いました。
次回はこのサービスをコンポーネントから利用していきます。

WEBアプリケーション関連 人気連載リンク

基礎からPHPWEBアプリ解発を学ぶなら・・
PHP基礎 連載

より実践的なWEBアプリ開発講座！Bootstrap活用を学ぶなら・・
魁！小野の塾 連載