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

14 Feb, 09:06

✨ Что такое LinkedSignal и как его использовать

Angular 19 представил функцию LinkedSignal — расширение стандартного computed, которое позволяет не только вычислять значения, но и изменять их.

Интересно, как это может упростить управление состоянием в ваших проектах?

В статье рассмотрены практические примеры использования LinkedSignal: от подсчета элементов массива до динамического управления состоянием компонентов, таких как аккордеоны и выпадающие списки.

👉 https://angular.love/what-linkedsignal-is-and-how-to-use-it

1,075

13 Feb, 09:01

✨ Улучшение шаблонов Angular с помощью нетегированных шаблонных литералов

В версии 19.2.0-next.0 ввели поддержку шаблонных литералов, сделав шаблоны выразительнее.

Динамический контент, вычисляемые классы, сложные интерполяции, пайпы и даже генерация URL стали проще: теперь можно напрямую встраивать переменные в строку.

👉 https://medium.com/p/0baa5b4f8371

1,342

12 Feb, 09:00

✨ Микрофронтенды с Angular и Native Federation

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

Микрофронтенды — секретное оружие enterprise-проектов. Они позволяют разбить монолит на автономные части, которые можно тестировать, деплоить и масштабировать независимо. Но Angular не поддерживает их из коробки. И тут на сцену выходит Native Federation.

👉 https://blog.angular.dev/micro-frontends-with-angular-and-native-federation-7623cfc5f413

1,459

11 Feb, 09:02

✨ Исследуем режимы рендеринга маршрутов

Раньше мы вынуждены были выбирать: либо SSR для всего приложения, либо никак. Но что, если часть страниц приватные, а часть — публичные?

Теперь для каждого маршрута можно выбрать оптимальный режим — клиентский (CSR), серверный (SSR) или статическую генерацию (SSG).

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

👉 https://dev.to/this-is-angular/exploring-routes-rendering-modes-in-angular-bjg

1,688

10 Feb, 09:03

✨ Загрузка ресурсов

Мы уверены, что большинство уже знакомы с функцией resource().

Если же вы все еще сомневаетесь, попробуйте новый подход. Он упрощает работу с асинхронными данными в коде на основе сигналов.

Важно: Код, представленный в статье, носит исключительно демонстрационный характер и требует доработки.

👉 https://www.angularspace.com/loading-angular-resources-on-demand-a-progressive-guide-to-dynamic-data-fetching/

1,645

07 Feb, 09:01

✨ Миграция на строгий TypeScript

Знакомая ситуация: проект на TypeScript, а strict режим включить страшно? В крупных проектах часто сталкиваются с той же проблемой — годы разработки, море any типов и никаких проверок на null.

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

👉 https://habr.com/ru/companies/selectel/articles/879980/

2,165

06 Feb, 09:05

✨ Как утекает память, если забыть отписаться от Observable

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

Всего одна забытая подписка на Observable может привести к утечке памяти.

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

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

2,205

05 Feb, 09:05

🚀 Документалка об Angular

Канал Honeypot, известный документальными историями о технологиях, представил новый фильм о невероятной истории Angular — фреймворке, который начинался как эксперимент внутри Google и прошел путь от непризнания до мировой популярности.

Вы увидите, как ошибки, инновации и упорство превратили Angular в современный гигант.

👉 https://youtu.be/cRC9DlH45lA

2,353

04 Feb, 09:03

✨ Улучшите пользовательский опыт вашего приложения с помощью (rx)resource

Представьте: пользователи больше не видят белый экран при загрузке, ошибки не остаются незамеченными, а данные всегда актуальны. Все это возможно с новым resource API в Angular 19.

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

👉 https://timdeschryver.dev/blog/improve-the-user-experience-of-your-application-using-rxresource

2,045

03 Feb, 09:04

✨ Внутри процесса архитектурного аудита

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

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

