✨ ИИ в современных Angular-проектах

Пересечение ИИ и фронтенд-разработки меняет подход к созданию, тестированию и управлению приложениями.

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

👉 https://www.angularspace.com/ai-in-modern-angular-workspaces-the-future-is-now/

✨ Мощь CSS-масок

Наконец, CSS-свойство mask получило полную поддержку во всех современных браузерах без необходимости вендорных префиксов. Это значит, что осталось лишь привыкнуть к его использованию и не бояться применять.

Барсуков Никита напомнил теорию и поделился практическими примерами на основе опыта работы с Taiga UI.

👉 https://habr.com/ru/companies/tbank/articles/853042/

✨ Введение в Vitest и Angular

Теперь, когда в новых версиях Angular используется Vite, мы можем применять Vitest в наших Angular-проектах. Процесс установки прост, а синтаксис легко освоить.

В этой статье рассказывается, как настроить Vitest в приложении на Angular 18 для замены Karma, а также добавить покрытие кода, чтобы отслеживать, какой процент приложения охватывается юнит-тестами.

👉 https://www.angularspace.com/introduction-to-vitest-and-angular/

✨ Лучшие практики для директив

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

Однако, следуя рекомендациям, представленным в этой статье, вы сможете создавать более простые и понятные директивы, раскрыв их полный потенциал.

👉 https://www.angularspace.com/directive-best-practices/

✨ Новый Resource API

Недавно был опубликовал Pull Request для нового Resource API, которое позволяет асинхронно загружать ресурсы с использованием сигналов. Типичный сценарий её использования — загрузка данных через HTTP.

В этой статье показывается, как реализовать типичный CRUD сценарий с использованием нового API.

👉 https://www.angulararchitects.io/en/blog/asynchronous-resources-with-angulars-new-resource-api/

✨ Все, что вам нужно знать об Resource API

Если присмотреться к новому API, можно заметить, что функция resource() по умолчанию использует промисы. Однако Angular всегда был ориентирован на использование Observables.

Чтобы это исправить, можно воспользоваться функцией rxResource().

👉 https://push-based.io/article/everything-you-need-to-know-about-the-resource-api

✨ linkedSignal: управлять связанным состоянием теперь ещё проще

Недавно представили еще один реактивный примитив linkedSignal.

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

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

✨ Оптимизация реактивных форм

Если вы работаете с крупными или динамическими формами, по мере усложнения их производительность может ухудшаться.

Здесь на помощь приходят стратегии оптимизации производительности, такие как ленивые и асинхронные валидаторы.

👉 https://dev.to/this-is-angular/optimizing-angular-reactive-forms-enhancing-performance-with-lazy-validation-and-async-validators-5c40

✨ Сброс или установка значения в LinkedSignal

LinkedSignal создаёт WritableSignal, что позволяет явно задавать значение или обновлять его при изменении источника.

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

👉 https://dev.to/railsstudent/reset-or-set-the-value-in-linkedsignal-in-angular-19-587h

✨ Знакомьтесь: input, output и model

Наверняка многие уже успели познакомиться с новыми функциями input(), output() и model(), которые пришли на смену @Input и @Output. Но если вы откладывали это до последнего момента.

Статья Егора Молчанова поможет вам разобраться в них, а также понять особенности computed и effect.

👉 https://habr.com/ru/companies/domclick/articles/854530/

✨ Получение данных с помощью resource и rxResource

Ранее мы упоминали, что команда Angular выпустила экспериментальные функции resource и rxResource для упрощения работы с данными. Эти функции доступны в двух вариантах: loader для resource возвращает Promise, а для rxResource — Observable.

В статье автор модернизировал свой старый проект для получения данных о покемонах, переписав его на Angular 19.0.0-next.11 и применив новые функции.

👉 https://dev.to/railsstudent/data-retrieval-with-the-experimental-resource-and-rxresource-functions-in-angular-19-fa9

✨ Зачем нам Node.js или Angular на бэкенде

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

Александр Лобанов поделился, как их команда, используя Node.js и Angular, сократила дублирование кода, ускорила разработку и добилась согласованности между клиентом и сервером.

👉 https://habr.com/ru/companies/eftech/articles/856840/

✨ Вспомогательные маршруты

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

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

👉 https://dev.to/this-is-angular/auxiliary-routes-in-angular-3gkk

✨ 5 функций, которых стоит ожидать

Angular 19 пока официально не выпущен, однако уже доступны многие детали о предстоящем релизе.

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

👉 https://dev.to/this-is-angular/angular-19-5-game-changing-features-you-need-to-know-32cd

✨ Новый экспериментальный API

Несмотря на то, что Resource и rxResource все еще находятся на стадии предварительного просмотра, они обещают существенно изменить подход к работе с данными.

В статье подробно рассматриваются их возможности и предлагаемые методы улучшения рабочего процесса.

👉 https://dev.to/this-is-angular/angular-19-streamlining-data-retrieval-with-resource-and-rxresource-apis-3lb2

✨ Магия с interceptors

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

В статье рассмотрены интересные и достаточно распространенные сценарии, в которых они могут пригодиться.

👉 https://www.angularspace.com/magic-with-interceptors/

✨ Создание кастомного rxResource

Angular приближается к выпуску 19-й версии, однако многие проекты все еще работают на старых версиях.

Поскольку в этих версиях широко используются Observables, автор решил создать аналог rxResource, основанный на RxJS, вместо сигналов.

👉 https://www.angularspace.com/creating-custom-rxresource-api-with-observables/

✨ Релиз Angular 19: Присоединяйтесь к просмотру

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

Если вы увлечены Angular, то это отличная возможность узнать о его новых возможностях, пообщаться с другими разработчиками и поделиться своим мнением. Не пропустите!

👉 https://blog.angular.dev/angular-v19-release-join-the-watch-parties-45f552d49554

✨ Представляем Angular 19

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

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

Основные моменты:

Инкрементальная гидратация — поддерживает самые требовательные к производительности сценарии.

Стабилизация ключевых реактивных примитивов и добавление новых: linkedSignal и resource.

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

Схематики, которые помогут вам быть в курсе лучших практик: inputs, outputs, queries, внедрение зависимостей на основе inject и новая система сборки.

🎉 Также поздравляем Кира с присоединением к команде Angular Core!

👉 https://blog.angular.dev/meet-angular-v19-7b29dfd05b84