Angular hat im November 2022 seine 15. Version und im Februar dieses Jahres eine Version 15.2 veröffentlicht.
Die neue Version kommt mit großartigen Funktionen: Eigenständige Komponenten, Image Directive und weitere Verbesserungen für das gesamte Ökosystem und die Community.
Eine neue Version von Angular
Angular bringt seine 15. Version auf den Markt, und das ist innerhalb seines Ökosystems bereits normal, denn alle sechs Monate gibt es eine Version mit Verbesserungen, Updates und neuen Funktionen, um noch leistungsfähigere Anwendungen zu erstellen.
Dies sollte keine Probleme verursachen, wenn Sie Angular-Projekte mit einer anderen Version haben. Es spielt keine Rolle, mit welcher Version Sie arbeiten, Sie können einfach auf die Aktualisierungsschaltfläche klicken und problemlos weiterarbeiten.
Wie kann ich Angular aktualisieren?
Angular hat das Upgrade sehr viel einfacher gemacht und Sie müssen nur noch den Befehl ng update ausführen, um zu aktualisieren.
Beachten Sie, dass Sie dies schrittweise tun müssen. Das heißt, wenn Sie an einem Projekt in Angular mit der Version 13 arbeiten, müssen Sie zuerst auf die Version 14 und dann auf die Version 15 aktualisieren. Dazu führen Sie den Befehl aus, der die Version angibt, die Sie aktualisieren möchten.
Wenn Sie weitere Details wünschen, können Sie die offizielle Angular-Seite besuchen, auf der Sie angeben, welche Version Sie verwenden und auf welche Sie aktualisieren möchten. Dort finden Sie weitere Einzelheiten zur Vorgehensweise, aber 99 % der Arbeit wird bereits durch den Befehl ng update erledigt.
Was ist neu in Angular Version 15?
Wir müssen uns daran erinnern, dass Angular eine ganze Plattform ist, die es uns erlaubt, mehrere Tools zu verwenden, um leistungsstarke Anwendungen zu erstellen. Wenn es also eine neue Version gibt, kommen die Änderungen und neuen Funktionen von vielen seiner Pakete.
Anwendungen ohne Module
Eigenständige Komponenten sind eine der wichtigsten Innovationen. Es geht darum, Anwendungen zu entwickeln, ohne dass Module benötigt werden.
Eines der Ziele von Angular ist es, die Lernkurve von neuen Personen, die dieses Framework erlernen, zu minimieren, und Module sind eines der Konzepte, die am Anfang schwer zu verstehen sind. Da in Version 14 bereits eine vorläufige Version der Standalone-Komponenten veröffentlicht wurde, verfügen wir nun über eine robustere API zur Unterstützung dieser Komponenten. Mit einer einzigen Datei können Sie zum Beispiel eine Angular-App ohne Module ausführen.
Das bedeutet nicht, dass die Module nicht mehr verwendet werden. Vielmehr haben Sie nun die Möglichkeit, mit beiden Strukturen zu arbeiten. Außerdem ist Angular abwärtskompatibel, d.h. diese neue Form ist optional. Wenn Sie weiterhin mit Modulen arbeiten wollen, können Sie das auch weiterhin tun oder sogar Hybride aus Modulen und Standalone-Komponenten haben.
Lazy Loading von Komponenten
Wenn Sie das Lazy-Loading-Muster implementieren möchten, tun Sie dies über ein Modul. Dank der Standalone Components können Sie dies nun jedoch direkt in den Komponenten tun, und Sie müssen das dynamische Importversprechen nicht lösen, da dies automatisch geschieht.
Verbessertes Laden von Bildern
Eine weitere Neuerung ist, dass wir eine neue Direktive in Angular haben, um das Laden von Bildern zu verbessern und damit die Ladezeiten auf einer Website zu reduzieren. Wir haben zum Beispiel eine Testseite, die 4 Sekunden zum Laden eines Bildes benötigt; die Anwendung der neuen Richtlinie würde viel weniger Zeit in Anspruch nehmen.
Um es zu verwenden, müssen Sie lediglich das Modul NgOptimizedImage an der Stelle importieren, an der Sie es verwenden möchten, und dann das attr ngSrc für Ihre Bilder verwenden.
Ein Beispiel für die Auswirkungen dieser Richtlinie ist die E-Commerce-Website Land’s End. Da die Website viele Bilder verwendet, hat sich die Ladezeit nach der Anwendung dieser Funktion um 75 % verbessert, wie der Lighthouse-Bericht zeigt.
Verbesserte Fehlerformatierung
Das Debugging ist eine der Hauptaufgaben eines Webentwicklers, und Angular war uns immer einen Schritt voraus, wenn es darum ging, bessere Tools zur Analyse von Fehlern bereitzustellen. Jetzt können Sie auf eine vollständigere Art und Weise wissen, wie und warum ein Fehler aufgetreten ist, mit einer klareren Formatierung.
In der Version 15 sind die Fehler nun klein, mit entsprechenden Informationen versehen und es wird genauer angegeben, wo der Fehler auftritt.
Angular Material abgestimmt auf Material Design 3
Angular Material ist eines der Pakete, die Sie in Angular verwenden oder nicht verwenden können, denken Sie daran, dass Sie wählen, welche Teile des Frameworks zu verwenden. In diesem Fall wäre Angular Material eine Bibliothek von Komponenten mit einem visuellen Stil in Anlehnung an Googles Material Design Design System für Anwendungen und sie veröffentlichten Version Nummer 3 dieses Design Systems.
Was ändert sich in dieser Version? Google aktualisiert gerade sein Designsystem und hat im Rahmen dessen Tools für Android, Flutter und Web veröffentlicht, mit denen sich die Richtlinien leichter umsetzen und befolgen lassen.
Jetzt wird das Angular Material-Team diese Material Design-Tools direkt verwenden, wodurch es einfacher wird, das Design-System zu pflegen und originalgetreu zu implementieren.
Wenn Sie Angular Material verwenden und Sie wollen auf Version 15 zu aktualisieren, wenn Sie zusätzliche Schritte machen müssen, da diese Änderung ändern, wie mit Angular Material arbeiten, aber Angular immer denkt an Sie und Sie können diese Migration mit den Befehlen zu machen.
Ebenfalls neu in dieser Version ist die Unterstützung der Komponente mat-slider mit Rängen.
Neues Dienstprogramm im Angular CDK
Das Angular CDK ist eine Reihe von Tools für UI-Verhaltensweisen, die mit dem visuellen Stil agonistisch sind. Das bedeutet, dass Sie viele Codezeilen einsparen können, indem Sie Verhaltensweisen wie Drag and Drop, Modals, Overlays erstellen, aber Ihren eigenen visuellen Stil hinzufügen.
Ein Beispiel hierfür ist die Verwendung des Angular CDK + TailwindCSS zur Erstellung einer Schnittstelle wie Trello.
Und diese neue Version enthält ein neues CDK-Listbox-Verhalten.
Durch die Verwendung von @angular/cdk/listbox erhalten Sie alle erwarteten Verhaltensweisen einer Liste, einschließlich Zugänglichkeit, Tastaturinteraktion, Fokusverwaltung usw.
Schnellerer Aufbau mit ESBuild
In dieser Version wird die Unterstützung für ESBuild verbessert, ein Packager, der in GO geschrieben ist und Webpack ersetzen soll. Dadurch wird die Ausführung von Befehlen wie ng build weniger Zeit in Anspruch nehmen, und Sie können mit ng build –watch sogar einen Liveload durchführen.
In Version 14 wurde eine Vorabversion veröffentlicht, die bereits den Paketierungsprozess mit diesem Tool beinhaltet und die Verarbeitung von sass-, svg- und fileReplacement-Dateien beinhaltet.
Weniger Dateien
Wenn Sie ein neues Projekt in Angular starten, werden Sie feststellen, dass sich die Anzahl der Dateien deutlich verringert.
Was ist mit Dateien, die verschwinden? Angular verwaltet diese Einstellungen im Backend und einige von ihnen verschwinden, andere müssen Sie aktivieren, wenn Sie sie wirklich brauchen.
So finden Sie beispielsweise den Umgebungsordner nicht mehr, wenn Sie wirklich Umgebungen verwalten und Ihre Schlüssel dort ablegen müssen, und Sie aktivieren die Datei manuell. Machen Sie sich keine Sorgen, wenn Sie die Dateien bereits mit benutzerdefinierten Einstellungen verwaltet haben, Angular wird sie behalten.
Wählen Sie Ihr Testwerkzeug für e2e
Angular hat kürzlich Protractor als Werkzeug für das Schreiben von e2e-Tests abgeschafft. Was ist also zu verwenden? In der Branche gibt es Tools, die sich hervorragend für diese Art von Tests eignen, und jetzt lässt Angular Ihnen die Wahl, mit welchem Tool Sie arbeiten möchten, wenn Sie den Befehl ng e2e ausführen.
Vorteile der Integration von Angular 15 und Stripe
Stripe ist eine Online-Zahlungsplattform, die es Unternehmen ermöglicht, Transaktionen sicher und effizient abzuwickeln. Die Integration von Stripe in eine Angular-Anwendung kann eine Vielzahl von Vorteilen für Benutzer und Geschäftsinhaber bieten.
Hier sind die Vorteile der Integration der Stripe-Integration in eine mit Angular 15 entwickelte Anwendung.
Sichere Zahlungsabwicklung
Stripe ist eine vertrauenswürdige Zahlungsplattform, die die höchsten Sicherheitsstandards der Branche anwendet, um die Zahlungsdaten der Nutzer zu schützen. Durch die Einbindung von Stripe in eine Angular-Anwendung können Nutzer sicher sein, dass ihre Zahlungsdaten geschützt sind und nicht an Dritte weitergegeben werden. Dies kann das Vertrauen der Nutzer in die Anwendung und die dahinter stehende Marke stärken.
Flexibilität bei der Zahlungsabwicklung
Stripe bietet eine Vielzahl von Optionen für die Zahlungsabwicklung, darunter Kredit- und Debitkarten, Apple Pay, Google Pay und andere. Durch die Einbindung von Stripe in eine Angular-Anwendung können Unternehmen ihren Nutzern eine Vielzahl von Zahlungsoptionen anbieten und so die Kundenzufriedenheit und die Umsatzzahlen steigern.
Leichtigkeit der Integration
Stripe bietet eine einfach zu verwendende API, die eine schnelle und einfache Integration in Angular-Anwendungen ermöglicht. Durch die Einbindung von Stripe in eine Angular-Anwendung können Unternehmen Zeit und Ressourcen sparen, da sie keine benutzerdefinierte Zahlungslösung von Grund auf entwickeln müssen.
Zentralisierte Zahlungsverwaltung
Stripe bietet eine zentralisierte Plattform für die Zahlungsverwaltung, mit der Unternehmer Transaktionen nachverfolgen, Erstattungen ausstellen und andere Aufgaben der Zahlungsverwaltung durchführen können. Durch die Einbindung von Stripe in eine Angular-Anwendung können Unternehmen alle Transaktionen der Anwendung an einem Ort verwalten, was die Zahlungsverwaltung vereinfachen kann.
Verbesserte Benutzerfreundlichkeit
Durch die Einbindung von Stripe in eine Angular-Anwendung können Benutzer einen schnellen und nahtlosen Checkout-Prozess erleben. Dies kann das Nutzererlebnis verbessern und die Kundenzufriedenheit erhöhen. Die Nutzer können die gewünschten Produkte oder Dienstleistungen einfach und schnell bezahlen, ohne sich um technische oder Sicherheitsfragen kümmern zu müssen.
Ausweitung des Kundenstamms
Indem sie den Nutzern eine Vielzahl von Zahlungsoptionen anbieten, können die Unternehmer ihren Kundenstamm erweitern. Durch die Einbindung von Stripe in eine Angular-Anwendung können Unternehmen Nutzer anziehen, die eine bestimmte Zahlungsoption bevorzugen, was den Umsatz und die Rentabilität der Anwendung steigern kann.
Reduzierung von Betrug
Stripe verfügt über Tools und Sicherheitsmaßnahmen zur Erkennung und Verhinderung von Betrug bei Zahlungstransaktionen, die sowohl Unternehmen als auch App-Nutzer schützen können.
Zugang zu Zahlungsdaten
Durch die Verwendung von Stripe können Unternehmer auf wertvolle Informationen über Zahlungstransaktionen zugreifen, wie z. B. Kaufhäufigkeit, durchschnittlicher Kaufwert und andere relevante Daten. Diese Daten können Unternehmern helfen, fundierte Entscheidungen über ihre Vertriebs- und Marketingstrategie zu treffen.
Integration mit anderen Business-Tools
Stripe lässt sich in eine Vielzahl von Business-Tools integrieren, z. B. in E-Commerce-Plattformen, Abrechnungs- und Buchhaltungsdienste und vieles mehr. Durch die Einbindung von Stripe in eine Angular-Anwendung können Unternehmer diese Integrationen nutzen, um die Effizienz und Effektivität ihres Unternehmens zu verbessern.
Technische Unterstützung und Lernressourcen
Stripe bietet einen ausgezeichneten technischen Support und eine Vielzahl von Lernressourcen, die Geschäftsinhabern helfen, die Plattform effektiv zu nutzen. Dies kann Unternehmern helfen, technische Probleme zu beheben und neue Strategien zur Verbesserung ihrer Zahlungsabwicklung und ihres Zahlungsmanagements zu erlernen.
Wir werden in Kürze Neuigkeiten über die kommende 16. Version von Angular bekannt geben, die im Mai dieses Jahres veröffentlicht wird.