👉 https://www.angulararchitects.io/en/blog/inside-the-architecture-review-process-a-consultants-guide-to-better-software/

2,072

31 Jan, 09:08

✨ «Я делаю рефакторинг ежечасно» или как за пять минут улучшить приложение

Рефакторинг — это не про гигантские правки, а про микрошаги, которые делают ваш код чище, быстрее и устойчивее к ошибкам.

Хотите узнать, как избавиться от спагетти-кода и не выгореть?

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

А чтобы углубить свои знания, рекомендуем книгу Мартина Фаулера «Рефакторинг кода на JavaScript».

👉 https://habr.com/ru/companies/cloud_ru/articles/877762/

2,526

30 Jan, 09:04

✨ Миграция крупного Angular-приложения на Standalone

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

Армен Варданян доказал — ДА! Его HR-система с 1000+ компонентов и множеством зависимостей теперь работает в разы быстрее и чище. И все это — всего за несколько часов.

Не верите, что такое возможно? Читайте статью и убедитесь сами: ваш проект тоже заслуживает апгрейда.

👉 https://www.angularspace.com/migrating-a-large-angular-application-to-standalone/

2,443

29 Jan, 09:04

✨ Введение в фикстуры Playwright

Устали от тонн моков и бесконечного дублирования в тестах? Знаете, что может сократить ваш код и сэкономить часы работы?

Фикстуры в Playwright — ваш секретный инструмент для чистых и эффективных тестов!

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

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

2,359

28 Jan, 09:04

✨ Создание пользовательских операторов RxJs

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

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

👉 https://www.angularspace.com/create-custom-rxjs-operators/

2,411

27 Jan, 09:01

✨ TypeScript 5.8: erasableSyntaxOnly флаг

В следующем релизе TypeScript, вероятно, появится новый флаг, который будет запрещать конструкции, которые не являются "стираемыми" (erasable), такие как перечисления (enums), пространства имен (namespaces) и т.д.

Это новшество может быть связано с тем, что в Node.js 23.6.0 недавно появилась поддержка TypeScript, которая не поддерживает такие конструкции.

👉 https://www.totaltypescript.com/erasable-syntax-only

2,470

24 Jan, 09:02

✨ Гибкость и контроль над данными: применение моков в разработке

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

Для решения этой проблемы в статье предлагается использовать MSW (Mock Service Worker), который позволяет реализовать работу с HTTP API и WebSocket прямо внутри приложения.

👉 https://habr.com/ru/companies/ntechlab/articles/869790/

2,854

23 Jan, 09:01

✨ Улучшаем производительность с помощью NgOptimizedImage

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

Это напрямую влияет на метрики:

Largest Contentful Paint (LCP) — время, за которое загружается самый крупный контент, например, баннер. Высокий LCP ухудшает SEO и раздражает пользователей.

First Contentful Paint (FCP) — момент появления первого элемента на экране. Медленный FCP создает ощущение "зависания" сайта.

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

👉 https://www.angularspace.com/boost-your-apps-performance-with-ngoptimizedimage

2,710

22 Jan, 09:04

✨ Сохранение состояния компонента при переходе по маршруту

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

Статья рассказывает о применении RouteReuseStrategy для сохранения состояния компонентов.

👉 https://dev.to/this-is-angular/angular-lab-preserving-component-state-across-route-transitions-3f7j

2,511

21 Jan, 09:03

✨ Рецепты Typescript: выбор одного и только одного обязательного поля в объекте

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

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

Для разминки предлагаем подумать: как можно применить такой тип и при этом не нарушить лучшие практики?

👉 https://habr.com/ru/companies/cloud_ru/articles/868762/

2,389

20 Jan, 09:02

✨ От налогового инспектора до ведущего инженера-программиста

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

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

👉 https://www.angularspace.com/from-a-tax-officer-to-a-lead-software-engineer/

2,535

17 Jan, 09:03

✨ Как создавать промпты для AI

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

