✨ Angular Signals Implementation

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

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

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

✨ Angular Roadmap

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

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

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

✨ 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

✨ Эффективное использование фикстур в Playwright

Фикстуры позволяют настраивать среду выполнения тестов, управлять состоянием, ресурсами и окружением до, во время и после тестов.

Это руководство проведет вас через продвинутые техники использования фикстур во фреймворке для end-to-end, чтобы создать надежную и поддерживаемую систему тестирования.

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

✨ 18 вопросов для собеседования

Давно не выходило материалов с вопросами для собеседований, на этот раз эксперты обсудили ключевые темы Angular. Такие, как архитектура, директивы, сервисы, оптимизация и многое другое.

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

👉 https://www.angularspace.com/18-interview-questions-answered-by-angular-experts-live-post/

✨ Дерево иерархии типов

Оказывается, все типы в TypeScript занимают свое место в иерархии и можно представить ее в виде древовидной структуры.

Эта статья — попытка проанализировать систему типов и выстроить правильную ментальную модель.

👉 https://www.zhenghao.io/posts/type-hierarchy-tree

✨ Кастомные валидаторы

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

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

👉 https://dev.to/this-is-angular/custom-validators-with-controlvalueaccessor-in-angular-ensuring-robust-form-validations-4jgj

✨ Создание директивы видимости элемента

В статье автор рассказывает, как создать директиву в Angular с использованием API IntersectionObserver.

Эта директива отслеживает видимость элемента на экране и реагирует на его появление или исчезновение.

👉 https://dev.to/this-is-angular/angular-lab-lets-create-a-visibility-directive-5dpp

✨ Последние обновления effect()

Благодаря обратной связи о effect() во время его предварительного тестирования, команда Angular выявила несколько улучшений в дизайне, которые решают проблемы как с функциональностью, так и с опытом разработки.

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

👉 https://blog.angular.dev/latest-updates-to-effect-in-angular-f2d2648defcd

✨ Анимация списков

Angular включает в себя сложную систему анимации, которая особенно полезна для элементов при их появлении или исчезновении на экране.

Давайте рассмотрим, как она работает на примере анимаций списков.

👉 https://dev.to/this-is-angular/angular-lab-animating-lists-and-using-animationbuilder-for-imperative-animations-1e9j

✨ Maskito: то, что вы давно искали

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

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

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

✨ Анонс TypeScript 5.7 Beta

Недавно вышла бета-версия TypeScript 5.7, и среди нововведений можно выделить следующие:

- Проверки для переменных, которые никогда не инициализировались.
- Перезапись путей для относительных путей.
- Поддержка --target es2024 и --lib es2024.

👉 https://devblogs.microsoft.com/typescript/announcing-typescript-5-7-beta/

✨ Разные точки зрения при работе с Angular

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

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

👉 https://www.angularspace.com/angular-friction-points/

✨ Как использовать менеджер состояний NgRx для Angular-проектов

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

В статье рассматриваются ключевые особенности NgRx с попыткой выделить его преимущества и недостатки.

👉 https://habr.com/ru/companies/simbirsoft/articles/851362/

✨ Chrome расширение на Angular 18

Иногда возникает желание изменить функционал стороннего сайта или подкорректировать его дизайн.

Автор решил поделиться своим опытом разработки расширения для Chrome, рассказав о возникших трудностях и путях их решения.

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

✨ Angular Incremental Hydration

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

В Angular, используя блок defer, можно контролировать, когда и каким образом отдельные части приложения становятся интерактивными. Контент может быть гидратирован по мере действий пользователя, видимости элементов или по определённым условиям.

👉 https://dev.to/this-is-angular/keep-hydrated-with-angular-incremental-hydration-2apa

✨ ИИ в современных Angular-проектах

Пересечение ИИ и фронтенд-разработки меняет подход к созданию, тестированию и управлению приложениями.

Интеграция нейросетей в наши проекты, например, с помощью Cursor IDE, позволяет значительно упростить многие процессы, такие как автоматизация утилитарных функций, создание юнит-тестов и рефакторинг. Он также может следить за соблюдением архитектурных правил и выполнять другие задачи.

👉 https://www.angularspace.com/ai-in-modern-angular-workspaces-the-future-is-now/

✨ Мощь CSS-масок

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

Барсуков Никита напомнил теорию и поделился практическими примерами на основе опыта работы с Taiga UI.

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

✨ Введение в Vitest и Angular

Теперь, когда в новых версиях Angular используется Vite, мы можем применять Vitest в наших Angular-проектах. Процесс установки прост, а синтаксис легко освоить.

В этой статье рассказывается, как настроить Vitest в приложении на Angular 18 для замены Karma, а также добавить покрытие кода, чтобы отслеживать, какой процент приложения охватывается юнит-тестами.

👉 https://www.angularspace.com/introduction-to-vitest-and-angular/

✨ Лучшие практики для директив

Директивы — это мощный и универсальный инструмент, который, как и любой другой инструмент, может быть неправильно использован.

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

👉 https://www.angularspace.com/directive-best-practices/