Angular v16 wurde Anfang Mai eingeführt. Erfahren Sie, welche bedeutenden Verbesserungen diese Version mit sich bringt.
Angular, verwaltet von Google, ist ein weit verbreitetes Open-Source-Framework für die Entwicklung von Webanwendungen. Es bietet Ihnen ein robustes Toolkit und eine Reihe von Funktionen, mit denen Sie dynamische, reaktionsfähige und skalierbare Webanwendungen erstellen können.
Die kürzlich erfolgte Einführung von Angular Version 16 führt spannende Updates und Verbesserungen des Entwicklungserlebnisses sowie eine bessere Anwendungsleistung und -stabilität ein.
1. Winkelsignale
Winkelsignale ist eine Bibliothek, die die Definition reaktiver Werte und die Herstellung von Abhängigkeiten zwischen ihnen ermöglicht. Hier ist ein einfaches Beispiel für die Verwendung von Angular-Signalen in einer Angular-Anwendung:
@Komponente ({
Wähler: 'meine App',
eigenständige: WAHR,
Vorlage: `
{{ vollständiger Name() }}
Der obige Codeausschnitt erstellt einen berechneten Wert namens „fullName“, der auf den Signalen „firstName“ und „lastName“ basiert. Darüber hinaus definiert es einen Effekt, eine Rückruffunktion, die immer dann ausgeführt wird, wenn sich der Wert der gelesenen Signale ändert.
In diesem Fall hängt der Wert „fullName“ von „firstName“ und „lastName“ ab, sodass die Änderung eines dieser Werte den Effekt auslöst. Wenn der Wert von firstName auf John gesetzt ist, protokolliert der Browser die folgende Meldung an der Konsole:
Name geändert: John Doe.
2. Eigenständige neue Ng-Kollektion
Ab Angular v16 können Sie von Anfang an neue eigenständige Projekte erstellen! Um die Entwicklervorschau der eigenständigen Schaltpläne auszuprobieren, stellen Sie sicher, dass Angular CLI v16 installiert ist, und führen Sie den folgenden Befehl aus:
ng neu --standalone
Dadurch erhalten Sie eine einfachere Projektstruktur ohne NgModules. Darüber hinaus erzeugen alle Generatoren im Projekt eigenständige Anweisungen, Komponenten und Pipes!
3. Automatische Zuordnung der Routenparameter
Betrachten Sie eine Routing-Konfiguration wie folgt:
Exportconst Routen: Routen = [{
Weg: 'Suche:/id',
Komponente: SearchComponent,
beschließen: {
searchDetails: searchResolverFn
}
}];
Vor Angular 16 mussten Sie den ActivatedRoute-Dienst einbinden, um URL-Parameter, Abfrageparameter oder zugehörige Daten für eine bestimmte URL abzurufen.
Hier ist ein Beispiel dafür, wie Sie es tun mussten:
@Komponente({
...
})
ExportKlasse SearchComponent {
readonly #activatedRoute = inject (ActivatedRoute);
schreibgeschützt id$ = Das.#activatedRoute.paramMap (map(Parameter => params.get('Ausweis')));
schreibgeschützte Daten$ = Das.#activatedRoute.data.map(({
suchDetails
}) => searchDetails);
}
Mit Angular 16 müssen Sie den ActivatedRoute-Dienst nicht mehr einbinden, um verschiedene Routenparameter abzurufen, da Sie diese direkt an Komponenteneingaben binden können.
Um diese Funktionalität in einer Anwendung zu aktivieren, die das Modulsystem verwendet, legen Sie den entsprechenden Wert in den RouterModule-Optionen fest:
RouterModule.forRoot (Routen, {
bindComponentEingaben: WAHR
})
Für eine eigenständige Anwendung müssen Sie stattdessen eine Funktion aufrufen:
ProvideRoutes (routes, withComponentInputBinding());
Sobald Sie diese Funktionalität aktivieren, wird die Komponente viel einfacher:
@Komponente({
...
})
ExportKlasse SearchComponent {
@Eingang() Ausweis!: Zeichenfolge;
@Eingang() searchDetails!: SearchDetails;
}
4. Erforderliche Eingabe
Eine mit Spannung erwartete Funktion für die Angular-Community ist die Möglichkeit, bestimmte Eingaben als erforderlich zu markieren. Bisher mussten Sie hierfür verschiedene Problemumgehungen nutzen, beispielsweise das Auslösen eines Fehlers in NgOnInit Lebenszyklus, wenn die Variable nicht definiert wurde, oder Ändern des Selektors der Komponente, um die obligatorische Variable einzuschließen Eingänge.
Allerdings hatten beide Lösungen ihre Vor- und Nachteile. Ab Version 16 ist das Erfordernis einer Eingabe so einfach wie das Bereitstellen eines Konfigurationsobjekts in den Metadaten der Eingabeanmerkung:
@Eingang({
erforderlich: WAHR
}) Name!: Zeichenfolge;
5. Vite als Entwicklungsserver
Mit Angular 14 wurde ein neuer JavaScript-Bundler namens EsBuild eingeführt, der die Build-Zeiten deutlich um etwa 40 % verkürzte. Allerdings konnten Sie diesen Leistungsgewinn nur während der Build-Phase und nicht während der Entwicklung mit dem Dev-Server realisieren.
In der kommenden Version von Angular das Vite-Build-Tool ermöglicht den Einsatz von EsBuild auch während der Entwicklung.
Um diese Funktion zu aktivieren, aktualisieren Sie die Builder-Konfiguration in der Datei „angular.json“ wie folgt:
"Architekt": {
"bauen": {
„Baumeister“: „@angular-devkit/build-angular: browser-esbuild“,
"Optionen": {
...
}
}
Bitte beachten Sie, dass diese Funktionalität noch experimentell ist.
Verbesserung der Entwicklungserfahrung und Leistung
Angular Version 16 bringt spannende Updates wie Angular Signals für die Datenverwaltung, eigenständige Projekte Erstellung, automatische Zuordnung der Routenparameter, erforderliche Eingaben und Integration von Vite zur Verbesserung Entwicklung. Diese Verbesserungen verbessern das Entwicklungserlebnis und erhöhen die Anwendungsleistung.