Никита Борисов предложил структурированный подход к созданию промптов, который включает: объяснение контекста проекта, определение роли и ответственности AI, установку четких критериев успеха, обозначение технических ограничений.

👉 https://vc.ru/ai/1759281-kak-sozdavat-prompty-dlya-ai-kotorye-vydayut-zhelaemyi-rezultat

2,830

16 Jan, 09:02

✨ Динамическая инициализация сервисов

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

В статье представлен подход к динамическому созданию сервисов в Angular на примере приложения для отправки денег. Полный исходный код примера доступен на GitHub.

👉 https://www.angularspace.com/dynamic-service-instantiation-in-angular-2/

2,845

15 Jan, 09:07

✨ Визуализатор RxJS за 4 часа с помощью нейросети

Современные нейросети способны радикально оптимизировать рабочие процессы и снизить потребность в крупных командах.

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

С нетерпением ждем новых прорывов в сфере ИИ, а попробовать приложение можно здесь.

👉 https://www.angularspace.com/built-rxjs-visualizer-in-4-hours-with-ai-no-coding/

1,908

14 Jan, 09:12

✨ Стратегия развития Angular в 2025 году

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

В 2025 году в центре внимания окажутся:

Переход на Zoneless: повышение эффективности обнаружения изменений и ускорение загрузки приложений.

Формы на основе сигналов: улучшение масштабируемости, типизации и унификации работы с формами.

Замена Karma: внедрение современного инструмента для тестирования.

👉 https://blog.angular.dev/angular-2025-strategy-9ca333dfc334

1,992

13 Jan, 09:07

✨ Новые миграции для Signal Input

Signal inputs готовы к продакшену, и команда Angular представила новые инструменты миграции, которые помогут вам обновиться на новое API с использованием сигналов.

Больше информации можно найти в документации на angular.dev.

👉 https://blog.angular.dev/try-out-the-new-signal-input-migrations-80783969ac9d

1,881

10 Jan, 09:04

✨ Как Angular синхронизирует UI

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

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

👉 https://www.angularspace.com/how-angular-keeps-your-ui-in-sync/

2,548

09 Jan, 09:02

✨ Performance и оптимизация TypeScript

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

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

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

2,388

08 Jan, 09:08

✨ Реактивное программирование в Angular

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

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

👉 https://www.angularspace.com/reactive-programming-in-angular-101/

2,179

07 Jan, 09:00

✨ Nx и Angular с Rspack и Module Federation

С выпуском @ng-rsbuild/plugin-nx, созданного участником команды Nx, теперь появилась возможность собирать Angular-приложения с использованием rsbuild в рамках Nx.

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

👉 https://www.angulararchitects.io/en/blog/nx-with-rspack-and-module-federation/

2,108

06 Jan, 09:01

✨ Type-level программирование в TypeScript

Основная идея type-level программирования — перенести часть логики в систему типов, используя такие механизмы, как Conditional Types, Mapped Types, Template Literal Types и т.д.

Статья раскрывает, как использовать возможности TypeScript для решения задач на этапе компиляции, опираясь на систему типов.

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

2,159

03 Jan, 09:00

✨ Прототип форм на основе сигналов

Формы являются центральной частью многих Angular приложений, и официальное решение на основе сигналов с нетерпением ожидается сообществом.

Эта директория содержит прототип кода, демонстрирующего, как может выглядеть и работать будущая версия Angular Forms.

👉 https://github.com/angular/angular/tree/prototype/signal-forms/packages/forms/experimental

2,898

02 Jan, 09:11

✨ Что такое реактивное программирование?

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

Эта статья станет вашим первым шагом в мир реактивного программирования, предоставляя понятное и доступное введение для начинающих.

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

2,766

01 Jan, 09:11

✨ Создание приложения для перевода

