使用HTTP的REST API具有角2使用HTTP的REST API具有角2(Using http

所以，我就通过打字稿他们的网站下角2个指南和我停留在HTTP API集成。 我试图做一个简单的应用程序，可以通过API的SoundCloud搜索一首歌曲，但是我有困难执行和了解如何获得持续和在线资源，做到在这么多不同的方式（我相信做快速角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没有发现（我假设我使用过时的语法在这里）。 基本上我想用的SoundCloud的服务，为我的应用程序形式的搜索组件中的API调用。

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不包括在这里。

Answer 1:

嗯好的答案由@langley提供，但我想补充一些更多的积分，以便张贴作为一个答案。

首先，对于消费的REST API的我们需要Http和HTTP_PROVIDERS要导入的模块。 当我们在谈论的Http的第一步是显而易见的。

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

但是，是的，它是一个很好的做法，以提供HTTP_PROVIDERS因为通过这种方式，提供在全球范围内，并提供给这样整个项目的引导文件。

bootstrap(App, [
    HTTP_PROVIDERS, some_more_dependencies
]);

并且要包括在进口....

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

有时候，我们需要提供Headers ，而消耗的API发送access_token ，还有更多事情做这种方式：

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

我们RequestMethods：bascially我们使用GET，POST，但也有一些，你可以更多的选择参考这里...

我们可以用requestmethods作为RequestMethod.method_name

有对API的一些更多的选择，但现在我已经发布了POST请求，这将帮助你通过使用一些重要的方法之一例如：

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() }]
                }
            });
    }

你可以参考这里太获取更多信息。

也可以看看 -

• 如何应对比角2 200其他HTTP状态代码。

更新

进口已经从改变

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

至

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

Answer 2:

您需要添加这一行：

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

在你的index.html文件。

您需要添加HTTP_PROVIDERS ：

bootstrap(App, [
    ROUTER_PROVIDERS,
    HTTP_PROVIDERS
]);

在boot.ts / bootstrap.ts文件，并导入当然他们。

您需要导入@Inject在DojoService类文件：

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

就像您导入@Injectable 。

文章来源: Using http rest apis with angular 2