Учебное пособие по Angular 15

Последняя версия Angular была выпущена в ноябре. Минко Гечев резюмирует самые важные новые функции в своем объявлении о выпуске.
В этой статье я делюсь ресурсами, которые научат вас, как работают эти новые функции Angular:
- Автономные API (теперь они стабильны)
- Автономный API с поддержкой дерева маршрутизаторов и функциональные средства защиты маршрутизатора
- HttpClient автономный API с древовидной тряской
- API композиции директив
- Директива изображения
Автономные API
Команда Angular представила автономные API в Angular v14 в качестве функции предварительного просмотра для разработчиков. В Angular v15 они больше не находятся в предварительной версии для разработчиков и являются частью стабильной поверхности API.
Компоненты, директивы и пайпы теперь можно помечать как автономные: true. Классы Angular, помеченные как автономные, не нужно объявлять в NgModule.
Руководство «Начало работы с автономными компонентами» в документации Angular объясняет, как создавать и использовать автономные компоненты.
Автономный API с поддержкой дерева маршрутизаторов и функциональные средства защиты маршрутизатора
Эндрю Скотт объясняет, как мы можем создавать маршрутизаторы без RouterModule
и как использовать функциональные средства защиты маршрутизатора:
Дополнительные сведения о том, как уменьшить размер пакета с помощью автономных маршрутизаторов и компонентов, см. в статье Кевина Кройцера :
HttpClient автономный API с древовидной тряской
Теперь мы можем использовать HTTP Client API без расширения HttpClientModule
. Нетанел Базаль показывает нам, как применять эту новую функцию, и демонстрирует, как мы можем определять перехватчики в модулях с ленивой загрузкой:
API композиции директив
Из официальной документации:
Директивы Angular предлагают отличный способ инкапсулировать повторно используемое поведение — директивы могут применять к элементу атрибуты, классы CSS и прослушиватели событий.
API композиции директив позволяет применять директивы к основному элементу компонента изнутри компонента .
Седрик Эксбрайат объясняет, зачем нам нужен этот новый API:
Энрике Кустодиа на отличном примере иллюстрирует, как работает API композиции директив:
Angular 15: использование API композиции директивДиректива изображения
Руководство «Начало работы с NgOptimizedImage» в документации Angular объясняет, как новая NgOptimizedImage
автономная директива помогает нам применять передовые методы оптимизации производительности для загрузки изображений.
Фабио Энглерт Моутинью тестирует NgOptimizedImage
директиву на примере приложения для электронной коммерции и получает на 50 % лучшие оценки Lighthouse:
➕ Видели ли вы какие-либо другие ресурсы, которые я должен добавить в это учебное руководство по Angular 15? Пожалуйста, пришлите его мне, чтобы я мог использовать его в статье!
Об авторе
Меня зовут Gergely Szerovay , я работаю руководителем отдела фронтенд-разработки. Преподавание (и изучение) Angular — одна из моих страстей. Я ежедневно просматриваю контент, связанный с Angular — статьи, подкасты, выступления на конференциях и так далее.
Если вам интересна моя ежемесячная коллекция отличных ресурсов по Angular, подпишитесь на мою публикацию под названием Angular Addicts. Прочитать предыдущие выпуски можно здесь .
И если вы недавно видели хорошую статью, твит или другой ресурс, связанный с Angular, сообщите мне об этом здесь, в комментариях, или отправьте мне сообщение в Twitter ! Возможно, я расскажу об этом в следующем выпуске Angular Addicts!
Кроме того, пожалуйста, дайте мне знать, какие другие темы Angular вас интересуют, у меня есть много черновиков статей здесь, на Medium, ожидающих публикации.
Следуйте за мной на Medium , Twitter или LinkedIn , чтобы узнать больше об Angular!