API-Rest - api rest angular PDF

Preview

Summary

api rest angular...

Description

HttpClient d’angular et les observable RxJS Dans cette manip nous allons utiliser HttpClient afin de créer le service EmployeeService. Son rôle est de récupérer des données à partir d'une API REST. Les étapes pour ce faire sont : 1. 2. 3. 4. 5.

Importer HttpClientModule dans le module racine Créer un service EmployeeService et Injecter HttpClient dans son constructeur Ajouter au service une méthode qui retourne un Observable Afficher le template HTML Démo

1. Importer HttpClientModule dans le module racine Importez le module HttpClientModule du package @angular/common/http et l’ajoutez dans l'attribut imports de @NgModule. app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { HttpClientModule } from '@angular/common/http'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, HttpClientModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } 2. Créer un service EmployeeService et Injecter HttpClient dans son constructeur employee.service.ts import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Injectable({ providedIn: 'root' }) export class EmployeeService { constructor(private http: HttpClient) { } }

3. Ajouter au service une méthode qui retourne un Observable On accède à l'API REST "/employees"et on récupère un tableau d’employee. employee.service.ts import { Injectable import { HttpClient import { Employee } import { Observable

} from '@angular/core'; } from '@angular/common/http'; from '../model/employee'; } from 'rxjs';

@Injectable({ providedIn: 'root' }) export class EmployeeService { constructor(private http: HttpClient) { } public getEmployees(): Observable { const url = 'http://localhost:3000/employees'; return this.http.get(url); } } On renvoie le tableau des employés en tant que observable. Toute méthode peut s'y abonner pour écouter les événements de données sur ce tableau. Créer la classe employee : employee.ts export class Employee { public id: number; public name: string; public status: string; constructor(id:number, name:string, status:string) { this.id = id; this.name = name; this.status = status; } } Créer un observateur qui s'abonne à Observable app.component.ts import { Component } from '@angular/core'; import { EmployeeService } from './service/employee.service'; import { Employee } from './model/employee'; @Component({ selector: 'app-root', templateUrl: './app.component.html',

styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app'; employees = new Array(); constructor( empService:EmployeeService ) { empService.getEmployees().subscribe(response => { this.employees = response.map(item => { return new Employee(item.id, item.name, item.status ); }); }); } } 4. Afficher le template HTML app.component.html

Angular HTTP Service Example

Id Name Status {{ emp.id }} {{ emp.name }} {{ emp.status }}

5. Démo 1. Démarrez le serveur REST avec cette commande. $ json-server --watch 'E:\ngexamples\db.json' 2. Démarrez l'application angulaire avec la commande. $ ng serve Vérifiez l'application dans le navigateur....