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

✨ Анонс TypeScript 5.7 Beta Недавно вышла бета-версия TypeScript 5.7, и среди нововведений можно выделить следующие: - Проверки для переменных, которые никогда не инициализировались. - Перезапись путей для относительных путей. - Поддержка --target es2024 и --lib es2024. 👉 https://devblogs.microsoft.com/typescript/announcing-typescript-5-7-beta/

✨ Maskito: то, что вы давно искали Существует множество случаев, когда пользовательский ввод необходимо форматировать на лету, например, при вводе номера кредитной карты, телефона, даты рождения и т.д. Александр Инкин рассказал, почему Maskito заслуживает вашего внимания. 👉 https://habr.com/ru/companies/tbank/articles/850790/

✨ Анимация списков Angular включает в себя сложную систему анимации, которая особенно полезна для элементов при их появлении или исчезновении на экране. Давайте рассмотрим, как она работает на примере анимаций списков. 👉 https://dev.to/this-is-angular/angular-lab-animating-lists-and-using-animationbuilder-for-imperative-animations-1e9j

✨ Последние обновления effect() Благодаря обратной связи о effect() во время его предварительного тестирования, команда Angular выявила несколько улучшений в дизайне, которые решают проблемы как с функциональностью, так и с опытом разработки. В целом, большинство применений API эффектов будут работать так, как и ожидалось, но есть несколько вариантов использования, о которых следует помнить. 👉 https://blog.angular.dev/latest-updates-to-effect-in-angular-f2d2648defcd

✨ Создание директивы видимости элемента В статье автор рассказывает, как создать директиву в Angular с использованием API IntersectionObserver. Эта директива отслеживает видимость элемента на экране и реагирует на его появление или исчезновение. 👉 https://dev.to/this-is-angular/angular-lab-lets-create-a-visibility-directive-5dpp

✨ Кастомные валидаторы Реактивные формы предлагают надежный способ управления вводом данных, валидацией и взаимодействием с пользователем. В этой статье показано, как реализовать собственные валидаторы для элементов, чтобы ваши формы были не только гибкими, но и безопасными и надежными. 👉 https://dev.to/this-is-angular/custom-validators-with-controlvalueaccessor-in-angular-ensuring-robust-form-validations-4jgj

✨ Дерево иерархии типов Оказывается, все типы в TypeScript занимают свое место в иерархии и можно представить ее в виде древовидной структуры. Эта статья — попытка проанализировать систему типов и выстроить правильную ментальную модель. 👉 https://www.zhenghao.io/posts/type-hierarchy-tree

✨ 18 вопросов для собеседования Давно не выходило материалов с вопросами для собеседований, на этот раз эксперты обсудили ключевые темы Angular. Такие, как архитектура, директивы, сервисы, оптимизация и многое другое. Оказалось, что у каждого эксперта свой подход к ответам, и мы надеемся, что вы сможете почерпнуть из них что-то новое. 👉 https://www.angularspace.com/18-interview-questions-answered-by-angular-experts-live-post/

✨ Эффективное использование фикстур в Playwright Фикстуры позволяют настраивать среду выполнения тестов, управлять состоянием, ресурсами и окружением до, во время и после тестов. Это руководство проведет вас через продвинутые техники использования фикстур во фреймворке для end-to-end, чтобы создать надежную и поддерживаемую систему тестирования. 👉 https://habr.com/ru/articles/848434/

✨ 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

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

✨ Angular Signals Implementation Сигналы, хоть на первый взгляд и кажутся сложными, вполне доступны для понимания, а если вы стремитесь разобраться в деталях их реализации. В статье детально рассмотрена их имплементация в Angular, а также объяснено, как именно работает их алгоритм изнутри. 👉 https://habr.com/ru/articles/847130/

✨ Создание пагинации с помощью Firebase и NgRx SignalStore Если вы искали простое приложение, которое бы сочетало сигналы, NgRx и Firebase. Мы нашли небольшое руководство по созданию пагинации, которое поможет улучшить ваши навыки работы с этими инструментами. 👉 https://www.angularspace.com/create-pagination-using-firebase-and-ngrx-signalstore/

✨ Использование Storybook с Angular и Vite Storybook — это отличный инструмент для изолированной разработки и итерации компонентов перед их интеграцией в приложение. По умолчанию Angular и Storybook используют Webpack, но в Angular уже появилась возможность задействовать Vite, поэтому вы можете быть заинтересованы в его использовании и для других частей вашего проекта. 👉 https://dev.to/brandontroberts/using-storybook-with-angular-and-vite-48ga

✨ Host directives: декомпозиция освобождена! В Angular 15 появилась потрясающая возможность, которую часто упускают из виду — Directive Composition API. Она добавляет новое свойство в декораторы Directive/Component под названием hostDirectives. В нем вы можете перечислить все отдельные директивы, которые вы хотите автоматически применить к своему компоненту или директиве. Это позволяет вам комбинировать логику любым удобным образом. Александр Инкин подробно объяснил, насколько эта возможность невероятно мощна. 👉 https://www.angularspace.com/host-directives-decomposition-unleashed/

✨ Angular для всех: как адаптировать приложения для людей с ограниченными возможностями Согласно отчету WebAIM (Web Accessibility In Mind) за 2023 год, 96,3% сайтов не соответствуют основным требованиям, необходимым для того, чтобы люди с ограниченными возможностями могли полноценно пользоваться ими. Хорошая новость заключается в том, что Angular предлагает множество решений и техник в этой области, поэтому нам не нужно обращаться к внешним библиотекам. 👉 https://angular.love/angular-for-everyone-how-to-adapt-applications-for-people-with-disabilities

✨ Определяем неиспользуемые импорты Одна из наиболее ожидаемых функций с момента введения standalone components — это возможность определять, используется ли компонент или директива, импортированные в компонент. Новая диагностика выводит предупреждения, предоставляя информацию без блокировки сборки. Это может быть особенно полезно на этапе разработки, позволяя выявлять неиспользуемые импорты на ранних стадиях. 👉 https://netbasal.com/optimize-angular-apps-with-unused-standalone-imports-diagnostic-in-v19-f2e50220c302

✨ Типы или интерфейсы в TypeScript: что и когда использовать? При работе с TypeScript многие из нас рано или поздно сталкиваются с вопросом: что выбрать — типы или интерфейсы? Дмитрий Бердников поделится особенностями их работы, которые помогут сделать правильный выбор. 👉 https://habr.com/ru/articles/844990/

✨ Увлекательное внедрение зависимостей Dependency Injection — мощный, но недостаточно используемый инструмент. Он позволяет повторно использовать различные ресурсы, получать доступ к встроенным механизмам, таким как HttpClient, извлекать данные из маршрутизации и многое другое. Статья рассматривает несколько нестандартных сценариев, которые могут быть улучшены с помощью DI. 👉 https://www.angularspace.com/fascinating-dependency-injection/?ref=angular-space-all-in-one-newsletter

✨ Перенос React компонента в Angular Во фронтенде существует множество подходов к разработке компонентов, особенно при работе с разными фреймворками, такими как React и Angular. В статье показаны различия между React и Angular с точки зрения того, как они работают с композицией. Автор делится своим опытом, объясняя, как эффективно адаптировать код, сохраняя его функциональность, и что нужно учитывать при миграции компонентов. 👉 https://nartc.me/blog/port-react-component/