読者です 読者をやめる 読者になる 読者になる

Angular2での外部APIの呼び出し方法に関して

Angular2系でのの外部APIの呼び出し方法に関して書きたいと思います。
Angular2系では下記のHTTPクライアントがあるのでそれを利用します。
angular.io
Angular1系ではhttpとresourceの2つのクライアントがありましたが、
Angular2系はこのHTTPクライアントで行います。
これを利用するればJSONマッピングなど比較的に簡単に行うことができます。
簡単な実装方法を下記に書きます。

メッセージ格納クラス

APIからのJSONマッピングするクラスを作成します。
Angular1系の時は単純にそのままJSONを扱ってましたが(クラスぽい定義で扱うこともできる)
Angular2系からJSONマッピングするクラスに値を格納するようにします。
SONをマッピングするクラスはJSONの各要素を格納するエリアの定義及び
コンストラクターで要素の値を受けてエリアに値をセットするようにします。

export class Message {
        messageId : string;
        message : string;
        constructor(
                messageId : string,
                message : string) {
                this.messageId = messageId;
                this.message = message;
        }
}
メッセージサービスクラス作成

APIの呼び出しを行うサービスクラスを作成します。
APIの呼び出しはAngularのHttpとRXJSのObservableを利用します。
非同期通信で利用できるものが2つあります。
1つはObservableです。
もう1つはAngular1系からあるPromiseです。
Promiseは1リクエストの非同期処理を扱うもので
連続リクエストの非同期処理や遅延処理やキャンセルなどはできません。
Angular2からはPromiseではなくObservableを利用します。
Observableは連続リクエストの非同期処理や遅延処理やキャンセルなど
Promiseではできないことも可能になっています。

import { Injectable } from '@angular/core';
import { Headers, Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { Message } from './message';
@Injectable()
export class MessageService {
        private messageUrl = '/message_service';
        constructor (private http: Http) {}
        getMessage(): Observable<Message> {
                return this.http.get(this.messageUrl)
                        .map(response => response.json() as Message)
                        .catch(this.handleError);
        }
        private handleError(error: any): Observable<any> {
                console.error('An error occurred', error);
                return Observable.throw(error.message || error);
        }
}
モジュール定義

NgModuleに設定を行います。
AngularのHttpModuleを利用するのでimportsに設定して宣言します。
また作成したMessageServiceをprovidersに設定して、アプリケーションでDIできるようにします。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule, JsonpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { MessageService  } from './message.service';
@NgModule({
        imports: [
                BrowserModule,
                FormsModule,
                HttpModule
        ],
        declarations: [
                AppComponent
        ],
        providers: [
                MessageService
        ],
        bootstrap: [
                AppComponent
        ]
})
export class AppModule { }
コンポーネント設定

コンポーネントコンストラクターにMessageServiceをDIします。
ngOnInit()の中でDIしたMessageServiceを利用してAPIを呼びします。
このngOnInit()は初期値を設定する場合などに利用するもので、
コンポーネントが呼ばれたら自動的にこれが呼ばれるようになっています。
APIの結果はJSONマッピングクラスのMessageに格納されます。
HTMLで{{ message.messageId }}など定義しとけば格納されている値をHTMLで表示できます。

import { Component } from '@angular/core';
import { MessageService  } from './message.service';
import { Message } from './message';
@Component({
        selector: 'my-app',
        template: '<div>{{ message.messageId }} : {{ message.messageName }}</div>'
})
export class AppComponent {
        errorMessage : string;
        message : Message;
        error : any;
        constructor(private messageService : MessageService) { }
        ngOnInit(): void {
                this.messageService
                        .getMessage()
                        .subscribe(
                                message => this.message = message,
                                error =>  this.errorMessage = <any>error);
        }
}