Angular lifecycle hooks. Методы жизненного цикла компонента

Компонент это маленькая подпрограмма, которая может быть использована другим компонентом или использовать другие компоненты.
Каждый компонент переживает этапы жизненного цикла:
- Создание
- Привязка инпутов и инициализация
- Регулярные проверки целостности верстки
- Инициализация верстки переданной от родителя (контент)
- Инициализация верстки детей (вью)
- Обновление контента и вью соответственно, по мере жизни компонента
- И удаление компонента из ДОМ
Все это отдельные темы для обсуждения, и мы поговоим обо всех тонкостях хуков и всего что с этим связано в следующих видео этого плейлиста
==============================
Код готового урока:
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...
Не забываем что SQL важен независимо чем планируешь заниматься при веб разработке, даже если планируешь быть менеджером проектов.
Курс по SQL можно найти по ссылке: • Что такое SQL? Как раб...
Спасибо что продолжаете смотреть меня и радовать комментариями.
---- Соц сети
Телеграм, где можно узнать о новых видео и получать доп контент
t.me/webDevGromMaxChannel
P.S. В youtube я отвечаю быстрее чем в telegram, буду рад комментам в youtube
----
Чтобы поддержать канал
1) Можно поставить лайк (или дизлайк, если не понравилось видео)
2) Оставить комментарий более 5 слов
3) Досмотреть видео до конца (так удержание будет выше и мне это поможет в продвижении)
4) Оставить отзыв в комментариях, что можно улучшить в видео, чтобы не хотелось его закрывать
#grommax #angular #lifecycle
Материально поддержать канал можно следующим способом
1) Перевод на карту send.monobank.ua/7oqmsFg3Y
2) Пройти опрос, чтобы помочь выбрать подходящие варианты поддержки
forms.gle/ZbFCKJSpDNYp4AMC6
Оглавление
00:00 - Введение
00:25 - Подготовка к уроку
01:19 - SOLID принциы и что такое методы жизненного цикла
02:47 - Как реализовать все хуки Angular компонента
03:47 - Очередность вызова методов жизненного цикла
06:13 - За что отвечают методы? Почему не вызвался ngOnChanges?
08:39 - Заставляем работать ngOnChanges & ngOnDestroy
10:51 - Проверяем очередность в консоли и тестируем все

[@grommaks]

Привет) Хуки жизненного цикла нужны для многих задач, в этом и в следующих видео плейлиста мы рассмотрим множество задач из-за которых Angular разработчик использует хуки А если пропустил прошлое видео, то посмотри его kzbin.info/www/bejne/iXzagqeerdJ3eMU (Как сделать компонент контекстного меню) А если пришел сюда случайно, то я собрал супер плейлист со всем курсом по ангулар, изучай его и ты обязательно прокачаешься kzbin.info/door/lDDVLu0Cj_o9Y5D2ilCtdQplaylists?view=50&sort=dd&shelf_id=1 Приятного просмотра и изучения Angular :)

[@ReginaScer]

Из всего того, что я видела, вы даёте более полный контент, спасибо )

[@russianstan]

Максим, спасибо за хороший контент! Смотрю с удовольствием. На неадекватов время и нервы не растрачивай)

[@ilgul9177]

Отличное обучающее видео. Благодарю за работу и контент.

[@oleksandrvoron_ko580]

Хороший контент для старту в Ангулярі! Дякую !

[@nouchance]

Когда я слышу о "Хуках" я всегда вспоминаю Доту ( Butcher Skill 1)

[@grommaks]

Думал как красиво сделать превью...и писать метод жизненного цикла оказалось не очень читаемо и нельзя пирата из ангулара сделать)

[@nouchance]

@@grommaks Спасибо Максим! Планируете ли вы Курс по Ангуляру?

[@grommaks]

@@nouchance может вопрос про курс по nestjs?))) потому что вопрос под курсом по ангулару звучит странно о курсе по ангулару) По nestjs не планирую

[@awesomeuser789]

