✨ Кастомные декораторы

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

Алексей Овсянников поделился опытом написания собственных декораторов.

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

✨ Инъекция зависимостей в Angular

Dependency Injection (DI) — один из самых важных механизмов в Angular. Он позволяет инвертировать управление, передавая экземпляры запрашиваемых зависимостей в класс, а не создавая их внутри класса. Такой подход создает слабую связанность и упрощает тестирование.

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

👉 https://angular.love/en/dependency-injection-in-angular-everything-you-need-to-know/

✨ Решаем ошибку при миграции на Storybook 7

При переходе с шестой версии Storybook на седьмую встретилась ошибка «Providers from the BrowserModule have already been loaded. If you need access to common directives such as NgIf and NgFor, import the CommonModule instead».

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

👉 https://habr.com/ru/companies/skyeng/articles/798697/

✨ Введение в дженерики для новичков

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

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

👉 https://dev.to/this-is-learning/a-gentle-introduction-to-generics-in-typescript-3ap3

✨ Повышаем гибкость компонентов с помощью Fallback Content в ng-content

Многие давно мечтали о функции, повышающей гибкость и надежность компонентов, и в Angular 18.0.0-next.2 появился фоллбэк для ng-content.

Эта функция позволяет указывать содержимое по умолчанию, которое будет отображаться, если в слоте ng-content не будет заданного содержимого.

👉 https://netbasal.com/enhancing-angular-component-flexibility-with-fallback-content-in-ng-content-50637eea7dd5

✨ Angular и Wiz лучше вместе

Вы знаете Angular как веб-фреймворк от Google, но на самом деле у Google есть еще один веб-фреймворк: Wiz. Wiz — это внутренний высокопроизводительный фреймворк, который используется в некоторых из самых популярных продуктов Google.

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

👉 https://blog.angular.io/angular-and-wiz-are-better-together-91e633d8cd5a

✨ Мастер-класс по стилям в Angular

Правильная работа со стилями играет важную роль, в разработке веб-приложений.

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

👉 https://angular.love/en/angular-styles-masterclass-2/

✨ Пошаговая аутентификация с помощью Angular и NestJS

В этом посте рассматривается добавление пошаговой проверки подлинности, с защитой маршрутов с помощью Okta Angular SDK, а также NestJS.

Если вы хотите перейти к готовому проекту, то можете найти его в этом репозитории.

👉 https://dev.to/oktadev/add-step-up-authentication-using-angular-and-nestjs-1apn

✨ 10 Utility Types для проектов

Utility Types значительно упрощают процесс разработки, улучшая качество кода и сокращая количество ошибок.

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

👉 https://dev.to/antonzo/10-sustom-utility-types-for-typescript-projects-48pe

✨ Исключения для any

Использование any справедливо считается вредным в большинстве сценариев. Даже существуют правила ESLint, запрещающие его использование.

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

👉 https://www.totaltypescript.com/any-considered-harmful

✨ Signals standard proposal

Обычно мы считаем, что сигналы — это функция веб-фреймворков, но скоро это может измениться. Есть шанс, что сигналы станут частью JavaScript.

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

👉 https://github.com/proposal-signals/proposal-signals

✨ Успешная работа с сигналами

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

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

👉 https://www.angulararchitects.io/en/blog/successful-with-signals-in-angular-3-effective-rules-for-your-architecture/

✨Angular прикроет вас, когда дело дойдет до XSS

Межсайтовый скриптинг (XSS) — это уязвимость, которая позволяет злоумышленнику внедрить вредоносный код в веб-приложение. На протяжении многих лет она входит в список OWASP Top 10 наиболее критичных рисков безопасности.

Если вы впервые слышите об XSS, то эта статья поможет вам защитить ваши приложения.

👉 https://timdeschryver.dev/blog/angular-has-your-back-when-it-comes-to-xss

✨ Типизируем process.env

Распространенная проблема в TypeScript заключается в том, что process.env не дает автозаполнения для переменных окружения, которые есть в вашей системе.

В статье даны пара советов, для строгого определения типов process.env.

👉 https://www.totaltypescript.com/how-to-strongly-type-process-env

✨ Тестирование сигналов с помощью Angular Testing Library

Наверняка вы задавались вопросом, как сигналы повлияют на ваши тесты. Но если вы используете Angular Testing Library, то вам повезло.

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

👉 https://timdeschryver.dev/blog/testing-signals-with-angular-testing-library

✨ Пробуем Analog SFC

Не так давно вышел Analog 1.0 и представил сообществу Angular стабильный мета-фреймворк, но самым большим вопросом к нему стали Single File Components (SFC).

Этот формат файлов и API является экспериментальным, поэтому команда разработчиков будем рада, если вы попробуете SFC и оставите свои отзывы.

👉 https://dev.to/analogjs/bridging-analog-to-angular-with-esbuild-and-vite-472j

✨ Тестирование анимации в Angular

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

Однако не менее важно обеспечить надежность и корректность этих анимаций.

👉 https://dev.to/this-is-angular/testing-animations-in-angular-a-comprehensive-guide-4nhp

✨ Статический анализ мультиязычности c помощью ngx-translate-lint

Если в вашем приложении есть мультиязычность и вы для нее используете пакет ngx-translate.

То вам пригодится небольшая заметка о инструменте для проверки ключей с помощью regexp.

👉 https://habr.com/ru/companies/lanit/articles/805655/

✨ Паттерны для эффектов

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

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

👉 https://dev.to/this-is-angular/efficient-angular-effects-patterns-4396

✨ Обобщенные фабрики тайпгардов в TypeScript

Несмотря на всю мощь вывода типов, TS иногда требует явного описания механизмов проверки для сужения типов.

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

👉 https://habr.com/ru/companies/tinkoff/articles/808655/