Angular 2: Comment utiliser / importer le module http?

Je joue avec Angular 2 Quickstart . Comment puis-je utiliser / importer le module http dans Angular 2?
J’ai regardé le fichier .js de Angular 2 Todo , mais il n’utilise pas le module http.

J’ai ajouté "ngHttp": "angular/http", à des dependencies dans package.json car j’ai entendu que Angular 2 était quelque peu modulaire

Dans la version 37, vous devez faire ceci:

 /// import {Http} from "angular2/http"; 

Et lancez cette commande tsd:

 tsd install angular2/http 

Dernière mise à jour: 11 mai 2016
Version angular: 2.0.0-rc.2
Version typescripte: 1.8.10

Exemple de travail en direct .

Un exemple simple d’utilisation du module HTTP avec Observable:

 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.ssortingngify(someData), { headers: headers }) .map(res => res.json()); } } @Component({ selector: 'app', template: `
  • {{article.headline.main}}
`, 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));
  1. Nous travaillons sur une couche de persistance de données distincte, qui couvrira HTTP. Ce n’est pas encore fini.
  2. Grâce à Zone in Angular 2, vous pouvez utiliser n’importe quel mécanisme existant pour récupérer des données. Cela inclut XMLHttpRequest , fetch() et toute autre bibliothèque tierce.
  3. XHR dans le comstackr est censé être privé, et nous pouvons changer l’API à tout moment et en tant que tel ne devrait pas être utilisé.

Même chose en Alpha 42, mais on peut noter que les en- Headers et HTTP_PROVIDERS proviennent également d’ 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') ); } } 

Plus d’informations à ce sujet et comment utiliser les observables qui sont retournés ici: https://auth0.com/blog/2015/10/15/angular-2-series-part-3-using-http/

🙂

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

Résultats dans un 404:
Changement de fichier détecté
Changement de fichier détecté
GET / src / angular2 / http 404 0,124 ms – 30

Deux choses étranges:
1. / src / angular2 / http – n’est pas le chemin où http peut être trouvé et pas le chemin que j’ai fourni dans le code.
2. core.js se trouve juste à côté de http.js dans le dossier node_modules / angular2 et est trouvé.

Comment est-ce étrange?

Mise à jour de Mea culpa: Aucun des exemples mentionnés ne mentionne que vous devez référencer les http.js dans votre fichier HTML comme

… et puis ça a fonctionné.
Mais pour le chemin dans le message d’erreur, je n’ai toujours aucune explication.

En dehors de toutes les réponses données ci-dessous si je dissimule des points supplémentaires, voici Http comment utiliser / importer tout …

ANGULAR2 HTTP (mis à jour à la bêta !!)

Tout d’abord, nous devons importer le fichier http dans le fichier index.html comme ceci

  

ou vous pouvez mettre à jour cela via CDN à partir d’ici

Ensuite, nous devons importer Http et HTTP_PROVIDERS partir des bundles fournis par angular.

mais oui, il est conseillé de fournir HTTP_PROVIDERS dans le fichier bootstrap car, en utilisant cette méthode, il a été fourni au niveau global et disponible pour l’ensemble du projet, comme suit.

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

et les importations proviennent de ….

 import {http} from 'angular2/http'; 

Consumr Rest API ou JSON utilisant Http

Maintenant, avec le http, nous avons quelques options supplémentaires fournies avec angular2 / http, telles que les en-têtes, les requêtes, les options de demande, etc. Tout d’abord, nous devons importer tout ceci comme suit:

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

Parfois, nous devons fournir des en-têtes tout en consommant des API pour envoyer access_token et bien d’autres choses qui sont effectuées de cette manière:

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

maintenant venez à RequestMethods: en gros, nous utilisons GET, POST mais nous avons plus d’options que vous pouvez vous référer ici …

nous pouvons utiliser usemethods en utilisant RequestMethod.method_name

il y a plus d’options pour l’API pour le moment j’ai posté un exemple pour POST demande l’aide en utilisant des méthodes importantes:

 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.ssortingngify(data) }) return this.http.request(new Request(this.requestoptions)) .map((res: Response) => { if (res) { return [{ status: res.status, json: res.json() }] } }); } 

pour plus d’infos j’ai trouvé deux meilleures références ici .. et ici …

Je crois que maintenant (alpha.35 et 36) est nécessaire pour être:

 import {Http} from 'http/http'; 

N’oubliez pas d’append (depuis maintenant un fichier séparé) la référence dans votre code HTML: https://code.angularjs.org/2.0.0-alpha.36/http.dev.js

Suite à quelques réponses, voici un exemple complet d’utilisation du module http

index.html

    Angular 2 QuickStart        loading...   

app/app.ts

 import {bootstrap, Component} from 'angular2/angular2'; import {Http, Headers, HTTP_PROVIDERS} from 'angular2/http'; @Component({ selector: 'app', viewProviders: [HTTP_PROVIDERS], template: `` }) 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, []); 

C’est déjà dans angular2, donc vous n’avez rien à mettre dans package.json

Il vous suffit d’importer et d’injecter comme ça. (il s’agit d’un service Stuff avec methodThatUsesHttp () qui enregistre uniquement la réponse)

 import {XHR} from 'angular2/src/core/comstackr/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); }); } } 
 import {Http, Response} from '@angular/http'; 

Pour Angular 4.3+, 5. +

 // app.module.ts: import {NgModule} from '@angular/core'; import {BrowserModule} from '@angular/platform-browser'; // Import HttpClientModule from @angular/common/http import {HttpClientModule} from '@angular/common/http'; @NgModule({ imports: [ BrowserModule, // Include it under 'imports' in your application module // after BrowserModule. HttpClientModule, ], }) export class MyAppModule {} 

Et dans votre classe de service

 import { HttpClient } from '@angular/common/http'; 

Autres forfaits dont vous pourriez avoir besoin

 import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpResponse, HttpErrorResponse } from '@angular/common/http'; 

Dans package.json

 "@angular/http": "^5.1.2", 

La référence est ici

Un exemple simple utilisant le module 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]);