Angular 19: linkedSignal & Resource API

Angular 19 führt zwei bedeutende Neuerungen ein, die darauf abzielen, die reaktive Programmierung und das Datenmanagement innerhalb von Angular-Anwendungen zu verbessern: die Funktion linkedSignal und die Resource API. Diese Ergänzungen adressieren bestehende Herausforderungen in der Zustands-Synchronisation und im asynchronen Datenhandling und bieten Entwicklern effizientere Werkzeuge.

linkedSignal: Verbesserte Signalverwaltung

In früheren Angular-Versionen war die Verwaltung von Zuständen, die von anderen Signalen abhängen, oft mit komplexen Workarounds verbunden. Entwickler nutzten typischerweise computed()-Signale, um Werte basierend auf anderen Signalen abzuleiten. Allerdings sind computed()-Signale schreibgeschützt, was die Flexibilität einschränkte, wenn ein beschreibbares Signal benötigt wurde, das sowohl von anderen Signalen abhängt als auch unabhängig aktualisiert werden kann.

Die Funktion linkedSignal löst dieses Problem, indem sie ein beschreibbares Signal erstellt, das seinen Wert automatisch basierend auf Änderungen in einem Quellsignal aktualisiert. Diese Funktionalität vereinfacht die Synchronisation zwischen Signalen und erleichtert die Implementierung von Reset-Mustern, was zu einer besser wartbaren und vorhersehbaren Zustandsverwaltung führt.

Beispiel:

import { signal, linkedSignal } from '@angular/core';

const sourceSignal = signal(0);
const updatedSignal = linkedSignal({
  source: sourceSignal,
  computation: () => sourceSignal() * 5,
});

In diesem Beispiel wird updatedSignal immer das Fünffache des Wertes von sourceSignal sein und sich automatisch anpassen, wenn sich sourceSignal ändert.

Lösung bestehender Herausforderungen:

Vor der Einführung von linkedSignal standen Entwickler vor der Schwierigkeit, Signale zu erstellen, die sowohl von anderen Signalen abhängen als auch beschreibbar sind. Dies führte oft zu komplizierten Code-Strukturen und erhöhter Fehleranfälligkeit. Durch die Bereitstellung einer einfachen Methode zur Erstellung solcher Signale verbessert linkedSignal die Code-Klarheit und reduziert die Wahrscheinlichkeit von Fehlern in der Zustandsverwaltung.

Resource API: Vereinfachtes Datenladen

Das Management von asynchronem Datenladen, insbesondere über HTTP-Anfragen, war in Angular-Anwendungen eine komplexe Aufgabe. Entwickler mussten manuell verschiedene Zustände des Datenabrufs verwalten, einschließlich Lade-, Erfolgs- und Fehlerzuständen, was oft zu umfangreichem und fehleranfälligem Code führte.

Die Resource API in Angular 19 bietet einen reaktiven Ansatz zum Laden von Ressourcen, insbesondere für Leseoperationen wie HTTP-GET-Anfragen. Sie ermöglicht es Entwicklern, eine Loader-Funktion zu definieren, die asynchron Daten abruft, und stellt Signale bereit, um den aktuellen Status zu überwachen und Fehler effektiv zu handhaben.

Beispiel:

import { resource } from '@angular/core';

const productResource = resource({
  loader: async () => {
    const response = await fetch('https://api.example.com/products');
    return response.json();
  }
});

In diesem Beispiel wird productResource mit einer Loader-Funktion initialisiert, die Daten von der angegebenen API abruft. Die Resource API verwaltet den Ladezustand und potenzielle Fehler, was den Datenabrufprozess vereinfacht.

Wichtige Merkmale der Resource API:

• Statusverfolgung: Signale wie status, error und isLoading ermöglichen es Entwicklern, den aktuellen Zustand des Datenladeprozesses zu überwachen, was zu besserem Benutzerfeedback und effektiverer Fehlerbehandlung führt. Das status-Signal kann folgende Werte annehmen:
• Idle (0): Die Ressource befindet sich im Ausgangszustand und hat noch nicht mit dem Laden begonnen.
• Error (1): Während des Ladevorgangs ist ein Fehler aufgetreten.
• Loading (2): Die Ressource lädt derzeit Daten.
• Reloading (3): Die Ressource lädt Daten erneut, typischerweise nach einem vorherigen Ladevorgang.
• Resolved (4): Die Ressource hat Daten erfolgreich geladen.
• Local (5): Die Daten der Ressource wurden lokal aktualisiert, ohne einen neuen Ladevorgang.
• Lokale Aktualisierungen: Die update-Methode ermöglicht lokale Änderungen an den geladenen Daten, ohne einen neuen Ladevorgang auszulösen, was Flexibilität bei der Datenmanipulation bietet.
• Anfragemanagement: Die Resource API startet den Ladevorgang automatisch neu, wenn abhängige Signale sich ändern, und kann laufende Anfragen abbrechen, um Race Conditions zu verhindern und Datenkonsistenz zu gewährleisten.

Lösung bestehender Herausforderungen:

Vor der Resource API mussten Entwickler manuelle Logik implementieren, um verschiedene Zustände des Datenabrufs zu handhaben, was zu erhöhter Komplexität und Fehleranfälligkeit führte. Die Resource API abstrahiert diese Anliegen und bietet eine deklarative und prägnante Methode zur Verwaltung asynchroner Datenoperationen, wodurch Boilerplate-Code reduziert und die Zuverlässigkeit der Anwendung verbessert wird.

Fazit

Die Einführung von linkedSignal und der Resource API in Angular 19 stellt bedeutende Fortschritte in der reaktiven Programmierung und im Datenmanagement dar. Diese Funktionen adressieren langjährige Herausforderungen, indem sie Entwicklern flexiblere, effizientere und besser wartbare Werkzeuge für die Zustands-Synchronisation und das asynchrone Datenhandling bieten. Durch die Nutzung dieser neuen Möglichkeiten können Entwickler moderne Webanwendungen mit verbesserter Leistung und Benutzererfahrung erstellen.