Angular async pipe. RxJS на новом уровне при таком подходе
ฝัง
- เผยแพร่เมื่อ 4 ก.ค. 2024
- RxJS великолепный инструмент, дающий гибкость в решении не простых задач, но этот инструмент требует много писать подписок и отписок на Observable объекты. Используя ASYNC PIPE в Angular можно понять, что это легко автоматизировать
В этом видео мы рассмотрим самые частые паттерны использования пайпы async и углубимся в тонкости работы с ним
==============================
Код готового урока:
github.com/MaksymGrom/angular...
==============================
Инструкция по установке angular проекта:
Вариант 1:
Пройдите плейлист: • Как работает WEB. Мест...
Вариант 2:
github.com/MaksymGrom/angular...
Загрузите зависимости (npm install)
Можно запускать проект (ng serve)
==============================
Выбор редактора код это дело каждого, но в этом плейлисте я использую webstorm. Как настроить один из популярнейших редакторов ниже:
VS Code: • VS Code extensions для...
WebStorm: • WebStorm работа с angu...
Архитектурные елементы Angular • Angular архитектурные ...
Основы RxJS • RxJs Теория: Observabl...
Подробнее об OnPush • ngOnChanges vs ngDoChe...
Немного старого видео об иммутабельности • Immutable. Неизменяемо...
Не забываем что SQL важен независимо чем планируешь заниматься при веб разработке, даже если планируешь быть менеджером проектов.
Курс по SQL можно найти по ссылке: • Что такое SQL? Как раб...
Спасибо что продолжаете смотреть меня и радовать комментариями.
---- Соц сети
Телеграм, где можно узнать о новых видео и получать доп контент
t.me/webDevGromMaxChannel
P.S. В youtube я отвечаю быстрее чем в telegram, буду рад комментам в youtube
----
Чтобы поддержать канал
1) Можно поставить лайк (или дизлайк, если не понравилось видео)
2) Оставить комментарий более 5 слов
3) Досмотреть видео до конца (так удержание будет выше и мне это поможет в продвижении)
4) Оставить отзыв в комментариях, что можно улучшить в видео, чтобы не хотелось его закрывать
5) Можно стать участником моего канала на платной основе / @grommaks
#pipe #angular #grommax
Материально поддержать канал можно следующим способом
1) Перевод на карту send.monobank.ua/7oqmsFg3Y
2) Пройти опрос, чтобы помочь выбрать подходящие варианты поддержки
forms.gle/ZbFCKJSpDNYp4AMC6
Оглавление
00:00 - Введение
00:39 - Настройка проекта
01:21 - Почему RxJS не нравится большинству
02:19 - Promise | Observable с async пайпов
02:54 - Описание класса пайпы
03:24 - Пайпа вернет null в первый раз
03:57 - Pipe async + *ngIf
06:54 - Как работать с данными в TS не подписываясь
10:14 - Pipe async + *ngFor
11:45 - Smart & Dumb компоненты по признаку пайпы async
16:03 - Как бороться с null в пайпе async
19:40 - Краткий гайд
Сколько я намучился передавая стримы в дамп-компоненты и проверя там null. Предложенное решение просто восхитос.
Очень улучшилась подача уроков! Было тяжело смотреть предыдущие видео, но здесь все прям по делу и с отсылками к другим урокам 👍🏾
Очень рад что у вас все хорошо, и появилась возможность и желание вернуться к каналу. Спасибо за ваш труд
Дякую, чудова подача матеріалу, все легко та зрозуміло) З нетерпінням чекаємо нові відео)
Интересный подход, на верху логика, ниже верстка и события. Спасибо за урок.
Спасибо за то, что делишься своим опытом. Наверное, в ютубе только два канала, которые посвящены глубокому изучению Ангуляра, и все они созданы украинцами. Вы - чудесные :)
А какой второй, не поделишься?))
@@nicalf9329 decoded frontend
@@ilnurryazhapov9377 именно)
Супер! Очень рад что ты продолжил записывать видео-уроки🙂👍
Спасибо большое.^.^, Одно небольшое негодование, нужно боооольше такого годного контента))
Видео просто "класс"! Помогло структурировать знания, которые сейчас необходимо применить. Огромное спасибо!
angular pipe async ангуляр пайп асинк оптимизация стратегия онпуш changeDetection onPush
С возвращением!
все что плохое с вами происходит - это происходит от незнания))
фраза прям через все сферы деятельности и года в жизни))
жирнючий лайкос)))
Спасибо тебе большое, я долго искал хорошие уроки по ANgular && RxJs
с возвращением и огромное спасибо за новые видео! лучи поддержки тебе!
Как всегда великолепно 👍
Дякую, все доступно і зрозуміло
Дякую за відгук)
очень ждал возвращения! Если бы не война, уже бы благодаря этим урокам мидлом был би... Главное, что все хорошо у Вас. А то вроде где-то помниться, что Вы с Харькова.
Угу, с Харькова
Пока ни одну из моих квартир не уничтожили, но в мой дом уже есть три попадания снарядами
В родительский дом попали в крышу над их квартирой, уже залатали соседи
Так что не жалею что выехал с Харькова, но не знаю будет ли куда возвращаться…
Привет и спасибо что вернулся. Я уже переживал, что что то могло случится с тобой. Как у тебя получается что то создавать? У нас фокус уже как 60 дней сместился, тяжело работать. Мотивации ноль. Твои видео заряжают. :)
@@Wunderwaffe2333 очень тяжело получается, но сильно нравится это делать, надеюсь будут ещё видео и начну плейлист по директивам
THANK YOU SIR
Великолепно!
Спасибо !
Спасибо за такой ролик, всё доступно и понятно) В сравнении с предыдущими роликами(которые были год назад) качество улучшилось!) Максим, а можно ли вас попросить перезаписать курс по NGRX, я новичок и мне он тяжеловато даётся, ваш пересмотрел, понятней стало но не знаю, может я глупый)
Спасибо за отзыв
Пока ближайшим временем не планируется перезапись курса по ngrx
NGRX очень сложный для новичков, прям очень, так что тут разве что несколько заходов на старые плейлисты нужно сделать
Короткий ответ, не глупы, пытайся ещё)
Друже, вітаю з поверненням!!!
Дякую
Привет всем
Появилась возможность поддержать платной подпиской
th-cam.com/channels/lDDVLu0Cj_o9Y5D2ilCtdQ.htmljoin
И снова, Максим, спасибо за твой труд👍
Скажи, а как тригернуть users$ | async если данные обновились на сервере после удаления/добавления юзера?
Например, мы определим users$ в конструкторе компонента и подпишемся через async в шаблоне, потом дергнув метод удаления, отправляем запрос на сервис. После чего получив в ответ новый массив, нужно обновить users$
Спасибо за отзыв)
async пайпа переподписывается автоматически, значит нужно просто обновить свойство user$
Тут будет побочный эффект, между запросами вернётся null, его нужно обработать повесив индикатор загрузки
Можно более сложные варианты разработать с использованием rxjs, но тут можно целый плейлист снять на несколько сотен роликов как можно использовать rxjs в разных сценариях
Триггерить users не нужно, нужно повесить users$ на стримы удаления/добавления юзера и они будут сами обновляться. как-то так users$ = merge(
this.allUsers$,
this.createdUser$,
this.deletedUser$,
this.updatedUser$
).pipe(
scan(
(users, user) => this.modifyUserArray(users, user),
[] as E[]
)
);
Крутые уроки!! Спасибо)) а нет желания реализовать material table? Тема микро шаблонов достаточно интересна
Подобный подход планируется в видео по директивам, когда (если) я до них доберусь
@@grommaks понимаю, тяжелые времена сейчас(( сам с ирпеня
@@pes_Duk68 ух, больно слышать про Ирпень…коллега от туда
Кстати в Харьков вернулся уже или еще нет?
Нет, не вернулся, там стало все гораздо хуже, но жильё пока цело, хоть и есть три попадания в дом
смысла в таких компонентах нет...
Вроде как в видео сказал о декомпозиции
Ещё распределение логики
Разумеется что это не единственный верный подход который подходит абсолютно всем проектам и абсолютно всем командам
Спасибо!