{"id":2770,"date":"2024-02-14T09:19:59","date_gmt":"2024-02-14T08:19:59","guid":{"rendered":"https:\/\/www.thecodecampus.de\/blog\/?p=2770"},"modified":"2026-04-09T11:23:00","modified_gmt":"2026-04-09T09:23:00","slug":"mit-angular-signals-effiziente-anwendungen-entwickeln","status":"publish","type":"post","link":"https:\/\/www.thecodecampus.de\/blog\/mit-angular-signals-effiziente-anwendungen-entwickeln\/","title":{"rendered":"Angular Signals Teil 1 – How-to Guide f\u00fcr Angular Signals"},"content":{"rendered":"

Go here<\/a> for the english version of this blog post.<\/em><\/strong><\/p>\n

Verbesserung der Leistung in Angular 17 mit Signals: Eine kluge L\u00f6sung<\/h2>\n

In der Weiterentwicklung von Angular wird mit der Einf\u00fchrung von Signals ein einfacherer und effizienterer Ansatz zur Erkennung von \u00c4nderungen eingef\u00fchrt, der die Leistung und Reaktivit\u00e4t von Anwendungen grundlegend verbessert. Signals wurden bereits in Angular Version 16 als Developer Preview eingef\u00fchrt. Mit Angular 17 wird das Feature in einer stabilen Version ver\u00f6ffentlicht. Im Gegensatz zur umfassenden Scanning-Strategie von Zone.js, die den gesamten Komponentenbaum auf \u00c4nderungen pr\u00fcft, setzen Signals eine gezieltere Methode ein. Sie aktualisieren direkt nur die Komponenten, die von den Zustands\u00e4nderungen betroffen sind, was den unn\u00f6tigen Leistungsaufwand erheblich reduziert.<\/p>\n

Dieser Wechsel optimiert nicht nur die Change Detection von Angular, sondern entspricht auch einem intuitiveren Modell der Reaktivit\u00e4t, das sowohl die Entwicklungserfahrung als auch die Reaktionsf\u00e4higkeit des Frameworks verbessert. Durch Signals erhalten Angular-Entwickler Zugang zu einem pr\u00e4ziseren und effizienteren Toolset f\u00fcr die Verwaltung von Zustands\u00e4nderungen, was einen bedeutenden Schritt nach vorne bei der F\u00e4higkeit des Frameworks darstellt, dynamische und komplexe Anwendungen mit Leichtigkeit zu handhaben.<\/p>\n

Durch die Bereitstellung eines effizienteren, gezielteren und vereinfachten Modells der Reaktivit\u00e4t erm\u00f6glichen Signals Angular-Anwendungen ein h\u00f6heres Leistungsniveau und bieten Entwicklern ein schlankeres und effektiveres Toolset f\u00fcr die Erstellung dynamischer, reaktionsf\u00e4higer Anwendungen.<\/p>\n

Im folgenen Blog erf\u00e4hrst du wie du mit Angular Signals effiziente Anwendungen entwickeln kannst.<\/p>\n

Welches Problem wird durch Signals gel\u00f6st?<\/h2>\n

Angular Signals wurden entwickelt, um die Laufzeitleistung von Anwendungen zu verbessern, indem Zone.js ersetzt wird. Traditionell spielte Zone.js eine entscheidende Rolle bei der Aktivierung der Change Detection und der Aktualisierung der Benutzeroberfl\u00e4che, wenn sich der Zustand der Anwendung \u00e4nderte. Diese Methode erforderte allerdings das Scannen des gesamten Komponentenbaums, um relevante Zustands\u00e4nderungen zu identifizieren. Durch die redundante Pr\u00fcfung inaktiver Komponenten kam es h\u00e4ufig zu Performanceproblemen.<\/p>\n

Mit der Einf\u00fchrung von Signals werden die umfassenden Scans des Komponentenbaums \u00fcberfl\u00fcssig. Jetzt werden nur noch die Komponenten aktualisiert, die direkt von einer \u00c4nderung betroffen sind, wodurch der DOM-Aktualisierungsprozess erheblich vermindert wird. Diese fokussierte Strategie minimiert nicht nur den Systemaufwand, sondern steigert auch die Gesamteffizienz der Anwendung. So lassen sich mit Angular Signals effizientere Anwendungen entwickeln als zuvor.<\/p>\n

Neben der Leistungsverbesserung vereinfachen die Angular Signals auch das State Management und bieten eine intuitivere Alternative zu RxJS, insbesondere beim Ersetzen von subjektbasierten Zust\u00e4nden. RxJS kann, mit seinen leistungsstarken, aber komplexen Tools f\u00fcr die reaktive Programmierung, f\u00fcr Entwickler eine Herausforderung darstellen, insbesondere wenn es um die Verwaltung des Anwendungsstatus durch Subjects geht. Subjects in RxJS sind zwar flexibel, erfordern aber ein tieferes Verst\u00e4ndnis von Konzepten der reaktiven Programmierung, wie Observables und Subscriber, was sie f\u00fcr Anf\u00e4nger oder einfachere Anwendungen weniger zug\u00e4nglich macht.<\/p>\n

Im Gegensatz dazu bieten Signals einen unkomplizierten Mechanismus f\u00fcr das State Management. Sie vermeiden die steile Lernkurve, die mit RxJS verbunden ist, indem sie einen einfacheren, direkteren Ansatz bieten. Entwickler k\u00f6nnen einen State definieren und ihn direkt mit den UI-Komponenten verkn\u00fcpfen, wobei die Komplexit\u00e4t von Observable Streams umgangen wird. Diese direkte Verkn\u00fcpfung vereinfacht den Prozess der Aktualisierung der Benutzeroberfl\u00e4che als Reaktion auf Zustands\u00e4nderungen, da keine Subscriptions verwaltet oder Datenstr\u00f6me verarbeitet werden m\u00fcssen. Mit Signals geht es beim State Management eher darum, Zustands\u00e4nderungen zu definieren und darauf zu reagieren, als mit den Feinheiten reaktiver Programmierparadigmen zu jonglieren.<\/p>\n

Signals alias Reaktive Primitives<\/h2>\n

Signals, auch bekannt als Reactive Primitives, sind ein System, das die Verwendung und die Abh\u00e4ngigkeiten von Zust\u00e4nden bzw. States innerhalb einer Anwendung verfolgt und es Angular erm\u00f6glicht, Rendering-Updates zu optimieren. Mit Signals identifiziert Angular genau, wo welcher State verwendet wird und welche Abh\u00e4ngigkeiten bestehen. Dies erm\u00f6glicht ein gezieltes Re-Rendering von Komponenten, wodurch die Abh\u00e4ngigkeit zur Change Detection entf\u00e4llt, weil eine umfassende \u00dcberpr\u00fcfungen aller Komponenten nicht notwendig ist. Im Gegensatz zu Observables ben\u00f6tigen Signals keine Subscriptions und haben immer einen Anfangswert, was das State Management vereinfacht, da asynchrone Operationen, wie z.B. die async-Pipe, nicht mehr gebraucht werden.<\/p>\n

Signals sind durchg\u00e4ngig typisiert und k\u00f6nnen vom Typ Number oder String oder sogar ein komplexer Typ sein. Sie k\u00f6nnen writeable oder readonly sein und man kann immer ein readonly Signal aus einem writeable Signal mit .asReadonly()<\/code> erzeugen. Readonly Signals k\u00f6nnen auch von writable Signales abh\u00e4ngen, aber darauf werden wir sp\u00e4ter noch eingehen.<\/p>\n

Es ist auch sehr einfach, Signals zu exportieren, um sie in mehreren Komponenten zu verwenden.<\/p>\n

export const name = signal('Angular');<\/pre>\n
import { name } from \"main\";<\/pre>\n
\n<\/picture>\n<\/picture>\n\"Angular<\/picture>\n<\/a><\/p>\n
Wie man mit Signals interagiert<\/h2>\n
Nachdem wir nun die Vorteile von Signals bei der Bew\u00e4ltigung g\u00e4ngiger Herausforderungen in der Angular-Entwicklung kennengelernt haben, ist es an der Zeit, tiefer zu gehen. Lass uns herausfinden, wie man sie effektiv nutzen kann und die verschiedenen Methoden untersuchen, die uns im Umgang mit Signals zur Verf\u00fcgung stehen.<\/p>\n
signal()<\/h3>\n
Durch den Aufruf der signal<\/code> Funktion kann man ein writeable Signal erstellen. In unserem Fall ist das ein Z\u00e4hler.<\/p>\n
const counter = signal(0);<\/pre>\n
Wir k\u00f6nnen auf den Wert mit dem Variablennamen und runden Klammern zugreifen. Dies funktioniert auch im Template, wenn wir den Aufruf in einer Expression verwenden.<\/p>\n
console.log('New counter value', this.counter());<\/pre>\n
Count: {{ counter() }}<\/pre>\n
set()<\/h3>\n
Mit set<\/code> kann man dem Signal einen neuen Wert geben.<\/p>\n
this.counter.set(5);<\/pre>\n
Damit k\u00f6nnen wir den Z\u00e4hler auf Null zur\u00fccksetzen.<\/p>\n
reset() { \r\n  this.counter.set(0); \r\n};<\/pre>\n
update()<\/h3>\n
Durch die Verwendung von update<\/code> kann man auch den Wert des Signals \u00e4ndern, aber jetzt hat man auch Zugriff auf den aktuellen Wert. Man kann also einen neuen Wert basierend auf dem alten Wert setzen.
\nIn unserem Beispiel k\u00f6nnen wir dies f\u00fcr eine Inkrement- oder Dekrementfunktion verwenden.<\/p>\n
increment() { \r\n  this.counter.update((currentValue) => currentValue + 1); \r\n};<\/pre>\n
Die\u00a0update<\/code> Funktion muss nicht unbedingt ein Einzeiler sein. Solange man einen R\u00fcckgabewert angibt, k\u00f6nnen verschiedene Operationen durchgef\u00fchrt werden.<\/p>\n
decrement() { \r\n    this.counter.update((currentValue) => \r\n    { console.log('Old value', currentValue); \r\n    const newValue = currentValue - 1; \r\n    return newValue; \r\n  }); \r\n};<\/pre>\n
computed()<\/h3>\n
Um ein Signal zu erzeugen, das auf einem anderen Signal basiert oder von diesem abh\u00e4ngig ist, kann computed<\/code> verwendet werden. Diese Funktion erzeugt ein readonly Signal, das sich selbst aktualisiert, wenn sich der Wert des Signals, von dem es abh\u00e4ngt, \u00e4ndert.
\nAls Beispiel werden wir eine Variable erstellen, die pr\u00fcft, ob der aktuelle Z\u00e4hler gerade oder ungerade ist. isOdd<\/code> kann nicht durch die set<\/code> oder update<\/code> Funktion ge\u00e4ndert werden. Da Angular aber wei\u00df, dass es eine Abh\u00e4ngigkeit zwischen den beiden Signals gibt, wird jedes Mal, wenn sich das counter<\/code> Signal \u00e4ndert, die Callback-Funktion von isOdd<\/code> erneut ausgef\u00fchrt.<\/p>\n
const isOdd = computed(() => this.counter() % 2 !== 0);<\/pre>\n
Nat\u00fcrlich funktioniert dies auch mit zwei oder mehr Signals, von denen es abh\u00e4ngt. Jetzt wird combined<\/code> jedes Mal aktualisiert, wenn sich entweder firstLetter<\/code> oder secondLetter<\/code> \u00e4ndert.<\/p>\n
const firstLetter = signal('a') \r\nconst secondLetter = signal('b') \r\nconst combined = computed(() => \r\n  this.firstLetter().concat(this.secondLetter()));<\/pre>\n
Wie die update<\/code> Funktion muss computed<\/code> kein Einzeiler sein. Jedoch muss man hier beachten, dass die Abh\u00e4ngigkeiten eines computed Signals nicht nur durch seinen R\u00fcckgabewert bestimmt werden. Im folgenden Beispiel verwendet combined<\/code> nur noch firstLetter<\/code> im return statement, wird aber immer noch aktualisiert, wenn sich der Wert von secondLetter<\/code> \u00e4ndert, da das Signal in der Callback-Funktion von combined<\/code> verwendet wird.<\/p>\n
const combined = computed(() => { \r\n  console.log('Second letter changed', this.secondLetter()); \r\n  return this.firstLetter().concat('c') \r\n});<\/pre>\n
effect()<\/h3>\n
Mit effect<\/code> kann man festlegen, was passieren soll, wenn sich der Wert eines Signals \u00e4ndert, oder anders gesagt, welche Seiteneffekte dadurch ausgel\u00f6st werden. Das kann das Loggen des Wertes eines Signals sein, das Exportieren des Wertes in den localStorage oder das transparente Speichern des Wertes in die Datenbank.
\nIn unserem Fall wollen wir nur den neuen Z\u00e4hlerwert auf der Konsole ausgeben.<\/p>\n
Standardm\u00e4\u00dfig erfordert die Registrierung eines neuen Effekts mit der effect<\/code> Funktion einen Injektionskontext (Zugriff auf die inject<\/code> Funktion). Am einfachsten ist es, effect<\/code> innerhalb eines Komponenten-, Direktiven- oder Servicekonstruktors aufzurufen. Alternativ kann der Effekt auch einer Variablen zugewiesen werden (wodurch er auch einen beschreibenden Namen erh\u00e4lt).<\/p>\n
constructor() { \r\n    effect(() => { console.log('New counter value', this.counter()); \r\n  }); \r\n}<\/pre>\n
Wie die computed<\/code> Funktion kann ein Effekt von mehreren Signals abh\u00e4ngig sein.<\/p>\n
const letterEffect = effect(() => console.log('Log letters', this.firstLetter(), this.secondLetter()));<\/pre>\n
untracked()<\/h3>\n
Wenn man Signals in einer reaktiven Funktion wie computed<\/code> oder effect<\/code> lesen will, ohne eine Abh\u00e4ngigkeit zu schaffen, kann man das Signal mit der untracked<\/code> Funktion aufrufen, um zu verhindern, dass ein Signal verfolgt wird.<\/p>\n
Nehmen wir den letterEffect<\/code> von oben als Beispiel. Im Moment loggt der Effekt die aktuellen Buchstaben, wenn sich einer der beiden Signalwerte \u00e4ndert. Wenn der Effekt nur ausgel\u00f6st werden soll, wenn sich firstLetter<\/code> \u00e4ndert, aber nicht, wenn sich secondLetter<\/code> \u00e4ndert, k\u00f6nnen wir das Folgende schreiben:<\/p>\n
const specialEffect = effect(() => console.log('Special effect', this.firstLetter(), untracked(this.secondLetter)));<\/pre>\n
Erfahrung ist der beste Lehrer: Hands-On mit Signals<\/h2>\n
Bist Du bereit, die Theorie in die Praxis umzusetzen? In diesem interaktiven StackBlitz-Beispiel haben wir eine Beispielanwendung erstellt, die die besprochenen Signal-Konzepte beinhaltet. Tauche ein und experimentiere, um Signals in Aktion zu erleben!<\/p>\n