Тёмный

ng-template, ng-content, ng-container, *ngTemplateOutlet, context лайфхаки. Angular 

Максим Гром
Подписаться 8 тыс.
Просмотров 20 тыс.
50% 1

Опубликовано:

 

30 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 84   
@cubuanic
@cubuanic 2 года назад
Очень досадно что (надеюсь - пока) не освещена тема тестов. Если кто так же скучает по тестам - "Frontend не для всех" ru-vid.com/show-UC74THBccUmyFbkRtA0NBAog
@grommaks
@grommaks 2 года назад
Привет всем) Уровень уроков этого плейлиста плавно растет, я могу отнести информацию из этого видео к уровню мидл Если вам тяжело проходить этот урок, то попробуйте пройти его ради понимания возможностей и добавьте себе в закладки, ведь еще придется сюда вернуться 😜
@bukanaka
@bukanaka 2 года назад
Хай, с радостью посмотрю. Отличный материал!
@murakami374
@murakami374 2 года назад
как думаешь, стоит повторять пройденный материал, например посмотрел 3 видео, а потом сидишь и повторяешь, потому что как по мне, я многое забываю, особенно то , что понял как то поверхностно, или очень слабо
@grommaks
@grommaks 2 года назад
@@murakami374 если есть ощущение что надо повторять, то повторять определенно стоит. У меня не просто так для каждого урока есть исходная версия проекта, чтобы можно было повторить любой урок
@njsaab9722
@njsaab9722 Год назад
да это про меня из разряда, ничего не понятно но очень интересно;))) но я не сдамся, раз сюда дошел)
@yabadababy3204
@yabadababy3204 Год назад
Друзья, урок шикарный, но учитесь с умом. ПОсмотрите 1-2 раза, пока не поймете принцип работы, далее через 2-3 дня пересмотрите видео. Через неделю пересмотрите еще раз, и так вы навсегда запомните что это такое и как работает. Даже гуглить не придется ничего. Чем чаще возвращаетесь к информации тем связь нейронов крепче, и с каждым разом запоминаете больше информации.
@ilnurryazhapov
@ilnurryazhapov 2 года назад
Лайк
@nexgenua
@nexgenua 2 года назад
Круть, в свое время нигде ни в одном гайде/курсах не было об этом ни слова, все это познавалось путем чтения официальной доки, которая ой как туго описана. Делаешь хорошую работу по продвижению фреймворка и обучению работы с ним, а то к нам приходят на собесы ангулярщики с 3 годами опыта и не знают что такое ng-content
@grommaks
@grommaks 2 года назад
Спасибо за отзыв) С ангуларщиками Жизненно)
@user-san-chous
@user-san-chous 2 года назад
Полностю поддерживаю. Тоже для познания этого, в частности работы с контекстом, я долго сидел тыкал интуитивно... Это видео тогда бы мне сэкономило минимум несколько часов))
@lantan_creater
@lantan_creater 2 года назад
"Для этго отправимся в ребёнка".. 1:32 пояснения такие пояснения =))
@TheJabberwahh
@TheJabberwahh Год назад
годный какой контент по Ангуляру :) подписочка прям
@victormog
@victormog 2 года назад
Может, конечно, плохо искал, но это лучшее, что я нашёл по Angular на русском языке. А главное - очень полезный канал!
@JB-sv8oh
@JB-sv8oh 11 месяцев назад
большое спасибо! лучшее видео на эту тему
@ВеликийКамень-п9е
@ВеликийКамень-п9е 2 года назад
Максим спасибо вы крутой чел
@KolkhozDnepr
@KolkhozDnepr 2 года назад
Спасибо за видео) как всегда все круто и интересно)) сложная штука ангуляр для понимания, уже второй месяц пытаюсь понять, но каждый раз что то новое и новое...
@volodimiryemshyn715
@volodimiryemshyn715 2 года назад
Отлично пояснил, качество подачи растет. Спасибо за тему очень классная штука с ref tempate жаль мало кейсов для применения :) Покрайне мере я так и не нашел места для ее реализации. Если будет возможно показать побольше примеров, было бы неплохо.
@grommaks
@grommaks 2 года назад
Обязательно будут примеры) а такую штуку применяем в конструкторе таблиц на проекте, шаблон ячейки передаём в базовый компонент и не трогаем старый код)
@rey4eel
@rey4eel 2 года назад
Такая же мысль посетила. Очень крутая информация , но ни разу не применял ничего подобного кроме обычной передачи данных от parent -> child. А вот чего не знал так это то что есть директива select ) видимо документацию читал между строк )
@VasyaFF
@VasyaFF Год назад
Максим, обнови уже WebStorm. Уже в который раз смотрю ролик, каждый раз удивляюсь что не обновлено 😁
@grommaks
@grommaks Год назад
Лень :)
@tobbi2000ify
@tobbi2000ify 2 года назад
Спасибо, Максим, за классный гайд! Все четко и по делу.
@alex330k47
@alex330k47 Год назад
в репозитории под видео нет примеров урока, только базовый шаблон
@grommaks
@grommaks Год назад
Смотрите код готового урока в описании, там есть изменения 😊
@Leonidn1972
@Leonidn1972 3 месяца назад
May can you create video - how to build GRUD project with ANGULAR 17 includ JWT token,Reduce,RXJS and best practices .NET CORE API .(я присоединился к каналу)
@MrShevrin
@MrShevrin 2 года назад
делаешь очень важную работу! большое тебе спасибо!
@IngvarLosev
@IngvarLosev 2 года назад
Спасибо !
@DInfinity3
@DInfinity3 2 года назад
А когда что лучше всего использовать? Почему бы просто не сделать отдельные компоненты с ngIf?
@grommaks
@grommaks 2 года назад
Это удобно использовать когда между компонентами передаются шаблоны, от родителя ребенку В видео о хуках, о AfterContentInit там есть пример использования В противном случае нужно использовать динамические компоненты, но это другая история и своя область применения
@rockyshwilly
@rockyshwilly Год назад
очень полезные видео, спасибо! Если бы еще сразу были задачки как отработать знания - вообще круто было бы)))
@yuriiyurii6656
@yuriiyurii6656 2 года назад
Це шедеврально
@kiroku043
@kiroku043 2 года назад
Лучший
@artem_ka3863
@artem_ka3863 2 года назад
Спасибо, хорошо объяснил. Ждём видел об ngcomponentoutlet
@javavision73
@javavision73 2 года назад
Спасибо!
@alexshubin1
@alexshubin1 Год назад
Круто - с "select". Никогда так не юзал, всегда ng-templateOutlet делал. C select кода заметно меньше, но для потребителей компоненты это менее понятно. (В какие тэги что выводить)
@dmitriibochkarev8714
@dmitriibochkarev8714 2 года назад
Контент потрясающий! Спасибо за труд! Жду продолжения
@RageBerry_
@RageBerry_ 2 года назад
Очень круто, спасибо за ролики
@MrShevrin
@MrShevrin Год назад
Привет, пытаюсь "вытащить" event из кнопки обернутую в ng-content (динамический компонент-обертка, со стилями, попапом и запрещающий функционал по клику), но получаю ошибку "Failed to execute 'getRangeAt' on 'Selection': 0 is not a valid index"... кроме того не отрабатывают стили по ховерам на кнопке. Уже близок к тому, чтобы все сделать через ngSwitch и иметь в шаблонах 2 кнопки - нормальную и обернутую в контент для чисто декоративного отображения залоченного функционала
@Leonidn1972
@Leonidn1972 3 месяца назад
Очень полезная информация. Я серверный программист, начал изучать ANGULAR. Очень профессионально. Акцент на том, что будут спрашивать на собеседовании.Thanks a lot.
@dmitriy9152
@dmitriy9152 Год назад
Супер! Отличное видео. Объяснение намного лучше, чем родной документации angular.
@biovawan
@biovawan 2 года назад
Спасибо за урок! Подсветку делает не angular, а language server protocol, разработанный jetbrains. Implicit - не значение по умолчанию, а неявное значение
@diatm1506
@diatm1506 2 года назад
Как лучше разбивать по папкам? Хранить всё отдельно например папка components, pages, models, pipes, services и тд. Собирать потом например в pages posts module? Или хранить умные и глупые компаненты в одной папке с именем страницы и складывать всё туда и выносить в папку shared то что переиспользуется?
@grommaks
@grommaks 2 года назад
Вопрос не простой 1) Обязательно нужно делать консистентно - т.е. везде одинаково, все остальное опционально 2) shared модуль допустим если мы делаем маленькое приложение, например микросервисы, но и даже тут я бы не стал делать эту папку - Вместо shared лучше использовать common и туда скидывать общие модули, именно модули, один модуль одна общая фича - А при микросервисах лучше иметь проект libs где будут также общие модули, но тут они уже будут не обязательны к подключению во всех модулях проекта 3) Папки в модулях помогают легча понимать что и для чего используется, но много папок могут затруднить навигацию... Тут нужен баланс. То что нравится мне, но то что сложно реализуется без понимания модульной архитектуры - разбиение на папки по ответственности, guards в своей папке, страицы в своей, юи в своей... Глупые и умные компоненты имеют слишком широкое разделение. Тут глупые я считаю UI елементы, и умные могут быть страницами, могут быть layout (шаблонами страницы), модалки, виджеты (если у нас сложное отображение, не 1 страница = 1 фича)...но суть в том, что нужно четко понимать в какой папке какая логика должна быть, и можно ли чтобы верхний слой перескакивал и подключал другой слой к себе...например страница подключила UI без использования виджета... По разбиению компонентов - всего лишь вершина айсберга. Еще есть специальные компоненты или специальные сервисы и диррективы которые наследуются от ядра какой ни будь фичи...например платежные методы на странице оплаты... Я бы вынес их в отдельную папку payments по какой либо логике...но это уже сложный подход, я его применял в последних видео джедая веб разработки в nestjs проекте P.S. Разбивать на микро модули это правильно и удобно, но требует много конфигураций код становится сложнее на порядок... P.S.S Нужно освоить "не прекращающийся рефакторинг" - это когда часть функционала скрывается за приватными методами и контрактами, а по мере роста приложения переписываются на правильную архитектуру и публичные контракты расширяются... Т.е. можно сделать очень грязную архитектуру, но к которой можно будет получить доступ через один компонент и один сервис...а по мере работы декомпозировать, раскидывать по папкам и тратить деньги клиента на красоту...а пока ничего не понятно, сделать чтобы работало и никому не показывать то что еще сырое
@diatm1506
@diatm1506 2 года назад
@@grommaks спасибо!
@grommaks
@grommaks 2 года назад
@@diatm1506 P.S. Если модульная архитектура, и есть компонент который не понятно куда положить, но он приватный для модуля, то можно его положить куда угодно, и не экспортить...перед экспортом подумать где он должен быть на самом деле) Если он должен быть публичный, но опять не понятно куда его положить, то можно в модуле добавить index.ts файл который будет импортить компонент и его же экспортить...цель чтобы никто не знал где он лежит в модуле, и потом его можно было перенести куда угодно... (Но index.ts файл я не люблю, он импортит слишком много без явного запроса, но решает описанную мною проблему) Думаю мне нужно раскрыть тему на канале по "непрерывному рефакторингу"
@diatm1506
@diatm1506 2 года назад
@@grommaks Тоже думал например к auth относятся и login и register подумал не проще сделать rest и к login и register и к каждому сделать отдельные сервисы и dto вместо методов login register в auth servise, а разделить например login findOne когда пользователь вводит пароль и емаил destroy, когда делает logout и тд разделить на CRUD и собрать login, register реэкспортить в auth модуле. Думаю вк досихпор рефакорят и поддерживают и будут до безконечности. Material ui. интересно реализованно хотелось бы тоже попробовать что-то подобное написать для учебных целях их удобно использовать они не привязанны к друг к другу и переиспользуются хорошо. Index.ts barel file я использую но в nest сталкнулся с ошибками что когда использовал 2 сервиса в 1 модуле с index не правильно реэкспортился сервис. Думаю лучше дождусь других видео тк проект растёт, а оперировать сервисами и тд становится сложно и архитектура заходит в тупик( Я даже отказался от typeorm которая предоставляла репозитории в пользу prisma orm там без них можно) Думаю узнаю как правильно использовать сервисы в скором будущем
@DInfinity3
@DInfinity3 2 года назад
@@diatm1506 Серебряных пуль не завезли в очередной раз. Имхо, всё упирается в понятность и простоту поддержки кода. В 2 разных случаях один и тот же код может быть и допустимым, и вообще "его дробить давно нужно". Принцип SRP зависит сильно от задачи, которую код вынужден делать. Если известно, что он усложняется, добавляются вариации, то тогда мб есть смысл его дробить. Я лично против сильного дробления кода
@halfbelf5923
@halfbelf5923 3 месяца назад
Канал в котором лежит золотой клад знаний, не только по ангуляру, но и в целом, если вы захотите стать разработчиком, тут находиться один из лучших материалов, автор научит Вас как правильно делать, расскажет об альтернативах, разберет плюсы и минусы, тут все что нужно разрабу.
@Seacrest.
@Seacrest. 2 года назад
Понятные гайды среди прочего и редко кто так итоги подводит чтоб не запутаться
@Fomenko1978
@Fomenko1978 2 года назад
Спасибо, хорошо объяснили работу сложных конструкций.
@ВеликийКамень-п9е
@ВеликийКамень-п9е 2 года назад
Максим, а как давно вы пишите на Angular?
@grommaks
@grommaks 2 года назад
Года два наверно, я с бекенда перешёл на ангулар, а на ангулар не все проекты были…так что в если усреднить то можно считать 2 года
@ВеликийКамень-п9е
@ВеликийКамень-п9е 2 года назад
@@grommaks круто 🤙, я просто случайно наткнулся на данный ролик по Angular JS решил посмотреть , пишу на Angular Dart :0
@kro0sh843
@kro0sh843 2 года назад
Спасибо! Отлично раскрыта тема как и с чем есть эти темплейты)
@grommaks
@grommaks 2 года назад
Ещё будет видео с более продвинутым механизмом передачи темплейтов через контент) так что у меня еще есть козыри, чтобы впечатлить
@lesnoy_leo
@lesnoy_leo 2 года назад
Такой инфой я свою сраку еще не мучал
@anishchenko
@anishchenko 2 года назад
Очень полезно!! добавил в закладки)) ждем новых выдео
@AlexLavrik
@AlexLavrik 2 года назад
Все ясно и понятно! А это очень большая редкость...Спс за материал!
@awesomeuser789
@awesomeuser789 2 года назад
Странно что так мало просмотров... Контент просто офигенный! В который раз пишу уже в комментах-главное не забрасывай эту движуху, это супер-полезно!) Спасибо
@АнтонСевостьянов-х9б
Блин, как же круто, и круто то что ты именно на пальцах всё объясняешь, всё понятно досконально, спасибо большое!!!
@user-glory-of-ukraine
@user-glory-of-ukraine 2 года назад
Надіюсь випуск буде тривалий по часу)) Дякую за відоси!!
@grommaks
@grommaks 2 года назад
Этот выпуск около 15-20 минут) содержательный, но будет ещё один выпуск вместе с жизненным циклом компонента на 20 минут по той же теме, но ещё интереснее 🤠
@user-glory-of-ukraine
@user-glory-of-ukraine 2 года назад
@@grommaks Супер, з нетерпінням очікую!!
@ЮлианаШилько
@ЮлианаШилько 2 года назад
Максим, спасибо огромное за уроки! Я не встречала пока ,чтобы так понятно и доступно было объяснено! Очень жду уроки по директивам!
@ЕгорРура
@ЕгорРура 2 года назад
Очень важное и понятно видео! Спасибо огромное.
@m9tezhnik
@m9tezhnik Год назад
Большое спасибо за подробное объяснение.
@konstantinsurnin855
@konstantinsurnin855 2 года назад
самый доступный мануал для понимания, спасибо!!!
@developerabdulaev4768
@developerabdulaev4768 2 года назад
Отличное видео, спасибо в очередной раз. Скажите пожалуйста, вы занимаетесь менторингом?
@grommaks
@grommaks 2 года назад
На данный момент нет, и ближайшим временем не предвидится
@antergonza6476
@antergonza6476 2 года назад
Awesome topic - keep on!
@user-san-chous
@user-san-chous 2 года назад
Очень полезное видео. Я для себя даже конспект сделал) хотя работаю с ангуляром уже пол года, но все равно с контекстом путаницы были, так как редко его применял... Хочу еще один кейс показать странный, которым я писал через месяц работы на проекте (будучи полным джуном, хотя как и нынче) и сейчас не совсем понимаю)). Будет плюсом для продвижения видео)) Прокидывал таким образом форму (ngForm) через контекст из дочерного компонента в родительский, а там эту форму прокидывал в сложные дочерные "инпут-компоненты", которые потом через ng-content снова прокидывал и выводил в первый дочерный компонент, из которого эта форма и пошла)) Звучит запутанно и думаю, что можно было сделать проще... Но зато интересный синтаксис. Мы можем с темплейта внутри дочерного компонента передать контекст в темплейт Дочерный шаблон: SAVE Дочерный клас: ... @ViewChild('f', { static: false }) public f!: NgForm; @ContentChild(TemplateRef) templateRef!: TemplateRef; ... Родительский шаблон (где 2 сложных инпут-компонента прокидываем в ng-content дочерного компонента с формой):
@grommaks
@grommaks 2 года назад
Прикольное решение) мне нравится) Достаточно гибкое, когда буду директивы показывать, там чуть чище можно сделать... И в видео о AfterContentInit Я покажу как можно было массивом шаблоны передавать...чтобы надежнее было :)
@tn6680
@tn6680 2 года назад
Очень полезное видео! Респектище!
@russianstan
@russianstan 2 года назад
Супер! Спасибо большое!
@andriikulyk327
@andriikulyk327 2 года назад
Спасибо за гайды!!
@leonidsimakov859
@leonidsimakov859 2 года назад
Спасибо за видео!
@whoopigoldberg8121
@whoopigoldberg8121 2 года назад
Спасибо, хочется поддержать канал, да не знаю как. Можно было бы и донат оставить.
@grommaks
@grommaks 2 года назад
Коммент это самое вдохновляющее, ещё нравится обратная связь, я готовлю офлайн курс исходя из полученного опыта в этих плейлистах, так что любая критика и рекомендации помогут)
@KvN-UA
@KvN-UA Год назад
@@grommaks хочу навчатись у вас офлайн теж!
@grommaks
@grommaks Год назад
@@KvN-UA якби не війна, був би курс, а так поки планую повертатися у ютуб
@dimasobchenko6519
@dimasobchenko6519 2 года назад
сенкс) довго шукав щось гідне по Angular) відоси - АААгонь!)
@KvN-UA
@KvN-UA Год назад
Була необхідність, чимало гуглив та читав статті по темам: ng-template, ng-content, ngTemplateOutlet, однак, щоб все це в одному короткому уроці та ще й із прикладами, то це неабияка знахідка. Greate job! P. S. Окрема вдячність за короткі висновки в кінці відео, текстовий опис під уроком та таймкоди, дуже допомагає, при необхідності повернутись та окремо освіжити якусь інфо!
Далее
Teeth gadget every dentist should have 😬
00:20
Просмотров 941 тыс.
ngTemplateOutlet is WAY more useful than I realised
16:36
Teeth gadget every dentist should have 😬
00:20
Просмотров 941 тыс.