Перевод контента в интернете традиционно требует использования серверной инфраструктуры. Однако с недавнего времени в Chrome стала доступна локальная языковая модель (LLM), которая позволяет использовать Translator API.

Это открывает возможность создавать приложения для перевода без настройки серверной части и дополнительных затрат на использование LLM.

👉 https://dev.to/railsstudent/build-a-translation-app-with-chrome-built-in-ai-in-angular-5636

2,637

31 Dec, 09:06

✨ 5 CSS-сниппетов, которые должен знать каждый front-end разработчик в 2024 году

Если вы пропустили все последние новшества в CSS, то самое время наверстать упущенное.

В статье представлены пять мощных CSS-инструментов, которые уже доступны для использования.

👉 https://www.angularspace.com/5-css-snippets-every-front-end-developer-should-know-in-2024/

2,361

30 Dec, 09:08

✨ Интеграция CSS-фреймворков в Angular

При интеграции CSS-фреймворков в Angular могут возникнуть трудности, связанные с инкапсуляцией стилей, динамическим изменением классов и использованием JavaScript-компонентов.

Статья подробно объясняет причины этих сложностей и дает рекомендации, как правильно интегрировать CSS-фреймворки в Angular.

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

2,469

27 Dec, 09:00

✨ Новый стиль написания кода

Если вы интересуетесь современными подходами к разработке на Angular.

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

👉 https://angularexperts.io/blog/new-angular-coding-style

3,393

26 Dec, 09:02

✨ State of JS 2024

State of JS был создан для выявления новых тенденций в экосистеме веба, чтобы помочь разработчикам принимать технологические решения.

В этом году он проводился с 13 ноября по 10 декабря и собрал 14015 ответов.

👉 https://2024.stateofjs.com/en-US/

2,942

25 Dec, 09:10

✨ Основные способы взаимодействия компонентов

В Angular существует множество методов взаимодействия между компонентами.

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

👉 https://www.angularspace.com/mastering-component-communication-in-angular/

2,848

24 Dec, 09:04

✨ Использование Resource API с NgRx SignalStore

В новом релизе NgRx представил функцию withProps, которая позволяет добавлять произвольные свойства в стор.

Эта статья показывает, как использовать withProps для работы с Resource API внутри SignalStore.

👉 https://www.angulararchitects.io/en/blog/using-the-resource-api-with-the-ngrx-signal-store/

2,380

23 Dec, 09:04

✨ Анонс NgRx 19

Библиотека NgRx Signals, впервые представленная в версии 18, была разработана с нуля на основе Angular Signals.

В этом выпуске она получила обновления и улучшения, направленные на повышение удобства работы разработчиков. Полный список изменений доступен в репозитории на GitHub.

👉 https://dev.to/ngrx/announcing-ngrx-19-ngrx-signals-features-action-signals-and-more-2b35

2,496

20 Dec, 09:00

✨ NG-BE 2024

Недавно прошла конференция NG-BE в Бельгии, и все записи теперь доступны онлайн.

В основном докладе Минко Гечев (Minko Gechev) поделился достижениями Angular за последние несколько лет и заглянул в будущее фреймворка.

Также прозвучали доклады о производительности, формах, архитектуре, TypeScript и многом другом.

👉 https://youtube.com/playlist?list=PL9pV_RwZceNg6bl_hBEgGevOP-QvLXHRt

2,987

19 Dec, 09:02

✨ Рецепты TypeScript: простое тестирование типов

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

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

👉 https://habr.com/ru/companies/cloud_ru/articles/865118/

2,878

18 Dec, 09:00

✨ Хост директивы: ключ к декомпозиции

Хотя Directive Composition API появилось ещё в Angular 15, и мы о нём уже писали ранее, оно до сих пор не привлекло должного внимания.

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

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

2,679

17 Dec, 09:11

✨ Последние разработки в механизме обнаружения изменений

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

