Angular 2：如何使用/导入http模块？

我一直在玩Angular 2 Quickstart 。 如何在Angular 2中使用/导入http模块？
我已经看过Angular 2 Todo的.js ，但是它不使用http模块。

我已经添加了"ngHttp": "angular/http", dependencies于package.json，因为我听说Angular 2有点模块化

Answer 1

在版本37中，你需要这样做：

 ///<reference path="typings/angular2/http.d.ts"/> import {Http} from "angular2/http"; 

并运行这个tsd命令：

 tsd install angular2/http 

Answer 2

最后更新：2016年5月11日
Angular版本：2.0.0-rc.2
Typescript版本：1.8.10

现场工作的例子 。

一个简单的例子如何使用Observable的Http模块：

 import {bootstrap} from '@angular2/platform-browser-dynamic'; import {Component, enableProdMode, Injectable, OnInit} from '@angular/core'; import {Http, Headers, HTTP_PROVIDERS, URLSearchParams} from '@angular/http'; import 'rxjs/add/operator/map'; const API_KEY = '6c759d320ea37acf99ec363f678f73c0:14:74192489'; @Injectable() class ArticleApi { constructor(private http: Http) {} seachArticle(query) { const endpoint = 'http://api.nytimes.com/svc/search/v2/articlesearch.json'; const searchParams = new URLSearchParams() searchParams.set('api-key', API_KEY); searchParams.set('q', query); return this.http .get(endpoint, {search: searchParams}) .map(res => res.json().response.docs); } postExample(someData) { const endpoint = 'https://your-endpoint'; const headers = new Headers({'Content-Type': 'application/json'}); return this.http .post(endpoint, JSON.stringify(someData), { headers: headers }) .map(res => res.json()); } } @Component({ selector: 'app', template: `<ul> <li *ngFor="let article of articles | async"> {{article.headline.main}} </li> </ul>`, providers: [HTTP_PROVIDERS, ArticleApi], }) class App implements OnInit { constructor(private articleApi: ArticleApi) { } ngOnInit() { this.articles = this.articleApi.seachArticle('obama'); } } enableProdMode(); bootstrap(App) .catch(err => console.error(err)); 

Answer 3

1. 我们正在研究一个单独的数据持久层，它将覆盖HTTP。 这还没完成。
2. 由于Angular 2中的Zone ，您可以使用任何现有的机制来获取数据。 这包括XMLHttpRequest ， fetch()和其他任何第三方库。
3. compiler XHR是私有的，我们可以随时更改API，因此不应该使用。

Answer 4

在Alpha 42中也是如此，但是可以注意到， Headers和HTTP_PROVIDERS也来自于angular2/http 。

 import {Http, Headers, HTTP_PROVIDERS} from 'angular2/http'; export class App { constructor(public http: Http) { } getThing() { this.http.get('http://example.com') .map(res => res.text()) .subscribe( data => this.thing = data, err => this.logError(err), () => console.log('Complete') ); } } 

更多关于这个以及如何使用返回的observables在这里： https : //auth0.com/blog/2015/10/15/angular-2-series-part-3-using-http/

🙂

Answer 5

 import {Injectable} from 'angular2/core'; import {Http, HTTP_PROVIDERS} from 'angular2/http'; @Injectable() export class GroupSelfService { items:Array<any>; constructor(http:Http){ http.get('http://127.0.0.1:8080/src/data/names.json') .subscribe(res => { this.items = res; console.log('results found'); }) } } 

结果在404：
检测到文件更改
检测到文件更改
GET / src / angular2 / http 404 0.124 ms – 30

两件奇怪的事情：
1. / src / angular2 / http – 不是可以findhttp的path，而不是我在代码中提供的path。
2. core.js位于node_modules / angular2文件夹中的http.js旁边并被find。

这有多奇怪？

更新 Mea culpa：没有任何例子提到你需要在你的html中引用http.js
<script src="../node_modules/angular2/bundles/http.dev.js"></script>
…然后它的工作。
但是对于错误信息中的path，我仍然没有解释。

Answer 6

除了下面给出的所有答案，如果我掩盖了一些额外的点这里是Http如何使用/导入一切…

