[[oktatas:web:angular:angular httpclient|< Angular httpclient]] ====== Angular HttpClient egyszerűen ====== * **Szerző:** Sallai András * Copyright (c) 2021, Sallai András * Szerkesztve: 2021, 2022, 2024 * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|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
Observable            Promise        
    |                    |
    v                    v         
HttpClient            fetch()      XMLHttpRequest (XHR)

===== 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(url);
  }

===== Employee komponense ===== ng generate component employee Emeljük az employee komponenst az app komponensbe:

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


dologzók

    
        {{ employee.id }}
        {{ employee.name }}
        {{ employee.city }}
        {{ employee.salary }}