Angular 13: Онлайн магазин с нуля Material UI + RxJS + API

В этом видео я расскажу вам, как создать онлайн магазин на Angular с нуля. Применим такие технологии как RxJS, Material UI и json-server для нашего API. Напишем всевозможные запросы, которые используются в жизни.
Таймкоды:
00:00 Предисловие
00:20 Разворачиваем проект
01:03 Установка json-server
01:10 Установка Material UI
02:00 Запуск сервера json
02:20 Приступаем!
02:28 Генерация компонентов
06:00 Настраиваем роутинг (Routes)
08:00 Вставляем роуты в верстку
09:00 Стилизация (Material UI, верстка, стили)
30:30 Json-server
35:36 Сервисы
39:00 Запрашиваем данные
45:47 Пишем резолвер (Resolvers)
49:00 Получаем данные с резолвера
49:50 Получение данных в компоненте
51:00 Отрисовка данных
58:00 Права доступа
59:15 Диалоговые окна Material UI
1:09:40 Реактивные формы и диалоговые окна
1:29:00 Редактирование и удаление товара
1:49:47 Создание корзины и прописывание логики
1:53:00 Корзина: Создание, редактирование, удаление
2:17:00 Заключение

[@valPhonker]

Это то чего не хватает русской аудитории, примеров по ангуляру. Спасибо!

[@mickgordon763]

Автор, искренне благодарю вас за это видео 💪🤟🤟🤟🤟🤟

[@denidenx]

Спасибо!

[@Jetixxxxxxxxxx]

Огромное спасибо за видео. Ценный урок, повторил весь без особых трудностей. Единственная просьба, за новичков, чуть подробнее пояснять в терминах по коду. Что делаем, что используем. Иногда бывают моменты, что код сопровождается комментариями: "тут напишем это", а лучше чтобы было: "напишем стрелочную функцию, чтобы..."Тогда вообще огонь будет!

[@rs4662]

Автор молодец! только проше не тормози, твои видосы и блог оч круто заходит!! Кстати закидывай в блог к себе что нибудь еще, Давай подробно про RxJS сделаешь видосик и блог

[@zdv3223666]

Никогда не писал комментов, здесь не удержался))) Во-первых спасибо огромное, контент просто топ - именно то что искал! Во-вторых отдельное пожелание побольше комментариев - как то или иное делается в реальных больших проектах. С нетерпением жду новых видосов! (Можно например про верстку при использовании Material UI). Имхо было бы круче если бы ты использовал один проект, в котором с каждым новым видео появлялось что-то новое (сначала ты создал админку, добавил форму какую-то, добавил магазин с корзиной, потом еще что-то - смотрел бы как сериал)

[@disconnect355]

Очень хорошо заходит, автор молодец! Продолжайте в том же духе. Было очень полезно!

[@nouchance]

Спасибо Денис. Ждём новых видосов, удачи!

[@user-ok5uq8yd8i]

Денис, видео супер! Очень жду новых выпусков. Успехов!

[@user-ek4nw1hn6c]

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

[@BillGadov]

Првиет! Спасибо за уроки! Пиши еще. Очень не хватает в сети контента по Ангулару!

[@luckytima2315]

Красиво очень все понятно )) Имхо ангуляр конечно для элиты

[@njsaab9722]

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

[@sobanya_]

Спасибо тебе большое! Очень тяжелый труд на самом деле, хорошо что есть люди, кто готов помочь другим в понимании нового. Желаю успехов и процветания на ютубе) В следующий раз пожалуйста побольше бы объяснений что к чему.

[@user-ig1ui6hj9i]

Отличное видео! Так держать!

[@denisshepelev1966]

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

[@user-mw9sr4yd2q]

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

[@Brunopt893]

Привет вам из Португалии, крутой контент! Продолжайте пожалуйста в том же духе!

[@isseyyy69]

спасибо, давно хотел увидеть как делают профессионал приложение в ангуларе спасибо за твой старание

[@artiomsoprun4607]

просто ТОП! смотрел бы и смотрел, спасибо большое

[@stew8613]

чувак красавчик, спасибо за этот видеролик, очень полезная и нужная информация!)

[@user-yi1ev2lw8b]

Прекрасная практика, больше контента по Ангуляр

[@era_of_gods]

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

[@denidenx]

Спасибо! Хорошо, постараюсь более подробно дополнять.

[@alexvanalien7820]

