更新

Question

所以，我正在通过打字稿在他们的网站上关注角度2指南，我被困在http api集成。我正在尝试创建一个简单的应用程序，可以通过soundcloud api搜索一首歌，但是我很难实现和理解如何开始，而在线资源以很多不同的方式完成它（我相信快速的角度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...

我们可以将请求方法用作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文件中

，然后导入它们。

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

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

就像您导入了@Injectable。

使用带有角度2的http rest apis

2 个答案:

更新