Javascript 使用带有 angular 2 的 http rest apis
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34755350/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using http rest apis with angular 2
提问by Ilja
So, I am following angular 2 guides on their website via typescript and am stuck at http api integration. I'm trying to make a simple application that can search via soundcloud api for a song, however I have difficulties implementing and understanding how to get going and online resources do it in so many different ways (I believe do to rapid angular 2 syntax changes back in the day).
所以，我正在通过打字稿在他们的网站上关注 angular 2 指南，并坚持使用 http api 集成。我正在尝试制作一个可以通过 soundcloud api 搜索歌曲的简单应用程序，但是我很难实现和理解如何开始，并且在线资源以多种不同的方式进行（我相信可以快速更改 angular 2 语法早些时候）。
So at the moment my project looks like this
所以目前我的项目看起来像这样
app
components
home
home.component.ts
...
search
search.component.ts
...
app.ts
...
services
soundcloud.ts
bootstrap.ts
index.html
Nothing fancy going on in the example, main files would be
示例中没有什么特别的，主文件将是
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
bootstrap.ts
import {App} from './components/app';
import {bootstrap} from 'angular2/platform/browser';
import {ROUTER_PROVIDERS} from 'angular2/router';
bootstrap(App, [
ROUTER_PROVIDERS
]);
And I was trying to figure out soundcloud.tshowever am not able to and there are errors in following approach i.e. @Injectis not found (I assume I am using outdated syntax here). Essentially I would like to use soundcloud service for api calls within my app form search component.
我试图找出soundcloud.ts但是我无法并且在以下方法中存在错误 ie @Injectis not found （我假设我在这里使用过时的语法）。本质上，我想在我的应用程序表单搜索组件中使用 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 not included here as I can't get basics down first.
soundcloud api 未包含在此处，因为我无法先了解基础知识。
回答by Pardeep Jain
Well good answer provided by @langley but I would like to add some more points so posting as an answer.
@langley 提供的答案很好，但我想添加更多要点，因此将其作为答案发布。
First of all for consuming Rest APIs we need the Httpand HTTP_PROVIDERSmodules to be imported. As we are talking about Http the very first step is obviously.
首先，为了使用 Rest API，我们需要导入Http和HTTP_PROVIDERS模块。当我们谈论 Http 时，第一步显然是。
<script src="node_modules/angular2/bundles/http.dev.js"></script>
But yes it is a good practice to provide
HTTP_PROVIDERSin the bootstrap file because by using this way it is provided on a global level and is available to the whole project like this.
但是是的
HTTP_PROVIDERS，在引导文件中提供是一个很好的做法，因为通过使用这种方式，它是在全局级别提供的，并且可以像这样在整个项目中使用。
bootstrap(App, [
HTTP_PROVIDERS, some_more_dependencies
]);
and the imports to be included are....
和要包括的进口是....
import {Http, Response, RequestOptions, Headers, Request, RequestMethod} from 'angular2/http';
Sometimes we need to provide Headerswhile consuming API's for sending access_tokenand many more things which is done this way:
有时我们需要Headers在使用 API 时提供发送access_token以及更多通过这种方式完成的事情：
this.headers = new Headers();
this.headers.append("Content-Type", 'application/json');
this.headers.append("Authorization", 'Bearer ' + localStorage.getItem('id_token'))
Now to RequestMethods: bascially we use GET, POST but there are some more options you can refer here...
现在到RequestMethods：基本上我们使用 GET、POST 但还有一些更多的选项你可以在这里参考......
We can use requestmethods as RequestMethod.method_name
我们可以使用 requestmethods 作为 RequestMethod.method_name
There are some more options for the APIs but for now I have posted one example for POST request which will help you by using some important methods:
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() }]
}
});
}
you can refer heretoo for more info.
你也可以参考这里了解更多信息。
see also -
也可以看看 -
Update
更新
import has been changed from
导入已从
import {Http, Response, RequestOptions, Headers, Request, RequestMethod} from 'angular2/http';
to
到
import {Http, Response, RequestOptions, Headers, Request, RequestMethod} from '@angular/http';
回答by Langley
You need to add this line:
您需要添加这一行：
<script src="node_modules/angular2/bundles/http.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>
in your index.html file.
在您的 index.html 文件中。
You need to add HTTP_PROVIDERS:
您需要添加HTTP_PROVIDERS：
bootstrap(App, [
ROUTER_PROVIDERS,
HTTP_PROVIDERS
]);
in your boot.ts/bootstrap.ts file, and import them of course.
在您的 boot.ts/bootstrap.ts 文件中，当然并导入它们。
You need to import @Injectin your DojoServiceclass file:
您需要@Inject在DojoService类文件中导入：
import {Injectable, Inject} from 'angular2/core'
Just like you imported @Injectable.
就像你导入的一样@Injectable。
