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を作成します。
1 2 3 4 | export class User { id:number name:string} |
手順2.Serviceの作成
以下の様なuser.service.tsを作成します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | 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を行い、
1 | import { UserService } from './user/user.service'; //←追加 |
providersに追加。
1 2 3 | providers: [ UserService, //←追加], |
感想
今回はService追加を行いました。
次回はこのサービスをコンポーネントから利用していきます。
WEBアプリケーション関連 人気連載リンク
基礎からPHPWEBアプリ解発を学ぶなら・・
PHP基礎 連載
より実践的なWEBアプリ開発講座！Bootstrap活用を学ぶなら・・
魁！小野の塾 連載
