因此,我正在通过打字稿在其网站上遵循angular2指南,并停留在httpapi集成中。我正在尝试制作一个可以通过soundcloudapi搜索一首歌曲的简单应用程序,但是我很难实现和理解如何入门,在线资源却以多种不同方式做到这一点(我相信可以快速进行角度2语法更改早些时候)。
所以目前我的项目看起来像这样
app components home home.component.ts ... search search.component.ts ... app.ts ... services soundcloud.ts bootstrap.ts index.html
在该示例中没有任何花哨的内容,主文件将是
应用程序
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调用。
@Inject
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,因为我无法首先掌握基础知识。
提供的很好的答案,但是我想补充一点,所以发布作为答案。
首先,要使用Rest API,我们需要导入Http和HTTP_PROVIDERS模块。当我们谈论Http时,第一步显然是。
Http
HTTP_PROVIDERS
<script src="node_modules/angular2/bundles/http.dev.js"></script>
但是,是的HTTP_PROVIDERS,在bootstrap文件中提供一个好习惯,因为通过这种方式,它是在全局级别提供的,并且可以像这样在整个项目中使用。
bootstrap(App, [ HTTP_PROVIDERS, some_more_dependencies ]);
和要包括的进口是…
import {Http, Response, RequestOptions, Headers, Request, RequestMethod} from 'angular2/http';
有时我们需要Headers在消耗API的同时提供发送access_token信息,并通过这种方式完成更多工作:
Headers
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,但是您可以在此处引用更多选项…
我们可以使用requestmethods作为 RequestMethod.method_name
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() }] } }); }
您也可以在这里参考以获取更多信息。
也可以看看 -
导入已从更改为
至
import {Http, Response, RequestOptions, Headers, Request, RequestMethod} from '@angular/http';