🦊 Angular Fox 🚀 — русскогорящие новости сообщества
3.99K subscribers
1.22K photos
7 videos
1.07K links
Как костыль на реактивно-лисьей тяге 🔥🦊

Нравится канал? Подпишись на меня!
👉 twitter.com/thekiba_ru
💖 twitter.com/thekiba_io
medium.com/@thekiba
github.com/thekiba

Чаты @angular_ru @angular_jobs
Download Telegram
Создаем структурные директивы

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

В статье показано, как реализовать пользовательский NgFor.

👉 https://indepth.dev/tutorials/angular/guide-to-repeat-HTML-elements-multiple-times
👍13🔥3
Применяем паттерн адаптер

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

Павел Беликов предложил использовать адаптер для Angular приложений.

👉 https://medium.com/p/3d00582c7156
👍6🤔3🔥2❤‍🔥1
Используем веб-компоненты в Angular

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

Давайте приступим к созданию нашего первого веб-компонента, который мы интегрируем с Angular.

👉 https://medium.com/p/c5d1d7825ca0
👍11
Как Computed Properties в Angular помогают пропускать титры

Computed Properties в самом Angular нет, но что-то подобное есть в RxJS, который идет с ним в комплекте. Он позволяет разделять бизнес-логику на отдельные атомарные и логичные куски, объединять их в любом порядке, сохраняя при этом чистоту кода.

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

👉 https://habr.com/ru/company/ru_mts/blog/671922/
👍93👎1🔥1
Основы взаимодействия компонентов

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

Давайте рассмотрим несколько способов взаимодействия компонентов.

👉 https://medium.com/p/82fc196f30f9
👍10🤔1
Создаем директиву копирования текста в буфер обмена

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

Давайте создадим директиву, которая упростит нашу работу.

👉 https://medium.com/p/fc1139b9e755
👍10👎2🔥2😁1
Изучаем Angular inject

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

Но что же это такое? Давайте разберемся.

👉 https://medium.com/p/33c6ce8cfd07
👍12🐳4
Управляем доступом с помощью директив

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

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

👉 https://medium.com/p/48f477f69d23
👍14🔥2
Создаем чат

Appwrite — это backend-as-a-service с открытым исходным кодом, который предоставляет набор функций, от взаимодействия с базой данных до аутентификации, и обновлений в реальном времени.

В статье на примере чата показано, как начать работу с Appwrite.

👉 https://dev.to/appwrite/building-a-realtime-chat-application-using-angular-and-appwrite-i3o
👍4
Делаем код более абстрактным

Angular позволяет писать абстрактный код без каких-либо неожиданных зависимостей. Самый простой способ проверить, насколько абстрактен ваш код — попробовать запустить проект в режиме SSR.

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

👉 https://medium.com/p/7b16273658db?sk=752ffb35983f38e82be8e45759371ed4
👍10🔥2
Ищем и устраняем неисправности маршрутизации

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

Мария Корнеева рассказала, что может пойти не так при настройке Angular роутера.

👉 https://medium.com/p/bc96c59fe49b
👍3🔥2🤩1
Типизированные формы

Ранние версии Angular Reactive Forms не были полностью безопасными с точки зрения типов, значение выдаваемое формой, имело тип any. Поэтому легко было случайно столкнуться с ошибками, например, присвоить полю формы значение неправильного типа.

Узнайте, как лучше всего использовать типизированные формы Angular в своих проектах.

👉 https://blog.angular-university.io/angular-typed-forms/
👍6🔥4
Выходим на мета-уровень!🤯 11 июля начинается новый сезон Podlodka Soft Skills Crew, который называется "Научиться учиться"🤩

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

Поэтому в новом сезоне мы сконцентрируемся на выстраивании эффективного подхода к самообучению:

⭐️ Проанализируем свои потребности и цели в обучении
⭐️ Построим план по достижению этих целей
⭐️ Поймем принципы обучения на биологическом уровне
⭐️ Изучим и сравним инструменты обучения от книг и до сессий с ментором
⭐️ Научимся разбираться с мотивацией и находить силы

Бонус трек – в течение всей недели по утрам будут практические воркшопы по осознанности, рефлексии и самодиагностике!

Если вы еще не разу не были на Podlodka Crew, то самое время попробовать! Главные фичи:
💡Узкая тема. Разбираем теорию и практику конкретного подхода или технологии.
💡Удобное расписание: сессии идут 2 раза в день с понедельника по пятницу.
💡Море практики, реальных кейсов и нетворкинга без границ

👉 Купить билеты и посмотреть расписание можно на сайте конференции. Ждем вас на борту!
👎7👍3
🔥 Розыгрыш двух билетов на Podlodka Crew

Специально для наших подписчиков мы запускаем конкурс совместно с Podlodka Crew.

Для участия необходимо:
💖 Быть подписанным на канал
👉 Ответить на несколько вопросов

Конференция состоится 11 - 15 июля

💖 Желаем удачи
👎9👍8
Начинаем розыгрыш билетов Podlodka Crew

Если вы еще не подали заявку на участие, то можете сделать это здесь

Нажмите, чтобы присоединиться к стриму
👍5👎3
Повышаем надежность

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

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

👉 https://medium.com/p/855deec98fbc
👍8🔥2
Новый подход к шаблону Container-Presenter

Зачастую продвинутые приложения требуют использовать паттерны. Паттерн Container Presenter — это интересный инструмент для организации потока данных. Он может быть реализован различными способами, главное — разделение слоев. С его помощью вы можете добиться лучшего разделения ответственности между слоем состояния и слоем представления.

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

👉 https://medium.com/p/dac60ca1b65e
👍9🔥3
Разбираемся с ошибками

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

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

👉 https://dev.to/this-is-angular/errors-and-angular-n0b
👍7👏1