ANGULAR2 HTTP（更新到Beta！）

首先从名字清楚，我们必须像这样在index.html中导入http文件

 <script src="node_modules/angular2/bundles/http.dev.js"></script> 

或者你可以从这里通过CDN更新

那么下一步我们必须从angular提供的bundle中导入Http和HTTP_PROVIDERS 。

但是，在引导文件中提供HTTP_PROVIDERS是一个很好的做法，因为通过使用这种方式在全局级别上提供，并可用于整个项目，如下所示。

 bootstrap(App, [ HTTP_PROVIDERS, some_more_dependency's ]); 

import来自…

 import {http} from 'angular2/http'; 

使用Http来使用Rest API或json

现在随着HTTP，我们有更多的选项提供与angular2 / http ie头像，请求，Requestoptions等，这是最常用的，同时消耗Rest API的或临时的Json数据。 首先我们必须导入所有这些如下：

 import {Http, Response, RequestOptions, Headers, Request, RequestMethod} from 'angular2/http'; 

有时我们需要提供头文件，同时使用用于发送access_token的API以及使用这种方式完成的更多事情：

 this.headers = new Headers(); this.headers.append("Content-Type", 'application/json'); this.headers.append("Authorization", 'Bearer ' + localStorage.getItem('id_token')); 

现在来请求方法：bascially我们使用GET，POST，但我们有更多的选项，你可以参考这里…

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

更多的信息我在这里find了两个最好的参考.. 在这里…

Answer 7

我相信现在（alpha.35和36）需要是：

 import {Http} from 'http/http'; 

请记住添加（因为现在是一个单独的文件）您的HTML中的引用： https ： //code.angularjs.org/2.0.0-alpha.36/http.dev.js

Answer 8

接下来的几个答案，这里是一个完整的使用http模块的工作示例

index.html

  <html> <head> <title>Angular 2 QuickStart</title> <script src="../node_modules/es6-shim/es6-shim.js"></script> <script src="../node_modules/systemjs/dist/system.src.js"></script> <script src="../node_modules/angular2/bundles/angular2.dev.js"></script> <script src="../node_modules/angular2/bundles/http.dev.js"></script> <script> System.config({ packages: {'app': {defaultExtension: 'js'}} }); System.import('app/app'); </script> </head> <body> <app>loading...</app> </body> </html> 

app/app.ts

 import {bootstrap, Component} from 'angular2/angular2'; import {Http, Headers, HTTP_PROVIDERS} from 'angular2/http'; @Component({ selector: 'app', viewProviders: [HTTP_PROVIDERS], template: `<button (click)="ajaxMe()">Make ajax</button>` }) class AppComponent { constructor(public http: Http) { } ajaxMe() { this.http.get('https://some-domain.com/api/json') .map(res => res.json()) .subscribe( data => this.testOutput = data, err => console.log('foo'), () => console.log('Got response from API', this.testOutput) ); } } bootstrap(AppComponent, []); 

Answer 9

它已经在angular2中，所以你不需要把任何东西放在package.json中

你只需要像这样导入和注入。 （这是一个Stuff服务，用一个methodThatUsesHttp（）来logging响应）

 import {XHR} from 'angular2/src/core/compiler/xhr/xhr'; export class Stuff { $http; constructor($http: XHR) { this.$http = $http; } methodThatUsesHttp() { var url = 'http://www.json-generator.com/api/json/get/cfgqzSXcVu?indent=2'; this.$http.get(url).then(function(res) { console.log(res); }, function(err) { console.log(err); }); } } 

Answer 10

 import {Http, Response} from '@angular/http'; 

Answer 11

一个使用http模块的简单例子：

 import {Component, View, bootstrap, bind, NgFor} from 'angular2/angular2'; import {Http, HTTP_BINDINGS} from 'angular2/http' @Component({ selector: 'app' }) @View({ templateUrl: 'devices.html', directives: [NgFor] }) export class App { devices: any; constructor(http: Http) { this.devices = []; http.get('./devices.json').toRx().subscribe(res => this.devices = res.json()); } } bootstrap(App,[HTTP_BINDINGS]); 

你可以在这里完整的工作应用程序： https ： //github.com/kaalpurush/ng2-http