使用 angular 2 的 http rest api

Question

所以，我正在通过 typescript 在他们的网站上关注 angular 2 指南，并被困在 http api 集成中。我正在尝试制作一个简单的应用程序，可以通过 soundcloud 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（我假设我在这里使用过时的语法）。本质上，我想在我的应用表单搜索组件中使用 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：基本上我们使用 GET、POST 但您可以使用更多选项refer here...

我们可以使用 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() }]
                }
            });
    }

您也可以refer here 了解更多信息。

另见-

• How to deal with http status codes other than 200 in Angular 2.

更新

导入已更改为

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 文件中，当然也可以导入它们。

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

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

就像你导入了@Injectable。