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 [2025/03/02 13:43] – admin
+++ oktatas:web:angular:angular_httpclient [2025/04/25 17:44] (aktuális) – [Szolgáltatás megírása] admin
@@ Sor 3: / Sor 3: @@
 ====== Angular HttpClient ======
+  * **Szerző:** Sallai András
+  * Copyright (c) 2024, Sallai András
+  * Szerkesztve: 2024
+  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC BY-SA 4.0]]
+  * Web: https://szit.hu
 ===== Összehasonlítás =====
@@ Sor 16: / Sor 21: @@
 Observable            Promise
 </code>
+===== Modul regisztrálása =====
+Egy új importálásra is szükség van:
+  * provideHttpClient
+<code javascript src/app/app.config.ts>
+import { provideHttpClient } from '@angular/common/http';
+//...
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideRouter(routes),
+    provideHttpClient()
+  ]
+};
+</code>
+===== Szolgáltatás létrehozása =====
+  ng generate service shared/api
+===== Szolgáltatás megírása =====
+A konstruktorba paraméterként vegyük fel a http objektumot:
+<code javascript src/app/shared/api.service.ts>
+  constructor(private http: HttpClient) { }
+</code>
+<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>
+===== Hibakezelés =====
+<code javascript>
+//...
+  errorMessage: string = '';
+//...
+    this.api.addEmployee(emp).subscribe({
+      next: (data) => {
+        console.log(data);
+      },
+      error: (error) => {
+        if (error.error && error.error.message) {
+          // Ha a szerver egy JSON választ küldött 'message' kulccsal
+          this.errorMessage = error.error.message;
+        } else if (error.message) {
+          // Ha van egy egyszerű üzenet az error objektumban
+          this.errorMessage = error.message;
+        } else {
+          // Ha egyik sem, akkor egy általános hibaüzenetet jelenítünk meg
+          this.errorMessage = 'Váratlan hiba történt a kérés során.';
+        }
+      }
+    });
+</code>
+A HTML oldalon megjelenítés:
+<code html>
+@if(errorMessage) {
+  <div class="error-message">
+    {{ errorMessage }}
+  </div>
+}
+</code>