web-dev-qa-db-fra.com

Utiliser http rest apis avec angular 2

Donc, je suis les guides angular 2 sur leur site web via TypeScript et je suis bloqué à l’intégration http api. J'essaie de créer une application simple capable de rechercher une chanson via soundcloud api, cependant J'ai de la difficulté à mettre en œuvre et à comprendre comment y aller et les ressources en ligne le font de différentes façons (je crois que je vais rapidement angular 2 changements de syntaxe dans la journée).

Donc, pour le moment, mon projet ressemble à ceci

app
  components
    home
      home.component.ts
      ...
    search
      search.component.ts
      ...
    app.ts
    ...
  services
    soundcloud.ts
  bootstrap.ts
index.html

Rien d’exceptionnel dans l’exemple, les fichiers principaux seraient

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

    import {App}     from './components/app';
import {bootstrap}        from 'angular2/platform/browser';
import {ROUTER_PROVIDERS} from 'angular2/router';

bootstrap(App, [
  ROUTER_PROVIDERS
]);

Et j'essayais de comprendre soundcloud.ts mais je ne suis pas capable de et il y a des erreurs dans l'approche suivante c'est-à-dire @Inject n'est pas trouvé (je suppose que j'utilise une syntaxe obsolète ici). En gros, j'aimerais utiliser le service soundcloud pour les appels d'api au sein de mon composant de recherche de formulaire d'application.

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 n'est pas inclus ici car je ne peux pas d'abord me familiariser avec les bases.

javascriptangularhttp
32
Ilja

Bien bonne réponse fournie par @langley mais je voudrais ajouter quelques points supplémentaires afin de poster comme réponse.

Tout d’abord, pour utiliser les API Rest, nous avons besoin de Http et HTTP_PROVIDERS modules à importer. Comme nous parlons de Http, la toute première étape est évidemment.

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

Mais oui, c’est une bonne pratique de fournir HTTP_PROVIDERS dans le fichier bootstrap), car, de cette manière, il est fourni à un niveau global et est disponible pour l'ensemble du projet comme celui-ci.

bootstrap(App, [
    HTTP_PROVIDERS, some_more_dependencies
]);

et les importations à inclure sont ....

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

Nous avons parfois besoin de fournir Headers en consommant des API pour l'envoi de access_token et beaucoup d'autres choses qui se font de cette façon:

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

Passons maintenant à RequestMethods : nous utilisons essentiellement GET, POST mais il existe quelques options supplémentaires que vous pouvez voir ici ...

Nous pouvons utiliser requestmethods comme RequestMethod.method_name

Il y a encore plus d'options pour les API, mais pour l'instant, j'ai posté un exemple pour la requête POST) qui vous aidera en utilisant certaines 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() }]
                }
            });
    }

vous pouvez voir ici aussi pour plus d'informations.

voir également -

Mise à jour

import a été changé de

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

à

import {Http, Response, RequestOptions, Headers, Request, RequestMethod} from '@angular/http';
36
Pardeep Jain

Vous devez ajouter cette ligne:

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

dans votre fichier index.html.

Vous devez ajouter HTTP_PROVIDERS:

bootstrap(App, [
    ROUTER_PROVIDERS,
    HTTP_PROVIDERS
]);

dans votre fichier boot.ts/bootstrap.ts et importez-les bien sûr.

Vous devez importer @Inject dans votre fichier de classe DojoService:

import {Injectable, Inject} from 'angular2/core'

Tout comme vous avez importé @Injectable.

7
Langley