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

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
Observable            Promise        
    |                    |
    v                    v         
HttpClient            fetch()      XMLHttpRequest (XHR)

Készítsünk egy angular projektet:

ng new app01

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

cd app01
code .

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

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

database.json

{
    "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:

package.json

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

Indítsuk el a json szervert:

npm run api

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

src/app/app.module.ts

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

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:

src/app/shared/api.service.ts

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

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

src/app/shared/api.service.ts

  constructor(private http: HttpClient) { }

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

src/app/shared/api.service.ts

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

ng generate component employee

Emeljük az employee komponenst az app komponensbe:

src/app/app.component.html

<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.

src/app/employee/employee.component.ts

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!');
      }
    });
  }
}

src/app/employee/employee.component.html

<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>