В Angular этот вопрос особенно спорный, в основном из-за «магической» природы Zone.js. В последнее время в этой области произошли значительные обновления, особенно с появлением сигналов и возможностью отказаться от использования Zone.js.

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

👉 https://angular.love/the-latest-in-angular-change-detection-zoneless-signals

2,624

16 Dec, 09:00

✨ Паттерн Фасад в Angular

Фасад (Facade) — это структурный шаблон проектирования, который предоставляет упрощенный интерфейс к сложной подсистеме или набору подсистем. При этом фасад не инкапсулирует функциональность сам по себе, а делегирует выполнение задач соответствующим классам, избавляя клиента от лишней сложности.

В Angular паттерн Фасад реализуется через создание сервиса (фасада), который взаимодействует с различными другими сервисами или логикой управления состоянием. Этот сервис служит единой точкой взаимодействия для компонентов, предоставляя простой и чистый API, который скрывает все сложности системы.

👉 https://angular.love/angular-facade-pattern

2,535

13 Dec, 09:03

✨ Продвинутые операторы RxJS

Поскольку RxJS остается важным инструментом в Angular и включает огромное количество операторов.

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

👉 https://www.angularspace.com/advanced-rxjs-operators-you-know-but-not-well-enough-pt-2/

2,934

12 Dec, 09:07

✨ Создание Angular-приложения для разных групп пользователей

При разработке многопользовательского приложения, например, интернет-магазина с публичной и административной частями, критически важно уделить внимание: безопасности, поддерживаемости кода и эффективности разработки.

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

👉 https://timdeschryver.dev/blog/creating-an-angular-application-thats-used-by-different-user-groups

2,989

11 Dec, 09:07

✨ Шпаргалка по Signals

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

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

👉 https://medium.com/p/89d3dbac79a1

2,721

10 Dec, 09:01

✨ Закладки, к которым ты никогда не вернешься

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

В статье исследуется цифровое накопительство и предложено креативное решение: автоматическое удаление закладок через определенный период.

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

2,550

09 Dec, 09:04

✨ Недостающий ингредиент для покрытия кода шаблонов

Независимо от того, используете ли вы Karma, Jest или Vitest, вероятно, вы используете компиляцию Just-In-Time (JIT) для своих тестов, поскольку до недавнего времени это был единственный доступный вариант.

Хорошая новость заключается в том, что теперь вы можете включить компиляцию Ahead-Of-Time (AOT) для тестов, чтобы получить более точное покрытие кода шаблонов и ускорить их выполнение. Пока эта возможность доступна только для Vitest, но, возможно, в скором времени она появится в Karma и Jest.

👉 https://marmicode.io/blog/angular-template-code-coverage-and-future-proof-testing

2,564

06 Dec, 09:09

✨ Angular 19 и ZoneLess

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

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

👉 https://danywalls.com/angular-19-and-zoneless

2,902

05 Dec, 09:09

✨ Самая сложная директива Taiga UI

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

Александр Инкин представил директиву ActiveZone, которая используется в библиотеке компонентов Taiga UI.

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

2,885

04 Dec, 09:01

✨ Рецепты TypeScript: перевод ключей объекта в camelCase

Работа с данными из API часто требует преобразования форматов. Одна из распространённых задач — перевод ключей объектов из snake_case, используемого на бэкенде, в camelCase, привычный для фронтенда.

Константин Логиновских показал, как преобразовать тип объекта в TypeScript так, чтобы все ключи преобразовывались из snake_case в camelCase.

👉 https://habr.com/ru/companies/cloud_ru/articles/860778/

2,707

03 Dec, 09:03

✨ Динамические формы в Angular 19

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

В статье представлен практический подход к реализации динамических форм с использованием standalone компонентов.

👉 https://dev.to/this-is-angular/dynamic-forms-in-angular-creating-flexible-and-scalable-user-interfaces-2hob

2,566

02 Dec, 09:00

✨ Angular 19: Скрытые жемчужины обновления

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