Отличный контент, продолжай, не останавливайся! Как всегда с меня лайк, коммент, подписка

[@user-wq4jl9io4s]

Cool

[@Sergio09051977]

спасибо

[@konstantinsurnin855]

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

[@grommaks]

Как нормализуется обстановка, то я продолжу этот курс и там планировалось делать Уроки по unit тестам

[@Brinzovik]

Спасибо! Хуки жизненного цикла ангуляр виды какие есть бывают жизненный цикл хук angular hooks lifecycle

[@romanryaboshtan9270]

привет, ты сталкивался в Neste с такими проблемами 1) Bidirectional circuit. т.е двунаправленная циклическая связь 9:20 2) forwardRef()09:19 Я использую Sequelize, это коммерческий проект У меня есть таблица Service, кот. связана связью Много ко многим с двумя таблицами сразу: Unit и CatUnits

[@grommaks]

Не, я большие проекты на nestjs не делал, сейчас вышло так что работаю с .net

[@romanryaboshtan9270]

@@grommaks Хорошо спасибо

[@romanryaboshtan9270]

@@grommaks Проблему уже решили, за счёт упрощения структуры БД

[@nicearthes6170]

привет, планируешь делать курс по реакту?

[@grommaks]

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

[@user-dd9uh9lc5i]

@@grommaks Где вообще находишься во время войны? И как сейчас обстановка у тебя. Возможно есть уже понимание о сроке выхода продолжения курса по ангуляру и было бы круто есть бы сделал курс на подобии react samurai я думаю комьюнити Angular-щиков (как минимум их) тебя бы запомнило на долго. Мира и успехов тебе

[@grommaks]

@@user-dd9uh9lc5i сейчас в центральной Украине, через месяц скорее всего появятся новые видео на канале.

[@user-dd9uh9lc5i]

@@grommaks желаю тебе успехов и всячески буду поддерживать твой контент "Все буде Україна" завтра в час при своем плохом уровне английского буду проходить совбез в ITOP1000 тех задание сдал с отличием правда со второго раза так как тз было размытое

[@unknown6535]

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

[@grommaks]

Все верно, следующие 4ре видео раскрывают этот вопрос, продолжайте смотреть видео из этого плейлиста

[@user-fx3of4zx6s]

"Жизненный цикл бывает не только у компонента , но и у директивы" ?????? Понимание есть того что такой сущности как компонент в Ангуляре нет ? Компонент это всё таже директива только со вьюхой

[@grommaks]

Компонент это наследник от директивы, так что есть такая сущность... Это одно и то же что сказать: "Компонента не существует, компонент это тот же JavaScript объект только немного сложнее"

[@user-fx3of4zx6s]

@@grommaks ты называешь наследника полноценной сущностью ? Ты действительно свой ООП изобрел))

[@grommaks]

@@user-fx3of4zx6s много агрессии, у меня ничего не поменялось с прошлого коммента…

[@user-fx3of4zx6s]

@@grommaks ну это ты так мои слова воспринимаешь как агрессию , я не вижу в них ничего агрессивного , скорее всего ты просто убежден в своем и другого слышать не желаешь , боишься критики видать как огня

[@grommaks]

@@user-fx3of4zx6s проверил все ли хуки работают в директиве. Да все работают, и даже Content / View хуки Критику я воспринимаю, не воспринимаю "тыканье" и претензии типа "Понимание есть что ..." Компонент наследуюется от директивы. Говорить о том, что компонент не существует как самостоятельная сущность это как говорить что массивов не существует, а все это объекты. Мне как клиенту кода не важно какая реализация внутри, кто от кого наследуется. Я использую Компонент или массив и если завтра появится еще слой абстракции между ними или они будут разнесены на разные реализации, то это лишняя информация для новичка В видео я имел ввиду что хуки есть у сервисов и директив тоже, не только у компонентов. То что компонент это наследник от директивы я говорил в одном из первых видео первого плейлиста. P.S. Директива имеет весь набор хуков, компонент их наследует Критику я воспринимаю Спасибо за почти конструктивную критику 😁