Привет всем :) Если вы случайно попали на это видео, то можно начать проходить плейлист с начала Со знакомства с Angular czcams.com/video/IrelRVjIttA/video.html Или с компонентов Angular czcams.com/video/U5d_FtO_3NA/video.html А если не случайно, то приятного просмотра и спасибо за активность под этим и остальными видео у меня на канале
наконец пошли уже нормальные взрослые темы ) у мня идея для будущих видео, это по мимо обзора концепций, делать видосы по решению типовых повседненвных задач с использованием бэст-практик, что-то типа кук-бука для Ангуляра. например как сделать несколько асинхронных запросов, когда нужно дождатся выполнения каждого из них и полученные результаты используются в следующем и когда не нужно, механизмы обмена данными между родительским и дочерним компонентом, или когда эти компоненты вообще не связаны друг с другом и т.д. ну думаю ты лучше мня знаешь с чем кажды день сталкиватся Ангуляр-разработчик
Да, по мере роста базы, так и планировал разбавлять примерами которые будут собирать концепции нескольких уроков :) Это видео маленький пример того, что я хочу ^_^
По первому вопросу с "несколько асинхронных запросов" то тут ангуляр не при чем, это же rxjs, всякие zip, zipAll, там ничего военного. Обмен данными между компонентами тоже все просто, обычные сервисы с обсерваблами subject или behaviourSubject, в зависимости от задачи, нужно ли текущее значение, ну или ngrx, но там в доке и так все понятно. Вот и весь бестпрактис.
Долго ждал. Интересно конечно будет узнать приемущества кастомных деректив. Хочу узнать например в слайдере есть 2 кнопки next и prev в 1 дерективе есть возможность вешать по клику например 2 метода на prev и next handleNext, handlePrev или обработать сразу 2 события? Например клик и если курсор мыши не в поле зрения компонента если не ошибся mouseout то слидер будет листать слайды через 3 секи сам или взависимости от настроек в компаненте. Или нужно много деректив? Например audio player там столько событий... и там в какой-то книге шаблон применялся для плеера
Нужно делать так, чтобы пользоваться было легко клиентам такого кода, и чтобы когда нужно будет добавить новый функционал в ядро никому ничего не сломать Все остальное вкусовщина…и специфика конкретного решения
👍 классные видео! Вдарить еще по ранимой реактовской психике 😊 (не хейчу библиотеку если что) Resolve гвардами, Reuse stratage и сборкой апки для плеймаркета с деплоем, а то народ вроде знает, что угловатый это фреймворк, а вот в чем его фреймворкость и сила до конца не понимают
Со мной в фирме работают 600 человек на angular и из них деплоями и разбиением занимаются пару человек, я не в их числе))) я больше по ООП и модульной архитектуре…вот когда ковырну описанные практики, то обязательно запишу)
Максим, благодарю за конент. Совсем недавно делал меню и остановился на том, как клик снаружи отработать. Надо проверить, мне кажется что host-context(.hidden) тоже самое что :host { .hidden { ... }} По ссылке на гитхабе кода урока нет, там просто пустой ангуляр проект.
Очень круто, понятно как все связано, но не понятно почему оно так работает)) Может одна я такая зануда)) Спасибо за видео и объяснения! Максим, а есть ли у Вас видео как работать с запросами на backend и как о том, что может быть альтернативой redux в react? А то я пока не понимаю как работать со "стейтом", если его надо передать глубже, чем на одну вложенность, не передавать же дальше через Output - Input?
в нас на проекте HostBinding и HostListener с самого начала проекта нерекомендованы, насколько помню, так как давно уже о почти забыл об их существовани)) тимлид назвал их тяжелыми (в плане отработки) и устаревшими, если не ошибаюсь. То то скрытие, что в примере, делал бы через ngIf, наверное
ngIf убивает DOM елементы и убивает компонент...а при появлении будет все это снова создавать и создавать компонент. Это существенно нагружает чем HostBinding А как с директивами работаете тогда?
@@grommaks ну вместо ngIf можно и hidden. А вот по поводу HostBinding и HostListener, то нигде не нашел никаких подтверждений их проблемности(( и в группе по Ангуляру админ говорит, что такого не слышал. Возможно наш тимлид говорил только о HostBinding, а HostListener я уже сам приплел. Может ему просто статья какая-то на медиуме попалась субъективная... Не, на проекте то есть конечно единичные случаи использования. Например, директива для отлавливания кликов за пределами блока использует только HostListener и еще одна использует вижу HostBinding, хотя сама нигде не применяется) Ну в целом ото и все... А кейсы в видео понравились, то только через пол года от начала проекта задумался, действительно ли то плох HostBinding...
@@grommaks атрибут [hidden]="true" - это не свойство visibility: hiden. Запутали меня) специально ходил проверял. Этот атрибут добавляет display: none, что аналогично примеру в видео будет. и надо еще раз будет пересмотреть видео, но если там хостилистенеры в дочерных компонентах, то лучше ngIf применять, имхо.
Крутой плей лист конечно, я уже 2 года работаю с Ангуляром, но мы никогда на работе не использовали ,и ну и по этой причине никогда не вставляли ничего в верстку между тегов компонента, а делали ее внутри html файла самого компонента, насколько это правильный подход и как делать лучше, какие плюсы и минусы?
Ваш подход для маленьких проектов самое оно Мой подход на больших Мой подход сложнее в реализации и понимании но позволяет сильно переиспользовать код, что удешевляет тестирование и поддержку Если цель сдать и забыть, то можно не тратить на это время и силы
@@grommaks Да вот именно что приложение просто огромное и включает в себя много маленьких приложений, в понедельник буду готовить 5-6 шаблонов экранов, пока сервисы пишутся. Попробую применить полученные знания на практике, главное что бы начальник не сильно ругался что я от концепции написания компонентов далеко ушел.
@@JlocbBTpaHcE сразу на проект тянуть новые знания это большой риск, лучше поковыряться в пет проекте вечерком, потом понять что подходит и взять в проект
Привет, Макс! Хорошее видео :) Спасибо, что быстро и понятно представляешь материалы! Мне вот интересный такой вопрос - какое преимущество того, чтобы использовать HostBinding для установки классов нашего хоста, перед самым обычным wrapper'ом/контейнером в темплейте, которому мы будем устанавливать данный класс? Ну, например, используя то же самый [ngClass] или [class] для div'а. Также интересно твое мнение о ситуации, когда у нас есть компоненты и часто приходиться добавлять какой-то div в качестве контейнера с какими-то стилями. И я вот видел, что этот контейнер убирают вообще с этими классами, и помещают эти классы в TS-файл, используя HostBinding. С одной стороны это идея, которая может существовать - у нас нету постоянных этих wrapper'ов в компонентах, придерживаясь данного стиля. Но как я думаю об этом - это лишнее. Зачем использовать мощь Ангуляра ради таких вещей (именно лишь для устранения контейнеров в верстке), превращать это в JS-код в bundle'ах, когда можно взять нативщину HTML + class атрибут :) Будет просто и понятно + не надо будет при просмотре темплейтов открывать каждый раз TS-файл, думая "а вдруг там что-то есть". Что скажешь об этом, стоит ли оно того?
Привет) спасибо за отзыв. В компонентах HostBinding используют редко, чаще обертки делают, тут все верно Но hostBinding это способ повлиять на общий между родителем контейнер, и как понимаешь что родитель уже не будет заморачиваться, а логика будет спрятана в ребёнке, не всегда UI либу делает тот же человек что и пользуется ею… Почему нужно бороться с лишними дивами? А не нужно, до тех пор пока это не интернет магазин или блог, где Гугл будет срезать поисковые баллы за грязную верстку…если сайт приватный, то тут и заморачиваться не нужно HostBinding часто используется в директивах, о чем мы будем говорить, и ещё часто используется в svg компонентах, когда мы не можем раскидываться лишним враппером… А так всегда нужно ходить в ts файл и смотреть какие инпуты туда передаются и на что можно подписаться )
@@grommaks , а, вот оно как) Я думал, что это какие-то лишние действия, а оказывается полезная штука в этой ситуации) Спасибо за ответ! Также есть ситуация, когда у нас есть враппер для какой-то директивы, например scrollToBottom, то здесь HostBinding не поможет, как я понял. Нужно тогда будет или её динамически сетить с ТС кода, ну или же просто на сам хост повесить в родительском компоненте.
Привет Максим, досмотрел ролик до момента с тем, где ты в :host положил класс (.menu) , судя по тому, что я нагуглил, вложенность это фишка SCSS , а я делал все на CSS, то есть дальше нет смысла продолжать, мне нужно пересоздать проект?
Привет, можно просто переименовать файл на Scss и должно работать без доп настроек Можно ещё самостоятельно прописывать css код, превращать мои записи в чистый css, я там только вложенностями пользуюсь, это не сложно переписать на обычный css
@@murakami374 желательно почитать что такое scss) Все вложенности через пробел пишутся, если есть символ & то без пробела (это склейка с прошлым селектором)
@@belerafon9288 материал использует angular/cdk, причём по исходникам я смотрел что материал добавляет очень мало в оригинальный cdk, считай ui составляющую. Как это сделать без cdk хочу понять, но уже после базовых плейлистов (когда будет понятно о директивах и сервисах) P.s. Посмотрел на entry components, они уже deprecated :(
@@grommaks у тинькова есть тайга, там изобрели свои порталы, поже смотрел но до конца понять их не могу, через сервисы они управляются это да, но как то сложно.
Что-то запутался... Не правильнее ли там использовать :host(.hidden) вместо :host-context(:hidden). Клик же в примере вешает класс на хост, а не оборачивает его в этот селектор... host-context вроде же для второго предназначен... Как оно тогда отрабатывает... Ну это надо будет потестить...
Может я и напутал, хост работает только с хостом, хост контекст добавляет селектор спереди как глобальный, таким образом класс на боди будет влиять на стили
По существу в Ангуляр использовать display:none конечно можно, но все же.... Предпочтительнее думаю было бы *ngIf. Все же это ангуляр а не просто HTML & CSS в голом виде. Также, вот это слово "биндим" ... А русский и английский не ферштейн похоже. Сказать "привязываем" похоже автор не понимает. Все же, если видео заточено на обучение - то и должно нести языковую нагрузку и смыл передавать на том языке, на котором транслируется. По поводу "HostBinding" и "HostListener" в общем нормальное объяснение, за исключением вышеописанного.
Привет всем :)
Если вы случайно попали на это видео, то можно начать проходить плейлист с начала
Со знакомства с Angular czcams.com/video/IrelRVjIttA/video.html
Или с компонентов Angular czcams.com/video/U5d_FtO_3NA/video.html
А если не случайно, то приятного просмотра и спасибо за активность под этим и остальными видео у меня на канале
После просмотра 2-х последних видео, могу с уверенностью утверждать что здесь заявка на лучший контент по ангуляру в СНГ сегменте!
Спасибо за контент
Спасибо за такую крутую оценку) скоро больше контента
@@grommaks Пишу это не просто так, поскольку у меня есть опыт продакшин разработки > 1 года, но правда на angularjs, но сейчас перешли на гибрид
Оооо, взрослый контент)
наконец пошли уже нормальные взрослые темы ) у мня идея для будущих видео, это по мимо обзора концепций, делать видосы по решению типовых повседненвных задач с использованием бэст-практик, что-то типа кук-бука для Ангуляра. например как сделать несколько асинхронных запросов, когда нужно дождатся выполнения каждого из них и полученные результаты используются в следующем и когда не нужно, механизмы обмена данными между родительским и дочерним компонентом, или когда эти компоненты вообще не связаны друг с другом и т.д. ну думаю ты лучше мня знаешь с чем кажды день сталкиватся Ангуляр-разработчик
Да, по мере роста базы, так и планировал разбавлять примерами которые будут собирать концепции нескольких уроков :)
Это видео маленький пример того, что я хочу ^_^
По первому вопросу с "несколько асинхронных запросов" то тут ангуляр не при чем, это же rxjs, всякие zip, zipAll, там ничего военного. Обмен данными между компонентами тоже все просто, обычные сервисы с обсерваблами subject или behaviourSubject, в зависимости от задачи, нужно ли текущее значение, ну или ngrx, но там в доке и так все понятно. Вот и весь бестпрактис.
👋👋👋
О да, Сиси Кеэпвелл. Я не видел его 25 лет но оказалось что до сих пор помню как его зовут. Респект Макс!
Ну фамилию его я не знал даже 😺
Очень классное решение этой задачи, прям гениально)
Как всегда лайк и коммент до начала просмотра) Летим!!!
cупер, супер, супер- спасбо большое
Інформативний урок, дякую!
Давненько не було нічого нового на каналі, сподіваюсь в тебе все добре.
Долго ждал. Интересно конечно будет узнать приемущества кастомных деректив. Хочу узнать например в слайдере есть 2 кнопки next и prev в 1 дерективе есть возможность вешать по клику например 2 метода на prev и next handleNext, handlePrev или обработать сразу 2 события? Например клик и если курсор мыши не в поле зрения компонента если не ошибся mouseout то слидер будет листать слайды через 3 секи сам или взависимости от настроек в компаненте. Или нужно много деректив? Например audio player там столько событий... и там в какой-то книге шаблон применялся для плеера
Нужно делать так, чтобы пользоваться было легко клиентам такого кода, и чтобы когда нужно будет добавить новый функционал в ядро никому ничего не сломать
Все остальное вкусовщина…и специфика конкретного решения
Как всегда полезно и четко! Хотелось бы узнать будут ли видео про тесты в angular? И спасибо за труд!
Тесты будут, но по плану это через около 4х плейлистов...
Ориентировочно через пол года может начать появляться контент по тестам
Ма шаа Аллах1 брат, хорошие видео
👍 классные видео! Вдарить еще по ранимой реактовской психике 😊 (не хейчу библиотеку если что) Resolve гвардами, Reuse stratage и сборкой апки для плеймаркета с деплоем, а то народ вроде знает, что угловатый это фреймворк, а вот в чем его фреймворкость и сила до конца не понимают
Со мной в фирме работают 600 человек на angular и из них деплоями и разбиением занимаются пару человек, я не в их числе))) я больше по ООП и модульной архитектуре…вот когда ковырну описанные практики, то обязательно запишу)
Максим, благодарю за конент. Совсем недавно делал меню и остановился на том, как клик снаружи отработать.
Надо проверить, мне кажется что host-context(.hidden) тоже самое что :host { .hidden { ... }}
По ссылке на гитхабе кода урока нет, там просто пустой ангуляр проект.
Странно, проверил ссылку готового урока и код там есть, там две ссылки, первая с кодом и вторая с начальным состоянием для самостоятельной работы
Лайк и вечная подписка)))
😎
спасибо)
Очень круто, понятно как все связано, но не понятно почему оно так работает)) Может одна я такая зануда)) Спасибо за видео и объяснения!
Максим, а есть ли у Вас видео как работать с запросами на backend и как о том, что может быть альтернативой redux в react? А то я пока не понимаю как работать со "стейтом", если его надо передать глубже, чем на одну вложенность, не передавать же дальше через Output - Input?
Если плейлист с начала смотрели, то должно быть понятно) иногда нужно несколько раз посмотреть и повторить примеры для закрепления)
Cool
в нас на проекте HostBinding и HostListener с самого начала проекта нерекомендованы, насколько помню, так как давно уже о почти забыл об их существовани)) тимлид назвал их тяжелыми (в плане отработки) и устаревшими, если не ошибаюсь. То то скрытие, что в примере, делал бы через ngIf, наверное
ngIf убивает DOM елементы и убивает компонент...а при появлении будет все это снова создавать и создавать компонент. Это существенно нагружает чем HostBinding
А как с директивами работаете тогда?
@@grommaks ну вместо ngIf можно и hidden. А вот по поводу HostBinding и HostListener, то нигде не нашел никаких подтверждений их проблемности(( и в группе по Ангуляру админ говорит, что такого не слышал. Возможно наш тимлид говорил только о HostBinding, а HostListener я уже сам приплел. Может ему просто статья какая-то на медиуме попалась субъективная...
Не, на проекте то есть конечно единичные случаи использования. Например, директива для отлавливания кликов за пределами блока использует только HostListener и еще одна использует вижу HostBinding, хотя сама нигде не применяется) Ну в целом ото и все... А кейсы в видео понравились, то только через пол года от начала проекта задумался, действительно ли то плох HostBinding...
@@user-san-chous hidden это visibility hidden который не удаляет елемент из потока html, а лишь его скрывает. Посмотрите разницу между ними)
@@grommaks атрибут [hidden]="true" - это не свойство visibility: hiden. Запутали меня) специально ходил проверял. Этот атрибут добавляет display: none, что аналогично примеру в видео будет.
и надо еще раз будет пересмотреть видео, но если там хостилистенеры в дочерных компонентах, то лучше ngIf применять, имхо.
@@user-san-chous тогда я пойду ещё почитаю)
Крутой плей лист конечно, я уже 2 года работаю с Ангуляром, но мы никогда на работе не использовали ,и ну и по этой причине никогда не вставляли ничего в верстку между тегов компонента, а делали ее внутри html файла самого компонента, насколько это правильный подход и как делать лучше, какие плюсы и минусы?
Ваш подход для маленьких проектов самое оно
Мой подход на больших
Мой подход сложнее в реализации и понимании но позволяет сильно переиспользовать код, что удешевляет тестирование и поддержку
Если цель сдать и забыть, то можно не тратить на это время и силы
@@grommaks Да вот именно что приложение просто огромное и включает в себя много маленьких приложений, в понедельник буду готовить 5-6 шаблонов экранов, пока сервисы пишутся. Попробую применить полученные знания на практике, главное что бы начальник не сильно ругался что я от концепции написания компонентов далеко ушел.
@@JlocbBTpaHcE сразу на проект тянуть новые знания это большой риск, лучше поковыряться в пет проекте вечерком, потом понять что подходит и взять в проект
@@grommaks ну да в целом вы правы.
Спасибо за видео, не подскжите как позиционировать host элементы?
Есть видео по стилям в angular у меня на канале
Вроде как в файле scss пишем селектор :host и дальше верстаем
Привет, Макс! Хорошее видео :) Спасибо, что быстро и понятно представляешь материалы!
Мне вот интересный такой вопрос - какое преимущество того, чтобы использовать HostBinding для установки классов нашего хоста, перед самым обычным wrapper'ом/контейнером в темплейте, которому мы будем устанавливать данный класс? Ну, например, используя то же самый [ngClass] или [class] для div'а.
Также интересно твое мнение о ситуации, когда у нас есть компоненты и часто приходиться добавлять какой-то div в качестве контейнера с какими-то стилями. И я вот видел, что этот контейнер убирают вообще с этими классами, и помещают эти классы в TS-файл, используя HostBinding. С одной стороны это идея, которая может существовать - у нас нету постоянных этих wrapper'ов в компонентах, придерживаясь данного стиля. Но как я думаю об этом - это лишнее. Зачем использовать мощь Ангуляра ради таких вещей (именно лишь для устранения контейнеров в верстке), превращать это в JS-код в bundle'ах, когда можно взять нативщину HTML + class атрибут :) Будет просто и понятно + не надо будет при просмотре темплейтов открывать каждый раз TS-файл, думая "а вдруг там что-то есть". Что скажешь об этом, стоит ли оно того?
Привет) спасибо за отзыв. В компонентах HostBinding используют редко, чаще обертки делают, тут все верно
Но hostBinding это способ повлиять на общий между родителем контейнер, и как понимаешь что родитель уже не будет заморачиваться, а логика будет спрятана в ребёнке, не всегда UI либу делает тот же человек что и пользуется ею…
Почему нужно бороться с лишними дивами? А не нужно, до тех пор пока это не интернет магазин или блог, где Гугл будет срезать поисковые баллы за грязную верстку…если сайт приватный, то тут и заморачиваться не нужно
HostBinding часто используется в директивах, о чем мы будем говорить, и ещё часто используется в svg компонентах, когда мы не можем раскидываться лишним враппером…
А так всегда нужно ходить в ts файл и смотреть какие инпуты туда передаются и на что можно подписаться )
@@grommaks , а, вот оно как) Я думал, что это какие-то лишние действия, а оказывается полезная штука в этой ситуации)
Спасибо за ответ!
Также есть ситуация, когда у нас есть враппер для какой-то директивы, например scrollToBottom, то здесь HostBinding не поможет, как я понял. Нужно тогда будет или её динамически сетить с ТС кода, ну или же просто на сам хост повесить в родительском компоненте.
@@yevhen3934 враппер это компонент?
@@grommaks не, просто div в дочернем компоненте
@@yevhen3934 если на враппере висит директива то поможет, иначе нужно байндить через привязки компонента
Привет Максим, досмотрел ролик до момента с тем, где ты в :host положил класс (.menu) , судя по тому, что я нагуглил, вложенность это фишка SCSS , а я делал все на CSS, то есть дальше нет смысла продолжать, мне нужно пересоздать проект?
Привет, можно просто переименовать файл на Scss и должно работать без доп настроек
Можно ещё самостоятельно прописывать css код, превращать мои записи в чистый css, я там только вложенностями пользуюсь, это не сложно переписать на обычный css
@@grommaks если честно, не знаю как это переписать)
попробую просто поменять расширение на scss
@@murakami374 желательно почитать что такое scss)
Все вложенности через пробел пишутся, если есть символ & то без пробела (это склейка с прошлым селектором)
как увидеть 5 недоступных видео которые скрыто?
Дождаться их публикации, по старому графику, 2 раза в неделю, вт и птн в 10 утра
А пока они публикуются, я работаю над следующим плейлистом 😃
так так так, с такими уроками, я начинаю понимать что в этот раз мне таки поддастся ангуляр)))) За что тебе огромадное спасибо))
А про порталы будет что то? Это же меню через портал было бы интересно посмотреть.
Это cdk модуль, пока по нему не будет ничего
@@grommaks не именно материаловикий, а вообще такой патерн, для правильного проэцирования выподашек в дереве.
@@belerafon9288 материал использует angular/cdk, причём по исходникам я смотрел что материал добавляет очень мало в оригинальный cdk, считай ui составляющую.
Как это сделать без cdk хочу понять, но уже после базовых плейлистов (когда будет понятно о директивах и сервисах)
P.s. Посмотрел на entry components, они уже deprecated :(
@@grommaks у тинькова есть тайга, там изобрели свои порталы, поже смотрел но до конца понять их не могу, через сервисы они управляются это да, но как то сложно.
@@belerafon9288 спасибо за наводку) попробую ковырнуть
Что-то запутался... Не правильнее ли там использовать :host(.hidden) вместо :host-context(:hidden). Клик же в примере вешает класс на хост, а не оборачивает его в этот селектор... host-context вроде же для второго предназначен... Как оно тогда отрабатывает... Ну это надо будет потестить...
Может я и напутал, хост работает только с хостом, хост контекст добавляет селектор спереди как глобальный, таким образом класс на боди будет влиять на стили
По существу в Ангуляр использовать display:none конечно можно, но все же.... Предпочтительнее думаю было бы *ngIf. Все же это ангуляр а не просто HTML & CSS в голом виде.
Также, вот это слово "биндим" ... А русский и английский не ферштейн похоже. Сказать "привязываем" похоже автор не понимает. Все же, если видео заточено на обучение - то и должно нести языковую нагрузку и смыл передавать на том языке, на котором транслируется.
По поводу "HostBinding" и "HostListener" в общем нормальное объяснение, за исключением вышеописанного.