Сегодня рассмотрим полезные дополнения в Angular 19, которые могли остаться незамеченными за последние недели.

👉 https://www.angularspace.com/angular-v19-no-signals-edition/

2,537

21 Nov, 09:02

✨ Все о Resource API

Вчерашний релиз Angular вызвал вопросы о новом Resource API и способах миграции на него.

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

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

👉 https://www.angularspace.com/everything-you-need-to-know-abour-resource-for-now/

1,168

20 Nov, 09:02

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

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

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

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

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

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

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

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

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

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

1,441

19 Nov, 09:00

Привет!

Мы знаем, что вы до сих пор спите и видите сны на TypeScript! 🌟
Мы прекрасно знаем, как вы любите Angular. Сейчас ещё есть возможность зарегистрироваться на Angular Meetup #23.

Мы будем обсуждать текущее состояние Angular и что нас ждет. Узнаем, сколько версий фреймворка нужно пропустить, чтобы считать свой проект устаревшим. 👩‍💻

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

✅ Если ты с нами
1️⃣ Регистрируйся здесь
2️⃣ Добавляй напоминание в календарь
3️⃣ Поделись этим сообщением с друзьями - чем больше нас будет, тем веселее!

Если не получится прийти на митап, можно посмотреть трансляцию онлайн.

1,583

18 Nov, 09:00

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

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

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

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

1,739

15 Nov, 09:00

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

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

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

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

2,200

14 Nov, 09:01

✨ Магия с interceptors

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

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

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

2,237

13 Nov, 09:04

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

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

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

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

2,109

12 Nov, 09:00

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

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

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

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

2,171

11 Nov, 09:02

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

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

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

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

2,184

08 Nov, 09:02

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

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

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

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

2,584

07 Nov, 09:01

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

2,440

06 Nov, 09:01

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

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

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

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

2,150

05 Nov, 09:00

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

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

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

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

2,343

04 Nov, 09:01

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

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

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

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

2,472

01 Nov, 09:00

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

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

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

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

2,795

31 Oct, 09:01

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

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

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

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

2,715

30 Oct, 09:01

✨ Новый Resource API

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

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

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

2,633

29 Oct, 09:01

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

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

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

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

2,586

28 Oct, 09:00

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

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

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

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

2,593

25 Oct, 09:01

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

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

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

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

3,058

24 Oct, 09:00

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

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

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

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

2,881

23 Oct, 09:01

✨ Angular Incremental Hydration

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

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

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

2,526

22 Oct, 09:00

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

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

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

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

2,471

21 Oct, 09:02

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

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

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

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

2,414

18 Oct, 09:00

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

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

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

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

2,924

17 Oct, 09:00

✨ Анонс TypeScript 5.7 Beta

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

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

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

2,856

16 Oct, 09:02

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

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

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

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

2,692

15 Oct, 09:01

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

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

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

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

2,440

14 Oct, 09:02

✨ Последние обновления effect()

Благодаря обратной связи о effect() во время его предварительного тестирования, команда Angular выявила несколько улучшений в дизайне, которые решают проблемы как с функциональностью, так и с опытом разработки.

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

👉 https://blog.angular.dev/latest-updates-to-effect-in-angular-f2d2648defcd

2,407

11 Oct, 09:01

✨ Создание директивы видимости элемента

В статье автор рассказывает, как создать директиву в Angular с использованием API IntersectionObserver.

Эта директива отслеживает видимость элемента на экране и реагирует на его появление или исчезновение.

👉 https://dev.to/this-is-angular/angular-lab-lets-create-a-visibility-directive-5dpp

2,775

10 Oct, 09:00

✨ Кастомные валидаторы

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

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

👉 https://dev.to/this-is-angular/custom-validators-with-controlvalueaccessor-in-angular-ensuring-robust-form-validations-4jgj

2,861

09 Oct, 09:00

✨ Дерево иерархии типов

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

