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

✨ Работа с window

Считается хорошей практикой преобразовывать неангулярные объекты, такие как window, в инжектируемые, вместо того чтобы использовать их напрямую. Но почему?

Когда мы используем SSR в Angular, объект window отсутствует. Чтобы преодолеть эту проблему и сделать приложение не зависящим от платформы, можно предоставить window через механизм Angular DI.

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

✨ Все, что вам нужно знать о Route Guard

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

В этой статье продемонстрированы возможности Guards и показано, как их использовать на примерах.

👉 https://dev.to/this-is-angular/everything-you-need-to-know-about-route-guard-in-angular-2hkn

✨ Осваиваем структурные директивы

Структурные директивы — это один из самых мощных инструментов Angular. Мы сталкиваемся с ними в самом начале изучения. Однако внутренняя жизнь директив часто остается загадкой.

В этой серии статей мы разберемся в их работе.

👉 https://dev.to/this-is-angular/mastering-angular-structural-directives-the-basics-jhk

✨ Jest ESM - полное руководство по ускорению тестирования

Под Jest ESM, имеется в виду работа Jest в режиме, когда он понимает и использует модули EcmaScript, особенно синтаксис импорта/экспорта ESM.

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

👉 https://angularexperts.io/blog/total-guide-to-jest-esm-and-angular

✨ Angular и tRPC

tRPC — это легкий, высокопроизводительный RPC (Remote Procedure Call) фреймворк, разработанный для простого, быстрого и удобного использования.

Основное преимущество использования tRPC - безопасность типов без генерации кода.

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

✨ Осваиваем TypeScript

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

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

👉 https://habr.com/ru/company/ruvds/blog/712548/

✨ Магия ContentChild, ViewChild и Template References

В Angular мы склонны писать декларативный код.

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

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

✨ Подборка материалов для погружения в Angular

Зачастую для освоения фреймворка достаточно документации — она способна ответить на большинство вопросов.

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

👉 https://habr.com/ru/company/selectel/blog/713876/

✨ Разбираем ошибку ExpressionChangedAfterItHasBeenCheckedError

Одна из самых частых тем, связанных с Angular, на StackOverflow — это печально известная ошибка ExpressionChangedAfterItHasBeenCheckedError.

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

👉 https://indepth.dev/posts/1514/deep-dive-into-the-infamous-expressionchangedafterithasbeencheckederror-in-angular

✨ Улучшаем производительность

Изображения на наших сайтах сильно влияют на общий вес страницы, а метрика Largest Contentful Paint (LCP) оказывает значительное влияние на воспринимаемую скорость загрузки.

В статье исследуется директива NgOptimizedImage, а также проверяется действительно ли она полезна.

👉 https://indepth.dev/posts/1511/improve-page-performance-and-lcp-with-ngoptimizedimage

✨ Обнаружение изменений и деревья компонентов

Мы можем представить себе приложение Angular как дерево компонентов. Под капотом для компонентов Angular использует низкоуровневую абстракцию под названием View.

В этой статье подробно рассматривается, как дерево компонентов соответствует дереву представлений.

👉 https://indepth.dev/posts/1512/change-detection-and-component-trees-in-angular-applications

✨ Angular 15.1.0 делает код немного проще

Прошло некоторое время с момента выхода Angular 15. С тех пор команда Angular выпустила несколько минорных версий.

В статье рассказано о наиболее интересных исправлениях и функциях.

👉 https://medium.com/p/8680dbdea436

✨ Как работает реактивность с Zone.js

Продолжаем погружаться в работу с Zone.js.

Эта статья представляет собой углубленный взгляд на то, как работает Angular под капотом.

👉 https://unicorn-utterances.com/posts/angular-internals-zonejs

✨ Взаимодействие браузера, angular и zone.js

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

Чтобы Angular знал, когда состояние приложения может измениться, ему необходимо знать, когда происходят эти события. Именно здесь в игру вступает библиотека zone.js.

👉 https://indepth.dev/posts/1510/rendering-cycle-in-angular-applications-browser-angular-and-zone-js-interaction

✨ Обнаружения изменений в Angular Ivy

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

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

👉 https://indepth.dev/posts/1509/overview-of-angulars-change-detection-operations-in-ivy

✨ 11 советов по TypeScript

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

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

👉 https://dev.to/zenstack/11-tips-that-help-you-become-a-better-typescript-programmer-4ca1

✨ Терминал для Angular разработчиков

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

Пошаговое руководство по настройке терминала, заточенного под Angular.

👉 https://angularexperts.io/blog/the-ultimate-terminal

✨ Обрабатываем ошибки

Для любого проекта важно отлавливать и регистрировать ошибки. Другим важным шагом является мониторинг ошибок, например с помощью Sentry.

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

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

🦄 Год Тигра в Taiga UI

Разработка Taiga UI идет уже несколько лет. У библиотеки есть выделенная core-команда, но внушительная доля улучшений приходится на внешних контрибьюторов. К концу 2022 года их количество превысило сотню человек.

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

👉 https://habr.com/ru/company/tinkoff/blog/707050/

✨ Полиморфизм простыми словами

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

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

👉 https://medium.com/p/207d9f9cd78