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

✨ Передача данных через маршрутизацию

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

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

👉 https://indepth.dev/tutorials/angular/indepth-guide-to-passing-parameters-via-routing

✨ Декораторы в TypeScript

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

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

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

✨ Ловушка приоритетов Angular Guards

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

Дмитрий Дробышев рассказал о управлении правилами навигации.

👉 https://habr.com/ru/post/689682/

✨ Дополнительные возможности Angular

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

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

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

✨ Реализуем Resolver

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

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

👉 https://indepth.dev/tutorials/angular/indepth-guide-how-to-implement-resolver-in-angular

✨ Чистая архитектура во фронтенде

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

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

👉 https://dev.to/alexey_karpov_b8cab9c09ab/clean-architecture-in-frontend-1c77

✨ Перегрузка функций в TypeScript

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

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

👉 https://habr.com/ru/company/otus/blog/688270/

✨ Жаргон функционального программирования

Функциональное программирование печально известно своим загадочным математическим жаргоном: такие термины, как монады, моноиды, функторы и изоморфизмы, кажутся пугающими. Но если взглянуть на них как на паттерны программирования, все становится гораздо понятнее.

Давайте рассмотрим эти термины, с которыми вы можете столкнуться при использовании FP-библиотек.

👉 https://ybogomolov.me/fp-jargon-part-1/

✨ Создаем подпись в Angular

Canvas создает область, в которой можно рисовать разные объекты, выводить изображения или рисовать графики.

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

👉 https://medium.com/p/7a3eb7e0599d

✨ Строим архитектуру Angular-приложений

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

Цель этой статьи – познакомиться с темой построения архитектуры.

👉 https://habr.com/ru/company/simbirsoft/blog/687712/

✨ Паттерн стратегия в TypeScript

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

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

👉 https://medium.com/p/54eda9b40f09

✨ Создаем формы с автосохранением

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

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

👉 https://medium.com/p/1a396d17ed7d

✨ Избегаем распространенных ловушек с ControlValueAccessors

Одним из самых больших преимуществ Angular является разнообразие инструментов и решений, которые предлагаются разработчикам из коробки. Одним из них является пакет @angular/forms, который дает солидный опыт работы с любыми элементами управления пользовательского интерфейса.

Но задумывались ли вы когда-нибудь, как именно это работает под капотом?

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

✨ Создаем документацию

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

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

👉 https://dev.to/this-is-angular/documenting-angular-projects-5ob

✨ 18 техник оптимизации производительности

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

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

👉 https://christianlydemann.com/18-performance-optimization-techniques-for-angular-applications-podcast-with-michael-hladky/

✨ Angular DI: использование Inject вместо конструктора

Как вы уже знаете, теперь мы можем использовать функцию inject() внутри компонентов.

Netanel Basal назвал причины, по которым он выбрал Inject вместо конструктора для инъекции зависимостей.

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

✨ Умный подход к бесконечному скроллингу

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

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

👉 https://habr.com/ru/company/bimeister/blog/686096/

✨ Использование Angular компонентов в Astro

Astro — это относительно новый веб-фреймворк, ориентированный на то, чтобы помочь вам создавать быстрые сайты, позволяя другим фреймворкам визуализировать свои компоненты.

В статье описывается способ создавать сайты, используя Astro с компонентами Angular.

👉 https://dev.to/brandontroberts/bringing-angular-components-to-astro-islands-52jp

✨ Оптимизация изображений с помощью директивы Angular Image

В мае 2022 года команды Aurora и Angular объявили о совместной работе над директивой изображений для Angular. Недавно эта директива была выпущена для предварительного просмотра разработчиками как часть Angular v14.2.

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

👉 https://developer.chrome.com/blog/angular-image-directive/

✨ Используем React в Angular приложениях

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

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

👉 https://medium.com/p/1bb907ecac91