web-dev-qa-db-fra.com

Angular 2: Comment utiliser/importer le module http?

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

J'ai ajouté "ngHttp": "angular/http", à dependencies dans package.json car j'ai entendu dire que Angular 2 est un peu modulaire.

angularangular2-http
40
rilut

Dans la version 37, vous devez faire ceci:

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

Et lancez cette commande tsd:

tsd install angular2/http
18
Andreas

Dernière mise à jour: 11 mai 2016
Version angulaire: 2.0.0-rc.2
TypeScript version: 1.8.10

Exemple de travail en direct .

Voici 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.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));

49
Itay Radotzki
  1. Nous travaillons sur une couche distincte de la persistance des données, qui couvrira HTTP. Ce n'est pas encore fini.
  2. En raison de Zone dans Angular 2, vous pouvez utiliser n’importe quel mécanisme existant pour extraire des données. Cela inclut XMLHttpRequest, fetch() et toutes les bibliothèques tierces. 
  3. XHR dans compiler est censé être privé, et nous pouvons modifier l’API à tout moment et ne doivent donc pas être utilisés.
25
Misko Hevery

Même chose dans Alpha 42, mais notons que Headers et HTTP_PROVIDERS proviennent également de 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 renvoyées ici: https://auth0.com/blog/2015/10/15/angular-2-series-part-3-using-http/

:)

8
cienki

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

ANGULAR2 HTTP (MISE À JOUR À Bêta !!)

Tout d'abord, comme le nom l'indique, nous devons importer le fichier http dans le fichier index.html, comme ceci:

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

ou vous pouvez le mettre à jour via CDN à partir d'ici

ensuite, nous devons importer Http et HTTP_PROVIDERS à partir des ensembles fournis par angular.

mais oui, c'est une bonne pratique de fournir HTTP_PROVIDERS dans le fichier d'amorçage, car en utilisant cette méthode, il est fourni au niveau global et disponible pour l'ensemble du projet, comme suit.

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

et les importations sont de ....

import {http} from 'angular2/http';

Consommer Reste API ou json en utilisant Http

Maintenant, avec le http, nous avons quelques options supplémentaires fournies avec angular2/http i.e comme les en-têtes, Request, Requestoptions, etc., etc., qui sont principalement utilisées lors de la consommation des données de l'API Rest ou des données Json temporaires. Premièrement, nous devons importer tout cela comme suit:

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

nous avons parfois besoin de fournir des en-têtes tout en consommant des API pour envoyer access_token et bien d'autres choses utilisant cette méthode:

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

maintenant, venez à RequestMethods: nous utilisons essentiellement GET, POST mais nous avons une option supplémentaire que vous pouvez référez-vous ici ...

nous pouvons utiliser use requesthodhods en utilisant RequestMethod.method_name

il y a encore quelques options pour les API pour l'instant. J'ai posté un exemple pour POST demander 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.stringify(data)
        })

        return this.http.request(new Request(this.requestoptions))
            .map((res: Response) => {
                if (res) {
                    return [{ status: res.status, json: res.json() }]
                }
            });
    }

pour plus d'informations j'avais trouvé deux meilleures références ici .. et ici ...

6
Pardeep Jain
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');
        })
    }
}

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é ni 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 se trouve. 

Comment est-ce étrange?

Mise à jour Mea culpa: Aucun des exemples mentionnés ne vous oblige à référencer le http.js dans votre code HTML comme
<script src="../node_modules/angular2/bundles/http.dev.js"></script>
... et puis cela a fonctionné.
Mais pour le chemin dans le message d'erreur, je n'ai toujours aucune explication.

6
Thomas Bücklers

Je crois que maintenant (alpha.35 et 36) il faut être:

import {Http} from 'http/http';

N'oubliez pas d'ajouter (puisque c'est maintenant un fichier séparé) la référence dans votre html: https://code.angularjs.org/2.0.0-alpha.36/http.dev.js

4
tomascharad

Pour faire suite à quelques réponses, voici un exemple complet d'utilisation du module 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, []);
2
jczaplew
import {Http, Response} from '@angular/http';
1
previousdeveloper

C'est déjà dans angular2, vous n'avez donc pas besoin de mettre quoi que ce soit dans package.json

Vous devez juste importer et injecter comme ceci. (il s'agit d'un service Stuff avec un methodThatUsesHttp () qui enregistre simplement la réponse)

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);
        });
    }
}
1
Filip Bech-Larsen