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

Dec 01 2022
Все, что вам нужно знать, чтобы освоить новую версию Angular
Последняя версия Angular была выпущена в ноябре. Минко Гечев резюмирует самые важные новые функции в своем объявлении о выпуске.

Последняя версия 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!