Эта статья — попытка проанализировать систему типов и выстроить правильную ментальную модель.

👉 https://www.zhenghao.io/posts/type-hierarchy-tree

2,629

08 Oct, 09:01

✨ 18 вопросов для собеседования

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

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

👉 https://www.angularspace.com/18-interview-questions-answered-by-angular-experts-live-post/

2,598

07 Oct, 09:01

✨ Эффективное использование фикстур в Playwright

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

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

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

2,444

04 Oct, 09:00

✨ Angular's effect(): Use Cases & Enforced Asynchrony

Сигналы разработаны с акцентом на простоту и предлагают три основные функции: signal() для создания сигналов, computed() для вычисляемых сигналов и effect() для обработки побочных эффектов.

Последний, effect(), выделяется и вызывает множество споров. Многие предлагают вообще избегать его, а некоторые даже говорят, что его не должно быть.

В статье приводятся аргументы в пользу effect() и рассматриваются возможные сценарии его использования.

👉 https://dev.to/this-is-angular/angulars-effect-use-cases-enforced-asynchrony-4hb

2,841

03 Oct, 09:00

✨ Angular Roadmap

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

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

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

2,717

02 Oct, 09:00

✨ Angular Signals Implementation

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

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

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

2,635

01 Oct, 09:01

✨ Создание пагинации с помощью Firebase и NgRx SignalStore

Если вы искали простое приложение, которое бы сочетало сигналы, NgRx и Firebase.

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

👉 https://www.angularspace.com/create-pagination-using-firebase-and-ngrx-signalstore/

2,594

30 Sep, 09:01

✨ Использование Storybook с Angular и Vite

Storybook — это отличный инструмент для изолированной разработки и итерации компонентов перед их интеграцией в приложение.

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

👉 https://dev.to/brandontroberts/using-storybook-with-angular-and-vite-48ga

2,521

27 Sep, 09:07

✨ Host directives: декомпозиция освобождена!

В Angular 15 появилась потрясающая возможность, которую часто упускают из виду — Directive Composition API. Она добавляет новое свойство в декораторы Directive/Component под названием hostDirectives.

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

Александр Инкин подробно объяснил, насколько эта возможность невероятно мощна.

👉 https://www.angularspace.com/host-directives-decomposition-unleashed/

2,829

26 Sep, 09:01

✨ Angular для всех: как адаптировать приложения для людей с ограниченными возможностями

Согласно отчету WebAIM (Web Accessibility In Mind) за 2023 год, 96,3% сайтов не соответствуют основным требованиям, необходимым для того, чтобы люди с ограниченными возможностями могли полноценно пользоваться ими.

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

👉 https://angular.love/angular-for-everyone-how-to-adapt-applications-for-people-with-disabilities

2,752

25 Sep, 09:34

✨ Определяем неиспользуемые импорты

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

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

👉 https://netbasal.com/optimize-angular-apps-with-unused-standalone-imports-diagnostic-in-v19-f2e50220c302

2,413

24 Sep, 09:02

✨ Типы или интерфейсы в TypeScript: что и когда использовать?

При работе с TypeScript многие из нас рано или поздно сталкиваются с вопросом: что выбрать — типы или интерфейсы?

Дмитрий Бердников поделится особенностями их работы, которые помогут сделать правильный выбор.

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

2,534

23 Sep, 09:02

✨ Увлекательное внедрение зависимостей

Dependency Injection — мощный, но недостаточно используемый инструмент. Он позволяет повторно использовать различные ресурсы, получать доступ к встроенным механизмам, таким как HttpClient, извлекать данные из маршрутизации и многое другое.

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

👉 https://www.angularspace.com/fascinating-dependency-injection/?ref=angular-space-all-in-one-newsletter

2,569

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

🦊 Angular Fox 🚀 (Russian)

3,910

1,132

7

Best Similar Channel

Random Similar Channel