Uso di http resto apis con angolare 2

Question

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 sintassi angolare rapida 2 indietro nel giorno).

Quindi al momento il mio progetto assomiglia a questo

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

Niente di speciale succedendo nel 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, tuttavia, non sono in grado di e ci sono errori nella seguente approccio vale a dire @Inject non viene trovato (presumo che sto usando la sintassi 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 come non riesco a ottenere basi verso il basso prima.

Answer 1

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

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

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

Ma sì, è una buona pratica per fornire HTTP_PROVIDERS nel file di bootstrap perché usando questo modo è previsto a livello globale ed è disponibile per l'intero progetto come questo.

bootstrap(App, [ 
    HTTP_PROVIDERS, some_more_dependencies 
]); 

e le importazioni da inserire sono ....

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

A volte abbiamo bisogno di fornire Headers consumando API per l'invio access_token e molte altre cose che è fatto in questo modo:

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

subito a RequestMethods: bascially usiamo GET, POST, ma c'è ci sono altre opzioni che puoi refer here...

Possiamo usare requestmethods come RequestMethod.method_name

ci sono alcune altre opzioni per le API, ma per ora mi hanno inviato un esempio per la richiesta POST che vi aiuterà utilizzando 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() }] 
       } 
      }); 
    } 

si può refer here troppo per maggiori informazioni.

Vedere anche -

• How to deal with http status codes other than 200 in Angular 2.

Aggiornamento

di importazione è stato cambiato da

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

a

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

Answer 2

È necessario aggiungere questa riga:

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

nel file index.html.

è necessario aggiungere HTTP_PROVIDERS:

bootstrap(App, [ 
    ROUTER_PROVIDERS, 
    HTTP_PROVIDERS 
]); 

nel file boot.ts/bootstrap.ts, e importarli, naturalmente.

è necessario importare @Inject nel file DojoService classe:

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

proprio come te importato @Injectable.