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

✨ Angular Incremental Hydration В современных веб-приложениях оптимизация производительности и пользовательского опыта является ключевой задачей, особенно при работе с масштабируемым контентом. В Angular, используя блок defer, можно контролировать, когда и каким образом отдельные части приложения становятся интерактивными. Контент может быть гидратирован по мере действий пользователя, видимости элементов или по определённым условиям. 👉 https://dev.to/this-is-angular/keep-hydrated-with-angular-incremental-hydration-2apa

✨ Chrome расширение на Angular 18 Иногда возникает желание изменить функционал стороннего сайта или подкорректировать его дизайн. Автор решил поделиться своим опытом разработки расширения для Chrome, рассказав о возникших трудностях и путях их решения. 👉 https://habr.com/ru/articles/851234/

✨ Как использовать менеджер состояний NgRx для Angular-проектов NgRx предлагает управление глобальным и локальным состоянием, работу с побочными эффектами, интеграцию с Angular Router и многое другое. Однако важно заранее понять, стоит ли использовать его в вашем проекте, так как временные затраты на разработку могут не окупиться. В статье рассматриваются ключевые особенности NgRx с попыткой выделить его преимущества и недостатки. 👉 https://habr.com/ru/companies/simbirsoft/articles/851362/

✨ Разные точки зрения при работе с Angular В Angular в некоторых ситуациях доступно два или более инструмента или подхода, и разработчику приходится выбирать тот, который наилучшим образом соответствует его задачам. Однако такая вариативность иногда вызывает жаркие споры. В этой статье рассматриваются различные спорные моменты, которые порождают эти дискуссии. 👉 https://www.angularspace.com/angular-friction-points/

✨ Анонс 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