Angular 2
安らぎのAPIを備えたAngular2のCRUD

構文

• @Injectable（）//このサービスのインスタンスを作成するときに依存性インジェクタに依存性を注入するよう指示します。

• request.subscribe（）//これは実際にリクエストを行う場所です。これがなければあなたの要求は送られません。また、コールバック関数で応答を読み込みたいとします。

• コンストラクタ（private wikiService：WikipediaService）{} //サービスと依存関係の両方が依存性インジェクタによって注入可能なので、アプリケーションをユニットテストするためのコンポーネントにサービスを注入するのがよい方法です。

安らぎのAPIからAngular2で読む

APIロジックをコンポーネントから分離するために、APIクライアントを別のクラスとして作成しています。このサンプルクラスは、Wikipedia APIにランダムなwiki記事を取得するよう要求します。

    import { Http, Response } from '@angular/http';
    import { Injectable } from '@angular/core';
    import { Observable }     from 'rxjs/Observable';
    import 'rxjs/Rx';
    
    @Injectable()
    export class WikipediaService{
        constructor(private http: Http) {}
    
        getRandomArticles(numberOfArticles: number)
        {
            var request = this.http.get("https://en.wikipedia.org/w/api.php?action=query&list=random&format=json&rnlimit=" + numberOfArticles);
            return request.map((response: Response) => {
                return response.json();
            },(error) => {
                console.log(error);
                //your want to implement your own error handling here.
            });
        }
    }

また、新しいAPIクライアントを使用するコンポーネントが必要です。

import { Component, OnInit } from '@angular/core';
import { WikipediaService } from './wikipedia.Service';

@Component({
    selector: 'wikipedia',
    templateUrl: 'wikipedia.component.html'
})
export class WikipediaComponent implements OnInit {
    constructor(private wikiService: WikipediaService) { }

    private articles: any[] = null;
    ngOnInit() { 
        var request = this.wikiService.getRandomArticles(5);
        request.subscribe((res) => {
            this.articles = res.query.random;
        });
    }
}