Was ist neu bei Angular Standalone-Komponenten, Signalen und mehr?

Was ist neu in Angular 19?

Angular setzt seine rasante Entwicklung fort (mit neuen Hauptversionen alle ca. 6 Monate). Jetzt, im November 2024, erscheint Angular 19, vollgepackt mit leistungsstarken Funktionen, die das Entwicklererlebnis und die Anwendungsleistung steigern. Von verbesserter Flüssigkeitszufuhr bis hin zu verbesserten Signalen. Lassen Sie uns in die Highlights des Angular 19-Launch-Events eintauchen.

1. Eigenständige Komponenten sind jetzt der Standard

Das erste Mal trafen wir auf eigenständige Komponenten in Angular 14 und wurden seitdem mit jeder Veröffentlichung verbessert. Mit Angular 19 sind alle Komponenten, Anweisungen und Pipes jetzt standardmäßig eigenständig, sodass keine explizite Festlegung von standalone: ​​true erforderlich ist.
Darüber hinaus erfolgen Aktualisierungen nahtlos, da der Befehl „ng update“ vorhandene Codebasen automatisch umgestaltet und so einen reibungslosen und problemlosen Übergang gewährleistet.

2. Signale: Erhöhte Reaktivität

In Angular 16 hatten wir unser erstes Treffen mit Angular Signals, und es war Liebe auf den ersten Blick, und sie haben das Reaktivitätssystem von Angular weiter umgestaltet. Mit Angular 19 wurden mehrere signalbasierte APIs auf einen stabilen Status hochgestuft, darunter input(), output(), model(), viewChild(), viewChildren(), contentChild, contentChildren(), takeUntilDestroyed(), outputFromObservable() , und outputToObservable().
Darüber hinaus stellte Jeremy Elbourne zwei neue experimentelle Signal-APIs vor:

A. Verknüpftes Signal

• Ermöglicht die Verknüpfung des lokalen Status mit einem berechneten Ausdruck.
• Stellt einen Anfangswert bereit.
• Wird automatisch auf den berechneten Wert zurückgesetzt, wenn sich der Ausdruck ändert.

B. Ressourcen-API

• Vereinfacht die Handhabung asynchroner Werte wie Serverdaten.
• Lässt sich nahtlos in das Reaktivitätssystem von Angular integrieren.
• Bietet sowohl Anfrageergebnisse als auch Status als Signale.

Um den Übergang mühelos zu gestalten, automatisieren Befehle wie ng g @angular/core:signal-input-migration, ng g @angular/core:signal-queries-migration und ng g @angular/core:output-migration den Code Einfaches Refactoring. Angular Signals fühlt sich wirklich wie eine Kombination aus dem Entwicklerhimmel an.

3. Eckiges Material: Einfachere Themengestaltung und neue Komponenten

Angular Material entwickelt sich mit jeder Veröffentlichung weiter, und Angular 19 bildet da keine Ausnahme. Dieses Update führt Verbesserungen in zwei Schlüsselbereichen ein:

Neue Theme-API

• Vereinfachen Sie benutzerdefinierte Designs mit weniger Codezeilen mithilfe der mat.theme-API.
• Erstellen Sie benutzerdefinierte Farbpaletten mit einem neuen Schema-Tool, das jetzt eine erweiterte 12-Farben-Palette unterstützt.

Neue Komponenten und Funktionen

• 2D-Drag-and-Drop: Unterstützt jetzt horizontale Neuordnung für noch mehr Flexibilität.
• Zeitauswahlkomponente:Eine lang erwartete Ergänzung.
• Verbesserte Theming-Dokumentation: Einsteigerfreundliche Anleitungen und detaillierte komponentenspezifische Anweisungen.

4. Inkrementelle Flüssigkeitszufuhr: Eine bahnbrechende Leistungsfunktion

Hydration ist eine der besten Funktionen von Angular und wurde in den letzten Versionen mit Innovationen wie vollständige Anwendungshydratation, aufgeschobene Ansichten und Ereigniswiedergabe weiterentwickelt. Aufbauend auf dieser Grundlage stellte Jessica Janiuk eine der aufregendsten Ergänzungen in Angular 19 vor: inkrementelle Hydratation, die jetzt in der Entwicklervorschau verfügbar ist.

Wie es funktioniert

• Der Server rendert tatsächliche Inhalte anstelle von Platzhaltern.
• Auf dem Client bleiben Inhalte dehydriert, bis sie ausgelöst werden (z. B. durch Interaktion oder Betreten des Ansichtsfensters).

Vorteile

• Schnellere anfängliche Ladezeiten.
• Kleinere JavaScript-Bundles.
• Reduzierte Layoutverschiebungen und Flackern für ein reibungsloseres Benutzererlebnis.

Fazit

Das ist alles für den Moment! Ich weiß es zu schätzen, dass Sie sich die Zeit genommen haben, meinen Artikel zu lesen, und würde gerne Ihre Gedanken und Ihr Feedback hören. Während ich mein Schreiben weiter verbessere, sind Ihre Erkenntnisse von unschätzbarem Wert.

Sie können mit mir in Kontakt treten unter:

• Bluesky: mohamedlamine.bsky.social
• X (Twitter): @Mohamed_LamineF
• LinkedIn: mohamedlaminef

Das obige ist der detaillierte Inhalt vonWas ist neu bei Angular Standalone-Komponenten, Signalen und mehr?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!