Angular 13 Курс: Создаем приложение админки со страницей входа

В этом видео я расскажу вам как создать страницу входа и админ. панель (с асинхронной подгрузкой списка пользователей / сотрудников ) с нуля на фреймворке Angular.

В видео затронуты - rxjs, routing, guards, service и многое другое. Этот урок по Angular подойдет всем, кто хоть раз разворачивал приложение на ангуляре. (ng new my-app).

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

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

Другие видео:

Таймкоды:
00:00 Предисловие
01:15 Разворачиваем приложение
02:09 Установка Bootstrap в проект
05:07 Первый запуск приложения Angular
06:09 Создание компонента Angular
08:12 Роутинг (Routing)
12:45 Верстка компонентов
15:20 Работа с формами (FormGroup, Validators)
27:43 Сервисы
36:33 Генерация модуля админ. панели и его компонентов
39:50 Роутинг в админ. панели
44:01 Снова немного верстки
48:00 Роутинг в админ. панели
49:40 Гварды, гарды (Guards)
01:03:17 Сервисы админ. панели / Роутинг / Отрисовка компонентов
01:17:30 Резолверы (Resolvers)
01:24:26 Progress bar + Resolver
01:35:20 Финальная проверка работоспособности всего

#Angular #Ангуляр

[denidenx]

Полезные материалы:





Для вставки в tsconfig в vscode: 

"typeRoots": [
]

Если возникла проблема с Bootstrap (Выполнять по очереди):

npm config set legacy-peer-deps true

npm cache clean --force

ng add @ng-bootstrap/ng-bootstrap

[vwdmvls]

Видео отличное! Все достаточно понятно, но чем ближе к концу, тем меньше понимания. Многие моменты упускаются и не объясняются, например EMPTY, merge.

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

У вас очень хорошо получается преподносить материал. Такого контента в ру сегменте очень мало. Надеюсь, что вы продолжите снимать новые ролики)

[valeriucernei]

Хороший свежий туториал! Создай пожалуйста по Angular + Material Angular. Будет очень полезен. Спасибо за урок

[GGSoft]

Ну ты даешь. Очень крутая лекция. Узнал много новое!!! Спасибо!!!! Подписалься, потому что мой путь дальше с АНГУПАРОМ. интересно было бы обзор следующих тем: Как работать с капчой, работа с datetimepicker, мултыязычность на примере, как повторно применить контроллер и где найты готовые компоненты. Спасибо заранее. Да еще как работать с state (cookie, session).

[bessonniy]

Спасибо огромное! такие люди как Вы вызывают невероятное восхищение!

[ninja]

Денис, ты четко объясняешь простыми словами, а это редко встретишь. Обычно люди любят выпендриться и поумничать))

[yaroslav]

Спасибо Вам большое! Не забрасывайте, продолжайте, вы нам очень нужны

[front]

Спасибо, Денис! Великолепное объяснение, все очень доступно.

[duce]

Спасибо за труд и урок! Очень интересная тема и сам урок!

[Elodia]

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

[hibrands]

Огонь! Только начал с Аngular работать после реакта. Видео очень полезное!
Благодарю за труд. 👍

[crazyidea]

Спасибо большое. Здорово экономите время.

[njsaab]

все очень даже пригодно спасибо огромное Вам Денис))) ждем новых выпусков и проектов

[ruslankudlay]

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

[wxegsfc]

Замечательно, продолжайте в том же духе!

[johnjohhoun]

Очень даже неплохой курс и для начинающих, да и быстро вспомнить после перерыва полезно, что называется, освежить навыки. Хорошо прошелся по реактивным формам, остальное - в официальных доках. Хороший набор, достаточно сложные вопросы просто рассмотрены: формы, авторизация, гарды, резолверы, RxJS и еще... Ну еще бы NgRx - Redux, но это лучше отдельно.

[sxkslmj]

большое спасибо, видно много готовились

[veronikas.]

Хочется чуть больше объяснений почему пишется так, а не иначе.
К примеру, про Observable вообще не сказал ни слова, что зачем и почему. Или же почему мы писали routerLink в [], а не просто. Что такое резолверы и для чего их создаем. Буквально пару слов и будет супер.
Короче, чуть больше пояснений будут не лишними, если это видосы для новичков.
А в целом было очень полезно, так держать!)

[victormog]

Ключ *--skip-tests* не создает spec.ts файл

[viktorshcheplyagin]

правильно ли понимаю, что модуль - что-то типа микрофронтенда?