✨ Магия Injection Context

Благодаря возможности вызывать функцию inject() на любом уровне вложенности внутри Injection Context можно легко создавать универсальные и гибкие утилиты.

Святослав Зайцев показал, как раскрыть потенциал этой функции.

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

✨ Берем чужие сайты под свой контроль

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

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

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

✨ Продвинутая регистрация multi-сервисов

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

В этой статье рассмотрен оригинальный подход к регистрации multi-сервисов.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

✨ Angular 19 и ZoneLess

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

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

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

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

Независимо от того, используете ли вы 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

✨ NG-BE 2024

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

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

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

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

✨ Анонс NgRx 19

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

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

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

✨ Использование 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/