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

@angular_fox

Как костыль на реактивно-лисьей тяге 🔥🦊

Нравится канал? Подпишись на меня!
👉 twitter.com/thekiba_ru
💖 twitter.com/thekiba_io
✨ medium.com/@thekiba
✨ github.com/thekiba

Чаты @angular_ru @angular_jobs

🦊 Angular Fox 🚀 (Russian)

🦊 Angular Fox 🚀 - русскоговорящие новости сообществаnnAngular Fox - это канал, где вы найдете самые свежие новости и обновления о мире Angular. Если вам нравится быть в курсе всех событий в сообществе программистов, то этот канал именно для вас! Здесь вы сможете узнать о последних тенденциях в мире разработки веб-приложений на Angular, а также получить полезные советы от опытных специалистов.

Канал также предлагает уникальную возможность подписаться на другие популярные ресурсы, связанные с миром программирования, такие как twitter.com/thekiba_ru, twitter.com/thekiba_io, medium.com/@thekiba и github.com/thekiba. Таким образом, вы сможете расширить свои знания и навыки в сфере IT и всегда оставаться в курсе последних новостей.

Не забывайте также присоединиться к чатам @angular_ru и @angular_jobs, где вы сможете общаться со своими единомышленниками, делиться опытом и находить ответы на ваши вопросы. Присоединяйтесь к Angular Fox и будьте всегда в курсе всех событий в мире разработки веб-приложений на Angular!

10 Jan, 09:04

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

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

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

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

1,381

09 Jan, 09:02

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

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

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

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

1,491

08 Jan, 09:08

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

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

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

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

1,520

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/

1,724

06 Jan, 09:01

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

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

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

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

1,773

03 Jan, 09:00

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

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

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

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

2,454

02 Jan, 09:11

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

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

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

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

2,231

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,217

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/

1,905

30 Dec, 09:08

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

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

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

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

2,171

27 Dec, 09:00

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

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

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

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

2,925

26 Dec, 09:02

✨ State of JS 2024

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

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

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

2,551

25 Dec, 09:10

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

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

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

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

2,601

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