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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

✨ Повышаем гибкость компонентов с помощью 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

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

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

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

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

✨ Решаем ошибку при миграции на 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/

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

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

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

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

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

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

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

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

✨ Типизация Array.reduce

Есть одна распространенная проблема, которая возникает в TS всякий раз, когда вы пытаетесь использовать reduce для преобразования массива в объект.

Давайте попробуем ее решить.

👉 https://www.totaltypescript.com/how-to-type-array-reduce

🚀 Анонс AnalogJS 1.0

После долгих месяцев разработки и тестирования недавно было объявлено о первом мажорном выпуске AnalogJS.

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

👉 https://dev.to/analogjs/announcing-analogjs-10-19an

✨ Изучаем NoInfer

В TypeScript 5.4 появился новый утилитарный тип под названием NoInfer.

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

👉 https://www.totaltypescript.com/noinfer

✨ Создание консоли освещения

Консоль освещения используется для управления несколькими сценическими светильниками одновременно.

Это история о том, как она разрабатывалась с помощью Angular и NativeScript.

👉 https://blog.angular.io/angular-with-nativescript-creating-the-blackout-lighting-console-1cf6a030b896

✨ Что нового в Angular 17.3

На днях вышла версия 17.3, которая принесла множество изменений.

В этой статье перечислены наиболее важные из них.

👉 https://dev.to/this-is-angular/whats-new-in-angular-173-1148

✨ Ленивые бесконечные списки на основе Deferrable Views

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

Павел Сапачёв рассказал о различных подходах в реализации списков.

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

✨ Angular и микрофронтенды

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

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

👉 https://angular.love/en/angular-micro-frontends-a-modern-approach-to-complex-app-development/

✨ Оператор satisfies в TypeScript

В версии TypeScript 4.9 появился оператор satisfies, который за последние месяцы набирает все большую популярность.

В статье попытка ответить на вопрос, когда его применять.

👉 https://dev.to/this-is-learning/a-deep-dive-into-the-satisfies-operator-in-typescript-1b3n

✨ Необычный RxJS

RxJS содержит в себе более 100 операторов, но скорее всего, вы пользуетесь небольшой их частью.

В статье приведены примеры использования редких операторов.

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

✨ Директива-контекст

Если вы все еще игнорируете кастомные директивы в Angular.

Алан Маркевич показал, как с помощью них можно расширить функционал ваших компонентов, улучшив DX.

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

✨ Анонс TypeScript 5.4

В новом релизе: улучшили сужение типов, добавили утилитарный тип NoInfer, Object.groupBy и Map.groupBy, так же множество других изменений.

В ближайшие месяцы команда TS будет работать над версией 5.5. Вы можете ознакомиться с их планом на GitHub.

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