Angular 2: Comment utiliser / importer le module http?

version angulaire: 2.0.0-rc.2

version dactylographiée: 1.8.10

Live de travail exemple.

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

1. nous travaillons sur une couche séparée de persistance des données, qui couvrira HTTP. Ce n'est pas encore terminée.
2. à cause de Zone Angulaire 2 vous pouvez utiliser n'importe quel mécanisme existant pour l'extraction de données. Cela inclut XMLHttpRequest,fetch() et toute autre bibliothèque tierce.
3. XHR dans le compiler est destiné à être privé, et nous pouvons changer L'API à tout moment et en tant que tel ne doit pas être utilisé.

à peu près la même chose dans Alpha 42, mais on peut noter que Headers et HTTP_PROVIDERS viennent aussi 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 sur ceci 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<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 une 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é.

bizarre qui?

mise à Jour Mea culpa: aucun des exemples mentionnés n'indique que vous devez faire référence au http.js dans votre html comme

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

...et puis il a travaillé.

Mais pour le chemin dans le message d'erreur je n'ai toujours pas d'explication.

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

ANGULAR2 HTTP (UPDATED to Beta !!)

tout d'abord comme clair de nom nous devons importer le fichier http dans l'index.html comme ceci

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

ou vous pouvez mettre à jour via CDN de là

alors la prochaine étape nous devons importer Http et HTTP_PROVIDERS à partir des faisceaux fournis par angular.

mais oui c'est une bonne pratique de fournir des fournisseurs HTTP_ dans le fichier bootstrap parce qu'en utilisant cette façon il fournit 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 les API Rest ou json en utilisant Http

maintenant avec le http nous avons quelques options supplémentaires fournies avec l'angular2 / http I. e comme Headers, Request,Requestoptions etc. qui est principalement utilisé lors de la consommation D'API Rest ou de données JSON temporaires. tout d'abord, nous devons importer tout cela comme suit:

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

parfois nous avons besoin de fournir des en-têtes tout en consommant des API pour envoyer access_token et beaucoup d'autres choses qui sont faites en utilisant cette façon:

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

venons-en maintenant à RequestMethods: bascially nous utilisons GET, POST mais nous avons un peu plus option, vous pouvez consulter ici...

nous pouvons utiliser les méthodes request en utilisant RequestMethod.method_name

il y a d'autres options pour L'API pour l'instant j'ai posté un exemple pour POST request the help en utilisant quelques 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'information j'avais trouvé deux meilleures références ici.. et ici...

je crois que maintenant (alpha.35 et 36) doit ê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

pour donner suite à quelques-unes des réponses, voici un exemple complet d'utilisation de http module

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, []);

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

il suffit de l'importer et de l'injecter comme ceci. (ceci est un service Stuff avec une methodThatUsesHttp () qui ne fait que Logger 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);
        });
    }
}

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

Pour Angulaire 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 à l'intérieur de votre classe de service

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

d'Autres paquets, vous pourriez aussi avoir besoin

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

package.json

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

Référence 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]);