< Angular példák

Angular HttpClient egyszerűen

Szerző: Sallai András

Copyright © 2021, Sallai András

Szerkesztve: 2021, 2022, 2024

Licenc: CC Attribution-Share Alike 4.0 International

Web: https://szit.hu

Bevezetés

Ebben a leírásban REST API-ról kérdezünk le dolgozókat, és más semmi. A REST API szervert egy NodeJS alapú json-server csomag fogja helyettesíteni.

HTTP kérésekhez az Angularban a HttpClient objektum használható. A HttpClient Promise helyett Observable alapú objektum. Az Observable is aszinkron működtetést tesz lehetővé.

Angular ES6 JavaScript
| |
v v
HttpClient fetch() XMLHttpRequest (XHR)
| |
v v
Observable Promise

Projekt készítése

Készítsünk egy angular projektet:

ng new app01

Lépjünk be, majd indítsunk kódszerkesztőt.

cd app01
code .

Backend oldal

Backend-nek a json-server fogjuk használni.

Végpont	Metódus	Azonosítás
/employees	get	nem

Készítsünk egy database.json fájlt az alábbi tartalommal:

{ "employees": [ { "id": 1, "name": "Perdi István", "city": "Szolnok", "salary": 2350000 }, { "id": 2, "name": "Aradi Ferenc", "city": "Szeged", "salary": 2853000 }, { "id": 3, "name": "Langyos Béla", "city": "Szolnok", "salary": 2144000 } ] }

A json-server telepítése:

npm install --save-dev json-server

Szerkesszük a package.json fájlt. Vegyünk fel egy új feladatot:

{ "scripts": { "api": "json-server --watch database.json" } }

Indítsuk el a json szervert:

npm run api

Modul regisztrálása

Szükségünk van a HttpClientModule nevű modulra. Regisztráljuk:

//... import { HttpClientModule } from '@angular/common/http'; export const appConfig: ApplicationConfig = { providers: [ provideRouter(routes), importProvidersFrom(HttpClientModule) ] };

Szolgáltatás létrehozása

Készítsünk egy szolgáltatást, api néven:

ng generate service shared/api

Létrejön két fájl:

src/app/shared/api.service.ts

src/app/shared/api.service.spec.ts

Az api.service.ts fájlba írjuk a szolgáltatást. Az api.service.spec.ts a teszt az előbbi állomány számára.

Vegyük az api.service.ts fájl, majd importáljuk a HttpClient:

import { HttpClient } from '@angular/common/http';

A konstruktorba paraméterként vegyük fel a http objektumot:

constructor(private http: HttpClient) { }

Hozzuk létre a host adattagot és a getEmployees() metódust:

//... host = 'http://localhost:8000/api/'; //... getEmployees() { let endpoint = 'employees'; let url = this.host + endpoint; return this.http.get<any>(url); }

Employee komponense

ng generate component employee

Emeljük az employee komponenst az app komponensbe:

<app-employee></app-emplyoee>

Szerkesszük az src/app/employee/employee.component.ts fájlt.

Importáljuk az ApiService osztályt.

Hozzunk létre egy employees adattagot.

Injektáljuk az ApiService osztályt.

Írjunk egy getEmployees() metódust.

Hívjuk meg a getEmployees() metódust a ngOnInit() metódusban.

import { Component, OnInit } from '@angular/core'; import { ApiService } from '../shared/api.service'; @Component({ selector: 'app-employee', templateUrl: './employee.component.html', styleUrls: ['./employee.component.css'] }) export class EmployeeComponent implements OnInit { employees: any; constructor(private api: ApiService) { } ngOnInit(): void { this.getEmployees(); } getEmployees() { this.api.getEmployees().subscribe({ next: data => { this.employees = data; }, error: err => { console.log('Hiba! A dolgozók letöltése sikertelen!'); } }); } }

Sablonfájl

<p>dologzók</p> <table> <tr *ngFor="let employee of employees"> <td>{{ employee.id }}</td> <td>{{ employee.name }}</td> <td>{{ employee.city }}</td> <td>{{ employee.salary }}</td> </tr> </table>