以angular度2使用http rest apis
所以，我通过打字机在他们的网站上遵循angular2指南，并坚持在http api集成。 我试图做一个简单的应用程序，可以通过soundcloud apisearch一首歌曲，但是我有困难的实现和理解如何起步和在线资源以许多不同的方式做（我相信做快速angular2语法变化早些时候）。
所以目前我的项目是这样的
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没有find（我假设我在这里使用过时的语法）。 基本上我想在我的应用程序表单search组件中使用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不包括在这里，因为我不能把基础知识放在第一位。
好的答案由@langley提供，但我想添加一些更多的点，如此发布作为答案。
首先为了使用Rest API，我们需要导入Http和HTTP_PROVIDERS模块。 正如我们正在谈论的Http第一步显然是。
<script src="node_modules/angular2/bundles/http.dev.js"></script>
但是，在引导文件中提供
HTTP_PROVIDERS是一个很好的做法，因为通过这种方式在全局级别上提供了HTTP_PROVIDERS，并且可以像这样使用整个项目。
bootstrap(App, [ HTTP_PROVIDERS, some_more_dependencies ]);
和import包括…
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() }] } }); }
你也可以参考这里了解更多信息。
也可以看看 –
- 如何在Angular 2中处理200以外的http状态码。
更新
导入已经改变
import {Http, Response, RequestOptions, Headers, Request, RequestMethod} from 'angular2/http';
至
import {Http, Response, RequestOptions, Headers, Request, RequestMethod} from '@angular/http';
你需要添加这一行：
<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 。
