API

Zusammenfassung: API in Angular

In Angular bezieht sich die Arbeit mit APIs darauf, Daten von einem Backend (z. B. einem Webserver) abzurufen oder an diesen zu senden. Dies wird durch den HttpClient bereitgestellt, der ein Teil des HttpClientModule ist.

---

Grundlegende Schritte zum Arbeiten mit APIs in Angular

1. Importieren von HttpClientModule
   Das Modul muss in der AppModule oder einem Feature-Modul importiert werden:

   import { HttpClientModule } from '@angular/common/http';
   
   @NgModule({
     imports: [HttpClientModule]
   })
   export class AppModule {}
   

2. Erstellen eines Services für API-Aufrufe
   API-Aufrufe werden üblicherweise in einem Service organisiert, um die Logik von der Komponente zu trennen:

   import { HttpClient } from '@angular/common/http';
   import { Injectable } from '@angular/core';
   import { Observable } from 'rxjs';
   
   @Injectable({
     providedIn: 'root',
   })
   export class ApiService {
     private apiUrl = 'https://api.example.com';
   
     constructor(private http: HttpClient) {}
   
     getData(): Observable<any> {
       return this.http.get(`${this.apiUrl}/data`);
     }
   
     postData(payload: any): Observable<any> {
       return this.http.post(`${this.apiUrl}/data`, payload);
     }
   }
   

3. Verwendung des Services in Komponenten
   Der Service wird in der gewünschten Komponente eingebunden und verwendet:

   import { Component, OnInit } from '@angular/core';
   import { ApiService } from './api.service';
   
   @Component({
     selector: 'app-my-component',
     template: `
       <div *ngFor="let item of data">{{ item.name }}</div>
     `,
   })
   export class MyComponent implements OnInit {
     data: any[] = [];
   
     constructor(private apiService: ApiService) {}
   
     ngOnInit(): void {
       this.apiService.getData().subscribe((response) => {
         this.data = response;
       });
     }
   }
   

---

Wichtige Funktionen von HttpClient

1. GET-Anfragen Abrufen von Daten:

   this.http.get('https://api.example.com/items');
   

2. POST-Anfragen Senden von Daten:

   this.http.post('https://api.example.com/items', { name: 'Item Name' });
   

3. PUT-Anfragen Aktualisieren von Daten:

   this.http.put('https://api.example.com/items/1', { name: 'Updated Name' });
   

4. DELETE-Anfragen Löschen von Daten:

   this.http.delete('https://api.example.com/items/1');
   

---

Erweiterte Funktionen

1. Error Handling Fehler werden mit RxJS-Operatoren wie catchError behandelt:

   import { catchError } from 'rxjs/operators';
   import { throwError } from 'rxjs';
   
   this.http.get('https://api.example.com/items').pipe(
     catchError((error) => {
       console.error('API Error:', error);
       return throwError(() => new Error('API call failed'));
     })
   );
   

2. Interceptors Interceptors werden verwendet, um Anfragen oder Antworten zentral zu verändern, z. B. um Authentifizierungs-Header hinzuzufügen:

   import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http';
   import { Injectable } from '@angular/core';
   
   @Injectable()
   export class AuthInterceptor implements HttpInterceptor {
     intercept(req: HttpRequest<any>, next: HttpHandler) {
       const cloned = req.clone({
         headers: req.headers.set('Authorization', 'Bearer YOUR_TOKEN_HERE'),
       });
       return next.handle(cloned);
     }
   }
   

3. RxJS zur Datenverarbeitung Operatoren wie map und filter helfen, die Daten vor der Weitergabe zu transformieren:

   import { map } from 'rxjs/operators';
   
   this.http.get('https://api.example.com/items').pipe(
     map((data: any) => data.items)
   );
   

---

Best Practices

• Services nutzen: API-Logik immer in Services auslagern.
• Error Handling einbauen: Fehler abfangen und informative Nachrichten anzeigen.
• Asynchronität verstehen: HTTP-Anfragen sind asynchron, verwende daher subscribe oder async im Template.
• Interceptors verwenden: Für Authentifizierung, Logging oder andere zentrale Logiken.
• Datenmodelle nutzen: Typisierte Modelle erstellen, um API-Daten klar zu strukturieren.

---

Zusammenfassung

Mit dem HttpClient in Angular kannst du einfach Daten von einem Backend abrufen oder senden. Die wichtigsten Punkte: 1. Importiere HttpClientModule. 2. Organisiere API-Aufrufe in Services. 3. Verwende RxJS für die Datenverarbeitung und Fehlerbehandlung. 4. Nutze Interceptors für zentrale Logiken wie Authentifizierung.

Das Arbeiten mit APIs in Angular ist flexibel und ermöglicht es, Daten sicher und effizient in deiner Anwendung zu nutzen.