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

✨ Перенаправление маршрутов

В Angular 18 redirectTo получил возможность принимать функцию, что позволяет выполнять логику и перенаправлять на различные пути в зависимости от определённых критериев.

В статье рассказывается о новой функции на примере обработки опечаток в URL.

👉 https://dev.to/railsstudent/made-typos-in-routes-redirect-routes-with-functions-5dhc

✨ Анонс TypeScript 5.5

С момента выхода бета-версии было внесено несколько изменений:

- Поддержка новых методов Set из ECMAScript.
- Скорректировано поведение проверки регулярных выражений.
- Улучшена производительность.

Релиз получился интересным, настоятельно рекомендуем ознакомиться с ним.

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

✨ Angular Platforms: как запускать приложение где угодно?

Angular — мощная технология для разработки фронтенда. Но ограничивается ли она только вебом?

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

👉 https://www.youtube.com/watch?v=1ODglCYgzwc

✨ Объединяем localStorage с сигналами

Работа с локальными хранилищами достаточно проста, но иногда может не хватать реактивности.

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

👉 https://dev.to/this-is-angular/synchronized-web-storage-with-signals-5b05

✨ Управление побочными эффектами с помощью NgRx Effects

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

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

👉 https://www.danywalls.com/how-to-handle-side-effects-in-angular-using-ngrx-effects

✨ Юнит-тесты для отложенных представлений

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

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

👉 https://angular.love/en/learn-how-to-unit-test-the-deferrable-views/

✨ Сигналы в Angular Auth OIDC клиенте

В 18-й версии библиотеки Angular Auth OIDC (angular-auth-oidc-client) добавлены сигналы для доступа к состоянию аутентификации и данным пользователя.

Это упрощает использование состояния аутентификации и пользовательских данных по сравнению с реализацией на Observables.

👉 https://timdeschryver.dev/blog/signals-in-angular-auth-oidc-client

✨ Основы TypeScript

Недавно вышел перевод третьего издания книги Адама Фримена о TypeScript.

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

👉 https://habr.com/ru/companies/piter/articles/820027/

✨ Улучшаем код

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

Она охватывает следующие темы: чистые функции, управление состоянием компонентов, композиция против наследования, ::ng-deep, вложенные подписки.

👉 https://medium.com/p/b169d4a1c786

✨ Опыт миграции на standalone-компоненты

Если вы выбираете между модулями и standalone-компонентами.

Антон Горелов поделился своим опытом применения обоих подходов. Он подробно рассмотрел как автоматический, так и ручной методы миграции, подчеркнув их особенности и подходящие случаи применения.

👉 https://habr.com/ru/companies/selectel/articles/820593/

✨ Защита от бесконечных циклов обнаружения изменений

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

👉 https://justangular.com/blog/protect-your-app-from-infinite-change-detection

✨ Standalone в Angular

Если вы пропустили standalone компоненты в Angular 14 или хотите мигрировать с модулей.

В статье рассматриваются шаги по созданию standalone компонента и даются рекомендации по миграции существующего приложения.

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

✨ Вставляем HTTP-заголовки

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

Лучший вариант— использовать для этого перехватчики. Давайте рассмотрим, как это сделать.

👉 https://www.danywalls.com/how-to-add-http-headers-to-requests-with-functional-interceptors-in-angular

✨ Советы по дизайн-системе

Если вы разрабатываете компоненты системы дизайна в Angular.

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

👉 https://justangular.com/blog/read-this-if-you-are-building-design-system-components-in-angular

✨ Используем DI

При работе с Angular мы часто сталкиваемся с ситуациями, когда нам нужно передать данные от родительского компонента к дочернему. Обычно это делается с помощью @Input.

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

В статье показано, как можно использовать новые Signal Inputs и Dependency Injection.

👉 https://justangular.com/blog/providing-inputs-in-di

Сделал личный канал. Если хотите, то можете подписаться

Раньше меня звали Киба, но теперь все зовут @kyouma и работаю над TON.

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

Я лиса, а не мышь, и этот канал может быть для хамяков, а может и не быть. Поэтому вас могут сожрать, если вы не будете достаточно осторожны!

Писать буду правдиво и технически. Задавайте любые вопросы, буду рад ответить. Что-то интересное придумаю, поэтому подписывайтесь!

✨ Как использовать Base64 Placeholders с NgOptimizedImage

Мы уже рассказывали о директиве NgOptimizedImage. В версии 17.2 в ней появилась возможность передавать placeholder в формате base64, который отображается во время загрузки изображения.

Он применяется в качестве background-image с эффектом размытия, пока загружается основное изображение. Главное, не забывайте, что placeholder должен быть меньше 4 КБ для оптимальной производительности.

👉 https://netbasal.com/how-to-use-base64-placeholders-with-angulars-ngoptimizedimage-directive-cee9ebfe649f

🎉 Новый @let синтаксис

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

Этот синтаксис значительно улучшает объявление переменных в шаблонах и управление потоком данных.

👉 https://netbasal.com/exploring-angulars-new-let-syntax-enhancing-template-variable-declarations-40487b022b44

🎉 Обзор Angular 18

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

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

👉 https://dev.to/this-is-angular/whatnew-in-angular-18-60j