Usando l’apis restante http con angular 2

Quindi, sto seguendo le guide angular 2 sul loro sito web tramite typescript e sono bloccato all’integrazione con http api. Sto cercando di creare una semplice applicazione in grado di cercare tramite soundcloud api per una canzone, tuttavia ho difficoltà nell’implementare e capire come andare avanti e le risorse online lo fanno in tanti modi diversi (credo a modifiche della syntax angular rapida 2 indietro nel giorno).

Quindi al momento il mio progetto sembra così

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

Niente di interessante nell’esempio, i file principali sarebbero

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

E stavo cercando di capire soundcloud.ts, ma non sono in grado di e ci sono errori nel seguente approccio cioè @Inject non viene trovato (presumo che sto usando la syntax obsoleta qui). In sostanza vorrei utilizzare il servizio soundcloud per le chiamate api all’interno del mio componente di ricerca del modulo dell’app.

 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 non incluso qui perché non riesco a capire prima le basi.

Buona risposta fornita da @langley ma vorrei aggiungere alcuni punti in modo da pubblicare una risposta.

Prima di tutto per il consumo delle API di Rest abbiamo bisogno dei moduli Http e HTTP_PROVIDERS da importare. Dato che stiamo parlando di Http, il primo passo è ovviamente.

  

Ma sì, è una buona pratica fornire HTTP_PROVIDERS nel file bootstrap perché, in questo modo, viene fornito a livello globale ed è disponibile per l’intero progetto come questo.

 bootstrap(App, [ HTTP_PROVIDERS, some_more_dependencies ]); 

e le importazioni da includere sono ….

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

A volte è necessario fornire le Headers mentre si utilizzano le API per l’invio di access_token e molte altre cose che vengono eseguite in questo modo:

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

Ora su RequestMethods : basicamente usiamo GET, POST ma ci sono altre opzioni a cui puoi fare riferimento qui …

Possiamo usare requestmethods come RequestMethod.method_name

Ci sono altre opzioni per le API ma per ora ho pubblicato un esempio per la richiesta POST che ti aiuterà usando alcuni metodi importanti:

 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() }] } }); } 

puoi anche fare riferimento qui per maggiori informazioni.

Guarda anche –

  • Come gestire i codici di stato http diversi da 200 in Angular 2.

Aggiornare

l’importazione è stata modificata da

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

a

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

Devi aggiungere questa riga:

nel tuo file index.html.

È necessario aggiungere HTTP_PROVIDERS :

 bootstrap(App, [ ROUTER_PROVIDERS, HTTP_PROVIDERS ]); 

nel tuo file boot.ts / bootstrap.ts, e importali ovviamente.

Devi importare @Inject nel tuo file di class DojoService :

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

Proprio come hai importato @Injectable .