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

✨ Все, что вы хотели знать про иерархию инжекторов в Angular Dependency Injection (DI) — это мощный инструмент, который упрощает работу с зависимостями. Однако часто мы не используем его в полной мере, потому что не до конца понимаем его работу. Дмитрий Дробышев подробно объяснил, как функционирует DI, что собой представляет иерархия инжекторов и какие изменения внесла 14-я версия Angular с появлением standalone компонентов. 👉 https://habr.com/ru/companies/zyfra/articles/817843/

✨ TypeScript в Node.js На днях в Node.js появилась возможность выполнять файлы TypeScript, установив экспериментальный флаг --experimental-strip-types. Для этого используется SWC, который уже применяется в Deno. Node.js транспилирует код TypeScript в JavaScript, при этом проверка типов не выполняется, а типы отбрасываются. Это означает, что использование Enum, namespaces и т.д. будет невозможно. 👉 https://github.com/nodejs/node/pull/53725

✨ Выбор JavaScript фреймворка Начинающим разработчикам бывает сложно выбрать подходящий фреймворк для изучения. Екатерина поделилась своим мнением и постаралась разобраться в особенностях каждого из популярных фреймворков, чтобы помочь тем, кто только погружается в мир фронтенда. 👉 https://habr.com/ru/articles/831726/

✨ Улучшаем тесты на Angular Testing Library В последней версии библиотеки Angular Testing Library (v17.1.0) появилось новое API on, которое позволяет легче тестировать компоненты. В небольшой заметке рассказывается, как его можно использовать и почему оно является лучшей альтернативой существующим API componentOutputs и componentProperties. 👉 https://timdeschryver.dev/blog/the-new-on-property-improves-output-testing-in-angular-testing-library

✨ Тестирование компонентов Тестировать компоненты Angular легко, но всё усложняется, когда в процесс вовлекаются такие зависимости, как внешние библиотеки и дочерние компоненты. Сегодня мы узнаем, как тестировать компоненты и справляться с подобными ситуациями. 👉 https://www.danywalls.com/testing-components-in-angular-noerrorsschema-stub-components-and-ngmocks

✨ Пользовательская проверка равенства в toSignal Сигналы поддерживали функцию equal, когда Angular 16 только появился. Теперь эта опция доступна в toSignal, и её можно использовать для повышения производительности. 👉 https://dev.to/railsstudent/explain-tosignal-custom-equality-checking-in-angular-18-g2i

✨ Бесплатная книга по TypeScript Total TypeScript: Essentials — книга, которая проведет вас по пути от новичка до уверенного пользователя. Она охватывая большое количество тем, начиная с установки и заканчивая продвинутой работой с типами и реальными паттернами разработки. 👉 https://www.totaltypescript.com/books/total-typescript-essentials/kickstart-your-typescript-setup

✨ Будущее поддержки Material в Angular Недавно было объявлено об изменениях в Material Web Components (MWC) от Google. Поскольку Angular Material не использует MWC и не зависит от него, эти изменения на него не повлияют, и он продолжит активно поддерживаться и развиваться. Пользуясь случаем, команда Angular решила рассказать о том, как они разрабатывают Angular Material. 👉 https://blog.angular.dev/the-future-of-material-support-in-angular-7fa0662ecc4b

✨ Как создать бесшовную текстуру Бесшовный шум используется в графике для получения естественных и реалистичных текстур и эффектов. Виталий Дуденко рассказал, как создавал бесшовную текстуру для фона страницы с определённым узором. 👉 https://habr.com/ru/companies/pgk/articles/829678/

✨ Web components как альтернатива iframe Web components — это набор стандартов, который позволяет создавать пользовательские HTML-элементы. В Angular поставляется пакет @angular/elements для работы с ними, что делает их использование простым и удобным. Сергей Глазырин поделился подходом к интеграции формы регистрации в лендинг на CMS с помощью web components. 👉 https://habr.com/ru/companies/tbank/articles/828940/

