Különbségek

A kiválasztott változat és az aktuális verzió közötti különbségek a következők.

--- oktatas:web:angular:angular_httpclient:egyszeruen [2024/03/03 18:01] – [Backend oldal] admin
+++ oktatas:web:angular:angular_httpclient:egyszeruen [2025/03/02 13:38] (aktuális) – eltávolítva admin
@@ Sor 1: / Sor 1: @@
-[[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é.
-<code>
- Angular                ES6          JavaScript
-    |                    |
-    v                    v
-Observable            Promise
-    |                    |
-    v                    v
-HttpClient            fetch()      XMLHttpRequest (XHR)
-</code>
-===== 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:
-<code javascript 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
-        }
-    ]
-}
-</code>
-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:
-<code javascript package.json>
-{
-  "scripts": {
-    "api": "json-server --watch database.json"
-  }
-}
-</code>
-Indítsuk el a json szervert:
-  npm run api
-===== Modul regisztrálása =====
-Szükségünk van a HttpClientModule nevű modulra. Regisztráljuk:
-<code javascript src/app/app.module.ts>
-//...
-import { HttpClientModule } from '@angular/common/http';
-export const appConfig: ApplicationConfig = {
-  providers: [
-    provideRouter(routes),
-    importProvidersFrom(HttpClientModule)
-  ]
-};
-</code>
-===== 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:
-<code javascript src/app/shared/api.service.ts>
-import { HttpClient } from '@angular/common/http';
-</code>
-A konstruktorba paraméterként vegyük fel a http objektumot:
-<code javascript src/app/shared/api.service.ts>
-  constructor(private http: HttpClient) { }
-</code>
-Hozzuk létre a host adattagot és a getEmployees() metódust:
-<code javascript 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);
-  }
-</code>
-===== Employee komponense =====
-  ng generate component employee
-Emeljük az employee komponenst az app komponensbe:
-<code html5 src/app/app.component.html>
-<app-employee></app-emplyoee>
-</code>
-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.
-<code javascript 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!');
-      }
-    });
-  }
-}
-</code>
-===== Sablonfájl =====
-<code html 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>
-</code>