Angular 4 - Service Http
Le service Http nous aidera à récupérer des données externes, à les publier, etc. Nous devons importer le module http pour utiliser le service http. Prenons un exemple pour comprendre comment utiliser le service http.
Pour commencer à utiliser le service http, nous devons importer le module dans app.module.ts comme indiqué ci-dessous -
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Si vous voyez le code en surbrillance, nous avons importé le HttpModule de @ angular / http et le même est également ajouté dans le tableau des importations.
Utilisons maintenant le service http dans le app.component.ts.
import { Component } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private http: Http) { }
ngOnInit() {
this.http.get("http://jsonplaceholder.typicode.com/users").
map((response) ⇒ response.json()).
subscribe((data) ⇒ console.log(data))
}
}
Comprenons le code mis en évidence ci-dessus. Nous devons importer http pour utiliser le service, ce qui se fait comme suit -
import { Http } from '@angular/http';
Dans la classe AppComponent, un constructeur est créé et la variable privée http de type Http. Pour récupérer les données, nous devons utiliser leget API disponible avec http comme suit
this.http.get();
Il faut que l'URL soit récupérée en tant que paramètre comme indiqué dans le code.
Nous utiliserons l'url de test - https://jsonplaceholder.typicode.com/userspour récupérer les données json. Deux opérations sont effectuées sur la carte de données d'url récupérée et s'abonner. La méthode Map permet de convertir les données au format json. Pour utiliser la carte, nous devons importer la même chose que celle indiquée ci-dessous -
import 'rxjs/add/operator/map';
Une fois la carte terminée, l'abonnement enregistrera la sortie dans la console comme indiqué dans le navigateur -
Si vous voyez, les objets json sont affichés dans la console. Les objets peuvent également être affichés dans le navigateur.
Pour les objets à afficher dans le navigateur, mettez à jour les codes dans app.component.html et app.component.ts comme suit -
import { Component } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private http: Http) { }
httpdata;
ngOnInit() {
this.http.get("http://jsonplaceholder.typicode.com/users").
map(
(response) ⇒ response.json()
).
subscribe(
(data) ⇒ {this.displaydata(data);}
)
}
displaydata(data) {this.httpdata = data;}
}
Dans app.component.ts, en utilisant la méthode subscribe, nous allons appeler la méthode d'affichage des données et lui transmettre les données récupérées en tant que paramètre.
Dans la méthode d'affichage des données, nous stockerons les données dans une variable httpdata. Les données sont affichées dans le navigateur en utilisantfor sur cette variable httpdata, ce qui est fait dans le app.component.html fichier.
<ul *ngFor = "let data of httpdata">
<li>Name : {{data.name}} Address: {{data.address.city}}</li>
</ul>
L'objet json est le suivant -
{
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "[email protected]",
"address": {
"street": "Kulas Light",
"suite": "Apt. 556",
"city": "Gwenborough",
"zipcode": "92998-3874",
"geo": {
"lat": "-37.3159",
"lng": "81.1496"
}
},
"phone": "1-770-736-8031 x56442",
"website": "hildegard.org",
"company": {
"name": "Romaguera-Crona",
"catchPhrase": "Multi-layered client-server neural-net",
"bs": "harness real-time e-markets"
}
}
L'objet a des propriétés telles que l'identifiant, le nom, le nom d'utilisateur, l'e-mail et l'adresse qui ont en interne la rue, la ville, etc. et d'autres détails liés au téléphone, au site Web et à l'entreprise. En utilisant lefor boucle, nous afficherons le nom et les détails de la ville dans le navigateur comme indiqué dans le app.component.html fichier.
Voici comment l'affichage est affiché dans le navigateur -
Ajoutons maintenant le paramètre de recherche, qui filtrera en fonction de données spécifiques. Nous devons récupérer les données en fonction du paramètre de recherche passé.
Voici les changements effectués dans app.component.html et app.component.ts fichiers -
app.component.ts
import { Component } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
searchparam = 2;
jsondata;
name;
constructor(private http: Http) { }
ngOnInit() {
this.http.get("http://jsonplaceholder.typicode.com/users?id="+this.searchparam).
map(
(response) ⇒ response.json()
).
subscribe((data) ⇒ this.converttoarray(data))
}
converttoarray(data) {
console.log(data);
this.name = data[0].name;
}
}
Pour le get api, nous ajouterons le paramètre de recherche id = this.searchparam. Le paramètre de recherche est égal à 2. Nous avons besoin des détails deid=2 à partir du fichier json.
app.component.html
{{name}}
Voici comment le navigateur s'affiche -
Nous avons consolidé les données du navigateur, qui sont reçues du http. La même chose est affichée dans la console du navigateur. Le nom du json avecid=2 s'affiche dans le navigateur.