Najnowsza wersja Angular została wydana w listopadzie. Minko Gechev podsumowuje najważniejsze nowe funkcje w swoim ogłoszeniu o wydaniu.

W tym artykule udostępniam zasoby, które nauczą Cię, jak działają te nowe funkcje Angulara:

• Samodzielne interfejsy API (są teraz stabilne)
• Samodzielny interfejs API z możliwością wstrząsania drzewa routerów i funkcjonalne zabezpieczenia routera
• Samodzielny interfejs API z możliwością wstrząsania drzewa HttpClient
• Interfejs API składu dyrektywy
• Dyrektywa obrazu

Samodzielne interfejsy API

Zespół Angular wprowadził autonomiczne interfejsy API w Angular v14 jako funkcję podglądu programisty. W Angular v15 nie są już w podglądzie programisty i nie są częścią stabilnej powierzchni API.

Komponenty, dyrektywy i potoki można teraz oznaczać jako samodzielne: prawda. Klasy kątowe oznaczone jako samodzielne nie muszą być deklarowane w NgModule.

Przewodnik „Rozpoczęcie pracy z autonomicznymi komponentami” w dokumentacji Angular wyjaśnia, jak tworzyć i używać autonomicznych komponentów.

Samodzielny interfejs API z możliwością wstrząsania drzewa routerów i funkcjonalne zabezpieczenia routera

Andrew Scott wyjaśnia, w jaki sposób możemy tworzyć routery bez RouterModulei jak korzystać z funkcjonalnych zabezpieczeń routera:

Aby uzyskać dodatkowe informacje na temat zmniejszania rozmiaru pakietu za pomocą samodzielnych routerów i komponentów, przeczytaj artykuł Kevina Kreuzera :

Samodzielny interfejs API z możliwością wstrząsania drzewa HttpClient

Teraz możemy używać interfejsu API klienta HTTP bez rozszerzenia HttpClientModule. Netanel Basal pokazuje nam, jak zastosować tę nową funkcję i demonstruje, jak możemy zdefiniować przechwytywacze w leniwie ładowanych modułach:

Interfejs API składu dyrektywy

Z oficjalnej dokumentacji:

Dyrektywy Angular oferują świetny sposób na enkapsulację zachowań wielokrotnego użytku — dyrektywy mogą nadawać elementom atrybuty, klasy CSS i detektory zdarzeń.

Interfejs API kompozycji dyrektyw umożliwia stosowanie dyrektyw do elementu hosta komponentu z poziomu komponentu.

Cédric Exbrayat wyjaśnia, dlaczego potrzebujemy tego nowego API:

Henrique Custódia ilustruje na doskonałym przykładzie, jak działa API składu dyrektywy:

Angular 15: Korzystanie z interfejsu API kompozycji dyrektywy

Dyrektywa obrazu

Przewodnik „Pierwsze kroki z NgOptimizedImage” w dokumentacji Angular wyjaśnia, w jaki sposób nowa NgOptimizedImagesamodzielna dyrektywa pomaga nam przyjąć najlepsze praktyki optymalizacji wydajności ładowania obrazów.

Fábio Englert Moutinho testuje NgOptimizedImagedyrektywę w przykładowej aplikacji e-commerce i osiąga nawet o 50% lepsze wyniki Lighthouse:

➕ Czy widziałeś jakieś inne zasoby, które powinienem dodać do tego przewodnika po Angular 15? Proszę o przesłanie go do mnie, abym mógł umieścić go w artykule!

‍O autorze

Nazywam się Gergely Szerovay i pracuję jako lider działu rozwoju frontendu. Nauczanie (i uczenie się) Angular to jedna z moich pasji. Na co dzień konsumuję treści związane z Angular — artykuły, podcasty, rozmowy konferencyjne i tak dalej.

Jeśli jesteś zainteresowany moją comiesięczną kolekcją wspaniałych zasobów Angular, zasubskrybuj moją publikację o nazwie Angular Addicts. Poprzednie numery można przeczytać tutaj .

A jeśli ostatnio widziałeś dobry artykuł, tweet lub inne źródło związane z Angularem, daj mi znać tutaj w komentarzach lub wyślij mi wiadomość prywatną na Twitterze ! Być może opiszę to w następnym numerze Angular Addicts!

Daj mi też znać, jakie inne tematy związane z Angularem Cię interesują, mam wiele szkiców artykułów tutaj na Medium, które czekają na publikację.

Śledź mnie na Medium , Twitterze lub LinkedIn , aby dowiedzieć się więcej o Angular!