Наглядно показал, спасибо за видос.

[@denidenx]

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

[@superfan7011]

Спасибо большое за познавательный ресурс! 😃😃

[@superfan7011]

Надеюсь ещё уроки будут)

[@denidenx]

@@superfan7011 Блин, качество еще же плохое, Я спецом для свех в 2к 60 фпс записываю

[@denidenx]

@@superfan7011 Но, спасибо! Мне приятно

[@superfan7011]

@@denidenx да нет качество супер)

[@DruBrawler]

Отличное видео. 😊

[@alexkhodyr]

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

[@user-gw4fx8ms3q]

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

[@andreisachuk5653]

лайк не глядя)

[@KvN-UA]

Отличный контент, классная практика. Еще бы что-то записал по методам и операторам RxJS

[@denidenx]

Привет, в процессе!)

[@AminAmin-du4hy]

спасибо что ты есть

[@IlyaVelo]

Спасибо за видео. Хотел бы отметить, что получается все не реактивно. Можно не подписываться на прямую через subscribe, а просто использовать async пайп и не писать отписку в ondestroy. Для сохранения продуктов использовать behaviorsubject, чтоб в дальнейшем редактировать.

[@denidenx]

Тоже верно, но, я писал для новичков, самое простое, что можно сделать, это познакомить с subscribe

[@denidenx]

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

[@elmirweb6583]

Привет друг. Какой у тебя плагин, что вс код сам делает импорты?

[@user-uf8df7my5n]

у меня почему-то при установке не запрашивает Angular routing. Что я делаю не так? Разобрался. Надо: Angular 16.0.x node 18.10.0

[@denidenx]

GitHub проект этот: github.com/DeniDenx/online-shop-angular Angular. Material: material.angular.io/ Json-server: www.npmjs.com/package/json-server Иконки: fonts.google.com/icons?icon.set=Material+Icons UPDATE 23/11/2023: Репозитарий обновлен до 17-й версии ангуляра.

[@advance5189]

Привет. Будут еще ролики, а то прям хорошо зашли твои видосы по просмотрам?

[@zxc9659]

Здраствуйте Денис. Можете рассказать сколько вы работаете программистом и каковы перспективы в казахстане. Какова зарплата и так далее. Очень было бы интересно

[@tuku_mann]

А какие плагины у Вас?

[@ninja095]

Вначале благодарю автора за данный труд! А затем, 1:32:22 Автор удаляет тихо без особых комментариев и акценте, знак вопроса и я час парюсь что не так в моем коде? вроде бы прочитал ошибку "undefined нельзя присвоить параметру типа number " и думаю где у меня undefined заркралось? к автору претензий нет! Подобные моменты наоборот помогают немного всмотреться в код, начать его анализировать.

[@annakondrateva1233]

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

[@meowvocado]

Скорее всего Angular Files) либо какой-то аналогичный еще есть

[@likoloz3930]

Спасибо за видео! Почему вы перешли на VS code?

[@denidenx]

WebStorm очень тяжелый, при больших проектах это очень сильно заметно. Просто в один день сел, не поленился и настроил VScode. Даже как-то и не задумывался возвращаться к webstorm, все устраивает.

[@denidenx]

Всем привет, обновил репозитарий до 17-й версии ангуляра, включая все зависимости: github.com/DeniDenx/online-shop-angular Обратите внимание, что резолверы и гварды теперь работают немного иначе.

[@user-Ricka]

Есть один вопрос, почему когда я создаю новый продукт, он отображает id:null, почему возникает такая ошибка?

[@ArturAndrusishen]

В мене та ж історія сто раз все перепробував, походу розділяти попробую, або в іфах прописувати умову з Isnew, по іншому не виходить

[@anton9443]

Почему ты не делаешь через модули ?

[@denidenx]

Не делаю что?

[@ans6552]

.

[@user-qh1gr2su4g]

Удаление на фронте оставляет желать лучшего, в чем проблема filter вызвать и по условию item.id !== удалить, ну ладно, но перебор в переборе уже просто смешно, продукт же вернулся и можно было сразу splice(item.id,1)

[@denidenx]

Приветствую! Как правило в магазине не 4 товара, а тысячи, нет смысла пробегаться по всему массиву, ради удаления одного объекта. Со вторым согласен, можно сразу было использовать findIndex, find там совсем ни к чему. (поправил в репе).

[@ans6552]

.