web-dev-qa-db-ja.com

angular 2でのHTTPレストAPIの使用

そのため、私はTypeScriptを介して彼らのWebサイトでangular 2ガイドをフォローしていますが、http APIの統合に固執しています。サウンドクラウドAPIを介して曲を検索できるシンプルなアプリケーションを作成しようとしていますが、実装方法と実装方法を理解するのに苦労しています。オンラインリソースは、さまざまな方法でそれを実行します（高速angular 2つの構文がその日に戻って変更されます）。

現時点では私のプロジェクトは次のようになります

app
  components
    home
      home.component.ts
      ...
    search
      search.component.ts
      ...
    app.ts
    ...
  services
    soundcloud.ts
  bootstrap.ts
index.html

例では何も変わっていません。メインファイルは

app.ts

import {Component, View} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';

import {HomeComponent} from './home/home.component';
import {SearchComponent} from './search/search.component';

@Component({
    selector: 'app',
    templateUrl: 'app/components/app.html',
    directives: [ROUTER_DIRECTIVES]
})

@RouteConfig([
  {path: '/home', name: 'Home', component: HomeComponent, useAsDefault: true},
  {path: '/search', name: 'Search', component: SearchComponent}
])

export class App { }

bootstrap.ts

    import {App}     from './components/app';
import {bootstrap}        from 'angular2/platform/browser';
import {ROUTER_PROVIDERS} from 'angular2/router';

bootstrap(App, [
  ROUTER_PROVIDERS
]);

そして、私はsoundcloud.tsを理解しようとしていましたが、次のアプローチにはエラーがあります。つまり、@Injectが見つかりません（ここでは古い構文を使用していると仮定します）。基本的に、アプリフォーム検索コンポーネント内のAPI呼び出しにsoundcloudサービスを使用したいと思います。

import {Injectable} from 'angular2/core'
import {Http} from 'angular2/http'

@Injectable()
export class SoundcloudService {
 http : Http

 constructor(@Inject(Http) http) {
   this.http = http;
 }
}

最初に基本を理解することができないため、soundcloud apiはここには含まれていません。

javascriptangularhttp
32
Ilja

@langleyが提供する良い回答ですが、回答として投稿するために、さらにポイントを追加したいと思います。

まず、REST APIを使用するには、HttpおよびHTTP_PROVIDERSモジュールをインポートする必要があります。 Httpについて説明しているように、最初のステップは明らかにです。

<script src="node_modules/angular2/bundles/http.dev.js"></script>

ただし、bootstrapファイルにHTTP_PROVIDERSを指定することをお勧めします。この方法を使用すると、グローバルレベルで提供され、プロジェクト全体でこのように利用できるためです。

bootstrap(App, [
    HTTP_PROVIDERS, some_more_dependencies
]);

含まれるインポートは....

import {Http, Response, RequestOptions, Headers, Request, RequestMethod} from 'angular2/http';

時々Headersを提供する必要がありますが、access_tokenを送信するためにAPIを消費し、この方法で行われるその他の多くのことを行います。

this.headers = new Headers();
this.headers.append("Content-Type", 'application/json');
this.headers.append("Authorization", 'Bearer ' + localStorage.getItem('id_token'))

次に、RequestMethods：基本的にはGET、POSTを使用しますが、さらにいくつかのオプションがあります こちらを参照してください。 。

RequestmethodsをRequestMethod.method_nameとして使用できます

APIにはさらにいくつかのオプションがありますが、今のところ、いくつかの重要なメソッドを使用するのに役立つPOSTリクエストの1つの例を投稿しました。

PostRequest(url,data) {
        this.headers = new Headers();
        this.headers.append("Content-Type", 'application/json');
        this.headers.append("Authorization", 'Bearer ' + localStorage.getItem('id_token'))

        this.requestoptions = new RequestOptions({
            method: RequestMethod.Post,
            url: url,
            headers: this.headers,
            body: JSON.stringify(data)
        })

        return this.http.request(new Request(this.requestoptions))
            .map((res: Response) => {
                if (res) {
                    return [{ status: res.status, json: res.json() }]
                }
            });
    }

こちらを参照 で詳細を確認することもできます。

も参照してください-

更新

インポートはから変更されました

import {Http, Response, RequestOptions, Headers, Request, RequestMethod} from 'angular2/http';

に

import {Http, Response, RequestOptions, Headers, Request, RequestMethod} from '@angular/http';
36
Pardeep Jain

次の行を追加する必要があります。

<script src="node_modules/angular2/bundles/http.dev.js"></script>

index.htmlファイル内。

HTTP_PROVIDERSを追加する必要があります：

bootstrap(App, [
    ROUTER_PROVIDERS,
    HTTP_PROVIDERS
]);

boot.ts/bootstrap.tsファイルで、もちろんそれらをインポートします。

DojoServiceクラスファイルに@Injectをインポートする必要があります。

import {Injectable, Inject} from 'angular2/core'

@Injectableをインポートしたように。

7
Langley