🦊 Angular Fox 🚀 — русскогорящие новости сообщества

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

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

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

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

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

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

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

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

✨ Получение данных с помощью 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

✨ Новый Resource API

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

✨ Angular Incremental Hydration

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

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

👉 https://dev.to/this-is-angular/keep-hydrated-with-angular-incremental-hydration-2apa

✨ Chrome расширение на Angular 18

Иногда возникает желание изменить функционал стороннего сайта или подкорректировать его дизайн.

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

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

✨ Как использовать менеджер состояний NgRx для Angular-проектов

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

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

👉 https://habr.com/ru/companies/simbirsoft/articles/851362/

✨ Разные точки зрения при работе с Angular

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

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

👉 https://www.angularspace.com/angular-friction-points/

✨ Анонс TypeScript 5.7 Beta

Недавно вышла бета-версия TypeScript 5.7, и среди нововведений можно выделить следующие:

- Проверки для переменных, которые никогда не инициализировались.
- Перезапись путей для относительных путей.
- Поддержка --target es2024 и --lib es2024.

👉 https://devblogs.microsoft.com/typescript/announcing-typescript-5-7-beta/

✨ Maskito: то, что вы давно искали

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

Александр Инкин рассказал, почему Maskito заслуживает вашего внимания.

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

✨ Анимация списков

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

Давайте рассмотрим, как она работает на примере анимаций списков.

👉 https://dev.to/this-is-angular/angular-lab-animating-lists-and-using-animationbuilder-for-imperative-animations-1e9j