Die neueste Version von Angular wurde im November veröffentlicht. Minko Gechev fasst die wichtigsten Neuerungen in seiner Release-Ankündigung zusammen.

In diesem Artikel teile ich Ressourcen, die Ihnen beibringen, wie diese neuen Angular-Funktionen funktionieren:

• Eigenständige APIs (sie sind jetzt stabil)
• Router-Baum-erschütterbare eigenständige API und funktionale Router-Wächter
• HttpClient Tree-Shakable Standalone-API
• Direktive Zusammensetzung API
• Bildrichtlinie

Eigenständige APIs

Das Angular-Team hat Standalone-APIs in Angular v14 als Vorschaufunktion für Entwickler eingeführt. In Angular v15 sind sie nicht mehr in der Entwicklervorschau und Teil der stabilen API-Oberfläche.

Komponenten, Direktiven und Pipes können jetzt als eigenständig gekennzeichnet werden: wahr. Als eigenständig markierte Angular-Klassen müssen nicht in einem NgModule deklariert werden.

Der Leitfaden „Erste Schritte mit eigenständigen Komponenten“ in der Angular-Dokumentation erklärt, wie eigenständige Komponenten erstellt und verwendet werden.

Router-Baum-erschütterbare eigenständige API und funktionale Router-Wächter

Andrew Scott erklärt, wie wir Router ohne einen erstellen können RouterModuleund wie man funktionale Router-Wächter verwendet:

Um weitere Einzelheiten darüber zu erfahren, wie Sie die Paketgröße mit eigenständigen Routern und Komponenten reduzieren können, lesen Sie den Artikel von Kevin Kreuzer :

HttpClient Tree-Shakable Standalone-API

Jetzt können wir die HTTP-Client-API ohne die HttpClientModule. Netanel Basal zeigt uns, wie man diese neue Funktion anwendet, und er demonstriert, wie wir Abfangjäger in faul geladenen Modulen definieren können:

Direktive Zusammensetzung API

Aus der offiziellen Dokumentation:

Angular-Direktiven bieten eine großartige Möglichkeit, wiederverwendbare Verhaltensweisen zu kapseln – Direktiven können Attribute, CSS-Klassen und Ereignis-Listener auf ein Element anwenden.

Mit der Direktiven-Kompositions-API können Sie Direktiven auf das Host-Element einer Komponente innerhalb der Komponente anwenden.

Cédric Exbrayat erklärt, warum wir diese neue API brauchen:

Henrique Custódia veranschaulicht anhand eines großartigen Beispiels, wie die Direktiven-Kompositions-API funktioniert:

Angular 15: Verwenden der Direktiven-Zusammensetzungs-API

Bildrichtlinie

Der Leitfaden „Erste Schritte mit NgOptimizedImage“ in der Angular-Dokumentation erklärt, wie die neue NgOptimizedImageeigenständige Direktive uns dabei hilft, Best Practices zur Leistungsoptimierung für das Laden von Bildern zu übernehmen.

Fábio Englert Moutinho testet die NgOptimizedImageRichtlinie in einer beispielhaften E-Commerce-Anwendung und erzielt bis zu 50 % bessere Lighthouse-Ergebnisse:

➕ Haben Sie weitere Ressourcen gesehen, die ich diesem Angular 15-Studienleitfaden hinzufügen sollte? Bitte senden Sie es mir zu, damit ich es im Artikel erwähnen kann!

‍Über den Autor

Mein Name ist Gergely Szerovay , ich arbeite als Frontend Development Chapter Lead. Das Lehren (und Lernen) von Angular ist eine meiner Leidenschaften. Ich konsumiere täglich Inhalte im Zusammenhang mit Angular – Artikel, Podcasts, Konferenzgespräche, wie Sie es nennen.

Wenn Sie an meiner monatlichen Sammlung großartiger Angular-Ressourcen interessiert sind, abonnieren Sie meine Publikation namens Angular Addicts. Hier können Sie die vergangenen Ausgaben lesen .

Und wenn Sie in letzter Zeit einen guten Angular-bezogenen Artikel, Tweet oder eine andere Ressource gesehen haben, lassen Sie es mich bitte hier in den Kommentaren wissen oder senden Sie mir eine DM auf Twitter ! Ich werde es vielleicht in der nächsten Ausgabe von Angular Addicts vorstellen!

Teilen Sie mir bitte auch mit, an welchen anderen Angular-Themen Sie interessiert sind. Ich habe hier auf Medium viele Artikelentwürfe, die darauf warten, veröffentlicht zu werden.

Folgen Sie mir auf Medium , Twitter oder LinkedIn , um mehr über Angular zu erfahren!