Utilisation des API REST http avec angular 2
Donc, je suis angular 2 guides sur leur site web via typescript et je suis bloqué à l'intégration de l'api http. J'essaie de faire une application simple qui peut rechercher via l'api soundcloud pour une chanson, mais j'ai des difficultés à mettre en œuvre et à comprendre comment y aller et les ressources en ligne le font de tant de façons différentes (je crois faire pour rapide angular 2 syntaxe change 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
Il ne se passe rien d'extraordinaire 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 cependant 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). Essentiellement, je voudrais utiliser le service soundcloud pour les appels api dans 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;
}
}
L'api Soundcloud n'est pas incluse ici car je ne peux pas obtenir les bases premier.
2 réponses
Eh bien bonne réponse fournie par @ langley mais je voudrais ajouter quelques points de plus afin de poster comme une réponse.
Tout d'abord pour consommer des API Rest, nous avons besoin des modules Http et HTTP_PROVIDERS à importer. Comme nous parlons Http la 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_PROVIDERSdans le fichier bootstrap car en utilisant cette façon, il est fourni au niveau global et est disponible pour l'ensemble du projet comme ce.
bootstrap(App, [
HTTP_PROVIDERS, some_more_dependencies
]);
Et les importations à inclure sont....
import {Http, Response, RequestOptions, Headers, Request, RequestMethod} from 'angular2/http';
Parfois, nous devons fournir Headers tout en consommant des API pour envoyer access_token et bien 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'))
Maintenant à RequestMethods : bascialement nous utilisons GET, POST mais il y a d'autres options que vous pouvez référencer ici...
, Nous pouvons utiliser requestmethods comme RequestMethod.method_name
Il y a d'autres options pour les API mais pour l'instant j'en ai posté une exemple de requête POST qui vous aidera 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() }]
}
});
}
Vous pouvez également vous référer ici pour plus d'informations.
Voir aussi -
Mettre à jour
L'importation a été modifiée à partir de
import {Http, Response, RequestOptions, Headers, Request, RequestMethod} from 'angular2/http';
À
import {Http, Response, RequestOptions, Headers, Request, RequestMethod} from '@angular/http';
Vous devez ajouter cette ligne:
<script src="node_modules/angular2/bundles/http.dev.js"></script>
Dans votre index.fichier html.
Vous devez ajouter HTTP_PROVIDERS:
bootstrap(App, [
ROUTER_PROVIDERS,
HTTP_PROVIDERS
]);
Dans votre botte.ts / bootstrap.fichier ts, et les importer bien sûr.
, Vous devez importer @Inject votre DojoService fichier de classe:
import {Injectable, Inject} from 'angular2/core'
Tout comme vous avez importé @Injectable.