✨ Погрузитесь в генеративное искусство Если вы пропустили сессию Google I/O, посвященную Angular, то упустили не только последние обновления фреймворка, но и демонстрацию Generative Art Gallery, в которой были объединены AI, Angular и WebXR. Однако, не стоит расстраиваться, потому что вы можете попробовать код на GitHub. Надеемся, он вдохновит вас на создание собственных проектов. 👉 https://blog.angular.dev/immerse-yourself-in-generative-art-an-angular-webxr-adventure-bd83bcd037d6

✨ Создание локального AI-чатбота Команда Chrome работает над тем, чтобы внедрить небольшой LLM в браузере для выполнения простых задач без необходимости использования внешнего API. Узнайте, как создать чат-приложение с помощью Angular и запустить Gemini Nano, используя всего несколько строк кода. 👉 https://www.danywalls.com/building-a-local-ai-chatbot-with-gemini-nano-chrome-canary-angular-and-kendo-ai-prompt

✨ RxJS: switchMap, concatMap, mergeMap, exhaustMap RxJS предлагает широкий спектр возможностей для управления потоками данных. Сегодня мы углубимся в концепцию high-order observables. Иван Черняков подробно объяснил этот подход, дополнив рассказ примерами из реальной жизни. 👉 https://www.youtube.com/watch?v=O8Pr47VyfDQ

✨ Знакомство с @let в Angular Синтаксис шаблонов Angular поддерживает сложные выражения JavaScript, но до сих пор не было удобного способа хранить результат выражения и при этом повторно использовать его в шаблоне. Команда Angular расширила синтаксис, чтобы предоставить разработчикам более удобный способ определения переменных в шаблонах компонентов. @let позволит определять переменную и повторно использовать ее значение во всем шаблоне. 👉 https://blog.angular.dev/introducing-let-in-angular-686f9f383f0f

✨ Angular SSR — Platform Provider паттерн При SSR можно столкнуться с проблемой, когда некоторым сервисам нужны специфические для браузера API. Узнайте, как паттерн Platform Provider может сделать ваш код более лаконичным, когда сервисы требуют различных реализаций. 👉 https://www.ngserve.io/angular-ssr-creating-server-and-client-side-service/

✨ Отслеживаем размер сборки Каждая импортируемая функция из библиотеки может значительно увеличить размер вашего проекта, что встречается довольно часто. В статье описывается использование BundleMon — инструмента для мониторинга размера пакета. В качестве альтернативы можно рассмотреть Size Limit. 👉 https://angular.love/en/track-your-bundle-size-with-bundlemon

✨ Docker для Angular-приложений Docker — это инструмент виртуализации на уровне операционной системы, который создает изолированное окружение для запуска приложений. Артём разобрал базовые вопросы, связанные с развертыванием Angular-приложений в контейнерах. 👉 https://habr.com/ru/companies/yadro/articles/826628/

✨ Анонс альфа версии xstate-ngx Xstate-ngx — это попытка интеграции XState с Angular, представляющая собой тонкую обертку для использования механизма инъекции зависимостей и сигналов. Альфа-релиз призван собрать отзывы о дизайне API. Ваш вклад очень важен для формирования будущего проекта. 👉 https://dev.to/angular/announcing-the-alpha-release-of-xstate-ngx-9lk

✨ Работа с событиями на стероидах Если вы задавались вопросами: как Angular работает с событиями? Что происходит, когда вы пишете (click) в шаблоне? Александр Инкин заглянул в исходный код и рассказал о малоизвестном публичном API и о том, как с его помощью можно создавать собственные плагины, которые позволят писать декларативные утверждения для типовых ситуаций. 👉 https://habr.com/ru/companies/tbank/articles/826724/

✨ Что нового в Angular 18? Если вы пропустили релиз Angular 18 в мае, то в нем впервые появился официальный способ работы без Zone.js, только в экспериментальном режиме, о котором мы уже писали. Кроме того, есть несколько действительно приятных улучшений в существующих API. В этой статье рассказывается о новых возможностях. 👉 https://www.angulararchitects.io/en/blog/whats-new-in-angular-18/