✨ Template Literal Types

Шаблонные литеральные типы обеспечивают большую гибкость и контроль над строками.

В этой статье рассматриваются несколько практических примеров их использования. От генерации имен классов CSS до создания безопасных ключей для i18n.

👉 https://claritydev.net/blog/typescript-type-literals-practical-use-cases-code-quality

✨ Angular Signal Components: input, output, model

С появлением сигналов в экосистеме Angular, появились совершенно новые способы описания логики.

В этом руководстве подробно рассматриваются примитивы для создания компонентов на основе сигналов input, output и model.

👉 https://blog.angular-university.io/angular-signal-components/

✨ Скрытый потенциал функции inject

Обычно функцией inject пользуются, только для того, чтобы заменить инжект через конструктор.

Алан Маркевич рассказал, как можно ее использовать на все сто процентов.

👉 https://habr.com/ru/articles/812449/

✨ Что будет в Angular 18?

Angular 18 ожидается уже в этом месяце, а пока мы ждем.

Вот несколько нововведений, которые будут представлены в следующей версии.

👉 https://habr.com/ru/articles/812485/

✨ Как использовать оператор satisfies

В TypeScript оператор satisfies был введен в версии 4.9, как эффективный способ обеспечения безопасности типов.

В статье объясняется, как обстояли дела до его появления, и почему он может быть полезен.

👉 https://www.freecodecamp.org/news/typescript-satisfies-operator/

✨ Signal Store и NGXS

С момента появления сигналов в Angular появились способы для создания новых API на их основе, включая стейт менеджеры.

В статье описывается, как объединение NGXS с Signal Store дает новые возможности по управлению состоянием.

👉 https://angular.love/en/signal-store-ngxs-elevating-flexibility-in-state-management/

✨ Умелое использование сигналов

Новые сигналы в Angular — это простой реактивный строительный блок. Однако, как часто бывает, дьявол кроется в деталях.

В статье даны три совета, которые помогут использовать сигналы более эффективно.

👉 https://www.angulararchitects.io/en/blog/skillfully-using-signals-in-angular-selected-hints-for-professional-use/

✨ Обновляем Angular

Поскольку выход Angular 18 уже не за горами (запланирован на 20 мая 2024 года), пришло время обновить свой Angular.

В статье показано, как обновить Angular, включая пакеты сторонних разработчиков.

👉 https://www.angulararchitects.io/en/blog/angular-17-update-control-flow-app-builder-migration/

✨ Создаем табло реального времени

Традиционно, чтобы получить новые данные, страница должна отправить запрос на сервер. С помощью Server-Sent Events, сервер может отправлять новые данные на страницу в любое время, но это одностороннее соединение, поэтому вы не можете отправлять события от клиента к серверу.

В статье, на примере спортивного табло, на котором отображается результат игры, приводится базовая реализация SSE с помощью NestJS.

👉 https://dev.to/this-is-angular/building-real-time-boards-with-angular-and-nestjs-using-server-sent-events-3k9j

✨ Упрощение логики на клиенте

Клиенту часто требуются представления данных, отличные от тех, что приходят с сервера, и это может приводить к сложным преобразованиям, разбросанным по всей логике пользовательского интерфейса.

Чтобы решить эту проблему, в статье вводится класс View Model для каждой сущности. Такая инкапсуляция упрощает работу с данными и гарантирует, что пользовательский интерфейс получит только то, что ему нужно.

👉 https://netbasal.com/simplifying-client-side-logic-the-strategic-use-of-view-models-db0ae0363be4

✨ Бесплатная книга

Манфред Штайер выпустил второе издание своей бесплатной электронной книги Modern Angular.

В ней 14 глав, которые показывают, как пользоваться новыми возможностями Angular.

👉 https://www.angulararchitects.io/en/ebooks/modern-angular/

✨ Управляем состоянием в Angular

Многие компании используют Angular для создания корпоративных приложений, которые настолько велики, что должны управлять большим количеством данных.

В статье реализуется корзина для магазина, которая отслеживает выбранные товары, промежуточный итог, скидку, общую сумму и промокод.

👉 https://dev.to/railsstudent/signal-in-a-service-for-state-management-in-angular-4469

✨ Оптимизируем изображения в Angular

Создание приложения ориентированного на показ изображений может показаться простым, но знаете ли вы, как убедиться, что оно работает оптимально?

В таких приложениях необходимо знать о ленивой загрузке, приоритизации, использовании CDN, учитывать показатели Core Web Vita и т.д.

Однако есть хорошие новости: Angular предлагает директиву ngOptimizedImage, которая облегчает работу.

👉 https://www.danywalls.com/how-to-optimize-images-in-angular-using-ngoptimizedimage-directive

✨ Ключевое слово Infer в TypeScript

Infer — это мощный инструмент для извлечения информации о типе.

В статье рассказывается, как он может быть полезен для тех, кто хочет использовать весь потенциал TypeScript.

👉 https://claritydev.net/blog/typescript-infer-keyword-unlocking-type-information

✨ Что нового в Angular

Недавно состоялась конференция Google I/O, где одно из выступлений было посвящено Angular.

Узнайте о новых возможностях, которые появятся в 18-й версии.

👉 https://www.youtube.com/watch?v=srP2P6j4Cqw

🎉 Angular 18 уже доступен!

Сегодня мы рады поделиться следующим этапом в развитии Angular.

В этот раз команда сосредоточилась на доработке, переведя многие API в стабильную версию.

Основные нововведения этого релиза:

• Экспериментальная поддержка zoneless
• Angular.dev используется в качестве основной документации
• Material 3, deferrable views, control flow теперь стабильны
• Улучшения в SSR

👉 https://blog.angular.dev/angular-v18-is-now-available-e79d5ac0affe

🎉 Улучшение логики перенаправления маршрутов

В недавнем обновлении Angular значительно улучшил возможности маршрутизации, представив гибкий подход к перенаправлению маршрутов с помощью RedirectFunction.

Она позволяет определять перенаправления с помощью функции, которая может возвращать либо строку, либо дерево UrlTree, обеспечивая расширенный контроль и универсальность логики маршрутизации.

👉 https://netbasal.com/enhancing-angulars-route-redirection-logic-introducing-redirectfunction-245a45add387

🎉 RxJS для самых маленьких

RxJS предлагает мощные операторы для создания, комбинирования и обработки потоков данных. Однако новичкам бывает сложно разобраться в теме потоков.

В статье рассмотрены ключевые аспекты, которые будут полезны тем, кто только начинает изучать RxJS.

👉 https://habr.com/ru/articles/816755/

🎉 Что нового в Angular 18

Если вы пропустили анонс нового Angular в формате статьи, то у нас отличные новости.

Команда также выпустила видео, в котором подробно объясняются изменения.

👉 https://youtu.be/DK8M-ZFjaMw