0: Буквально вчера вышла новая версия ангуляра. Теперь ангулар 8, и по этому поводу я решил записать отдельный небольшой курс, где я расскажу про основы ангуляра и про некоторые более глубокие его моменты. И перед тем, как

1: Начнём напомню, что если вам полезен данный контент, если вам нравится видео, то обязательно подписывайтесь на меня на YouTube и вконтакте буду этому очень рад, а также оставляйте комментарии, ну а мы приступаем и давайте начнём с решения вопроса, что же такое?

2: Энгури, зачем он нужен? Энглер это джаваскрипт фреймворк, и он существенно отличается от view или реакта, потому что это очень комплексное решение, которое, по сути, не требует никаких дополнительных инструментов и

3: И внутри энглера все уже есть. И сразу же давайте рассмотрим некоторые его возможности, потому что, безусловно, все мы не сможем рассмотреть, но сделаем по результату данного видео небольшое приложение, где разберём пару сущностей и

4: И как они взаимодействуют для того, чтобы начать работу с энглером, нам потребуется инструмент, который называется cli, его можно установить, набрав в консоли команду эмпиэм инсто минус джи Энглер cli, то есть просто отсюда скопировать.

5: Инструмент находится по адресу силай точка Энглер, айо и вставьте её в консоль. Здесь также есть документация, как пользоваться этим инструментом. То есть в принципе, по этой ссылке тоже все находится. И здесь вы можете найти большое количество

6: Случайно нажал большое количество команд, которые поддерживают данный силай. То есть есть различная аналитика, бьют система, добавление скриптов, документация, конфигурация и так далее. Пока что мы будем просто разбирать установку.

7: Проекта и для начала необходимо выбрать папку, где мы установим проект, и после этого набрать команду энджи, что означает Энглер сокращённо и дальше с помощью команды new мы будем генерировать новый проект, который, например, я назову

8: Engine YouTube

9: Здесь я нажимаю enter и дождусь, пока Энглер мне все установит, но для начала он меня спрашивает, хочу ли я добавить роутинг для проекта здесь я нажму н. Потому что мы роутингом пользоваться не будем, дальше выберу препроцессоры.

10: Я буду использовать css и все. Дальше. Жду, пока все установится. После того, как установка будет завершена, вы увидите примерно такой console, да, где написано будет, что с install guide и так далее, да, различные скрипты.

11: Прочее и после этого мы можем открыть редактор кода и посмотреть, что у нас получилось для этого урока, я буду использовать web storm, и я уже открыл данный проект, и сейчас давайте познакомимся с тем, что же у нас энгу нагенерировал

12: И чем мы здесь можем пользоваться для начала? Если мы посмотрим на проект, то увидим в принципе базовую структуру, но увидим огромное количество дополнительных файлов. И для начала стоит ещё раз напомнить, что энгуль оо не просто библиотека.

13: Как view или react это целый фреймворк, поэтому его инфраструктура намного более серьёзная и комплексная помимо этого в корне приложения есть папка e il её и это and to and тесты их мы пока трогать не будем, как обычно есть.

14: Но модиус, которая позволяет работать данному приложению и содержит в себе исходный код библиотек Папке source мы перейдём чуть позже эдитор конфиг служит для разработки и поддержки 1 стилизации в редакторе гит игнор есть.

15: File Энглер точка джейсон и этот определённый файл конфигурации, но обычно для обычной разработки мы его не трогаем. То есть в текущем уроке это также не будет исключением. Мы также его не будем касаться, но, в принципе здесь вручную можно менят

16: Какие-либо конфигурации. Как видите, здесь их много. Как раз-таки здесь, например, подключается файл, styles точка сиэсэс. Есть главный файл, который запускается и так далее. И давайте посмотрим, что ещё из важного есть.

17: Например, есть файл package точка джейсон, у которого есть определённые скрипты, такие как, например, старт для запуска, девелопент, версии билт для запуска продакшн, версии, различные линтеры, которые используют тест lindt, тесты.

18: И anton тесты что касается зависимости, то, по умолчанию Энглер уже устанавливает нам модуль с анимациями, модуль с базовым функционалом, модуль с формами и роутер но.

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

20: Устроен у нас на библиотеке Рык джес на zone jazz ну это такие более менее системные как бы пакеты, и дальше есть большое количество деф депенденсис, которые позволяют работать ядру энкуле, то есть сюда входят различные

21: Тестовые системы, такие как джасмин, карма и так далее. Есть определённые компиляторы и прочее, что я ещё не сказал ранее, но при этом, что очень важно, Энглер работает на тайп скрипте, поэтому в

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

23: Окей. Что касается пэка джисона, мы, в принципе разобрались. Остальные файлы рассматривать не буду. Они все системные, такие, как, например, ттс, конфиг, ттс, lindt и так далее. Что более интересно, есть папка, source, где хранится все наше приложение и

24: И какие файлы нам здесь стоит понимать на самом деле все, поэтому давайте пробежимся по ним по отдельности иконка и index html тут в принципе ничего особенного нет. Помимо того, что в файле индекс, точка html присутствует.

25: Обычный тег апп рут. Это главный компонент, который запускает все наше приложение. И запомните, что здесь есть апп рут, потому что чуть позже мы будем понимать, что это такое и как оно запускает приложение. После этого есть файл main точка ттс и

26: Это главный файл, который загружает все наше приложение. Здесь вот какая идея. Мы импортируем функцию платформ браузер дайнемик, которая при вызове возвращает нам объект, у которой есть функция бустрап молью и данная функция

27: Она запускает модуль, который называется апп модуль. Если же мы посмотрим, откуда импортируется модуль, то мы перейдём в папку апп и здесь найдём файл апп модуль, который, в свою очередь, представлен в виде обычного энгу модуля. То есть

28: Это класс, у которого есть декоратор энджи модю и в поле бутстрап мы передаём компонент апп компонент. То есть это самый главный компонент, который позволяет загружаться нашему приложению.

29: В модуле, помимо этого, мы регистрируем другие модули, например, браузер модуль, который позволяет работать энглеру в браузере и регистрируем определённые компоненты в поле declarations. Что касается непосредственно самого компонента, то, как видите, у него есть

30: Оператор компонент и есть поле селектор, где как раз-таки указано uproot то, что мы видели с вами в index html, то есть здесь на самом деле ситуация очень простая с помощью модуля мы регистрируем компонент и все приложение у нас представлено в виде

31: Компонентов. Просто добавляется лишний слой абстракции в самом классе компонента есть поле title, которое равняется пока что обычной строке. И в принципе, больше тут ничего нет. Ну а любые компоненты в энгере они содержат в себе по

32: Умолчанию несколько параметров, например, template url, то есть в данном файле хранится шаблон этого компонента, мы можем его раскрыть и посмотреть, как он выглядит. Ну и, соответственно, стили, то есть стили, здесь также прописываются отдельно, хотя

33: Есть возможность прописывать их прямо внутри декоратора, но рекомендуется выносить их в отдельные файлы для того, чтобы больше декомпозировать проект и иметь большую гибкость к управлению.

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

35: Я этого не буду, давайте лучше приступим к старту и разработке приложения. То есть здесь я напишу команду npm start. Или же я могу набрать команду энджи серф это одно и то же. И в итоге мы получим собранное наше приложение.

36: На локо хосте 4200.

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

38: Лишние файлы и уберу вообще весь код отсюда в апп компонент точка html, то здесь мы увидим абсолютно пустой проект, и это то, что нам и нужно теперь давайте зададим какую-нибудь базовую разметку сразу же, чтобы на практике разобраться как Энглер.

39: Работает и, допустим у меня будет корневой класс контейнер.

40: Так, немного не то пишу, и у него будет заголовок h1, где давайте, допустим, в Двойных скобочках выведем переменную апп тайтл, которой, как видите, пока что у нас нет. То есть нам необходимо её создать и создаём мы её в

41: Code компонента прямо внутри класса апп тайтл допустим, это будет Энглер апп туду аппликейшн.

42: Такая строка. И сейчас, если мы посмотрим, то мы увидим, что мы получаем эту строку прямо внутри компонента. То есть таким образом работает интерполяция, она забирает определённые поля у класса и передаёт их в шаблон. То есть они здесь доступны даже без ключевого слова.

43: Теперь давайте, допустим, зададим какие-нибудь стили данному компоненту, и для того, чтобы немного ускорить процесс, я их буду копировать из того приложения, которое уже подготовил, чтобы не тратить время на стили, потому что материалы у нас

44: Будет много в этом уроке и хочется уложиться примерно в час окей, мы получаем определённые стили. Вы, кстати, можете поставить на паузу и просто их переписать. Тут нет ничего сложного. А учитывая, что мы пишем внутрисе, то у нас доступны вот такие вложенности. Окей, мы

45: Получили базовую структуру. И сразу же я предлагаю двинуться дальше для того, чтобы посмотреть, как Энглер взаимодействует с другими компонентами. Кстати, пока файл апп компонент спёк мы удалим, нам тесты, в принципе, здесь не нужны для

46: Того, чтобы создать новый компонент, мы можем поступить 2 способами. 1 способ сложный, то есть писать все своими руками. И 2 способ более удобный, потому что, как я говорил, Энглер это фреймворк, и мы можем пользоваться его возможностями. Для этого я открою новый

47: Мина и напишу команду энджи джи. Это сокращённо от generates, что означает компонент, и после этого напишу название компонента, который я хочу получить, например, тудус.

48: И теперь, если я нажму enter to, смотрите, что произойдёт Энглер. Мне выдаёт сообщение, что у нас был создан новый компонент, и сейчас в Папке апп. Если мы посмотрим, то у меня появляется папка тудус, если же мы её раскроем, то здесь

49: Есть базовая структура компонента, то есть это его шаблон css Спека, можно её удалить. И файл называется компонент тудус компонент точка ттс. То есть это самый базовый компонент, и, как видите, у него

50: Есть пока что такая структура, которую мы с вами сейчас разберём. Более того, у нас автоматически был подключён файл тудус компонент в файле апп модуль точка ттс и был добавлен в поле declarations.

51: Хорошо, теперь смотрите, как мы пользуемся этим компонентом. Если я добавлю тудус в словарь, чтобы он не подчёркивал мне и продолжу. У нас есть компонент тудус, компонент. Давайте для начала быстро рассмотрим его структуру и перейдём к Функ.

52: Функционалу любая сущность в Энглер это класс и компонент не исключение. То есть всегда мы экспортируем какие-либо классы, но для того, чтобы Энглер понимал, что это за класс, мы добавляем ему декораторы и в нашем

53: Случае это, например, компонент. У компонента должен быть селектор тимплей, турель стили, причём это массив, где мы можем перечислять множество стилей и так далее. Дальше у компонентов присутствует, например, лайфсайкл хуки, то есть it.

54: Определённые жизненные этапы компонента, которые он переживает. И в Энглер считается хорошей практикой. Если мы указываем определённые интерфейсы для того, чтобы указывать эти лайфсайкл. Есть. В принципе, мы можем не писать здесь имплемента и метод энджи, он in

55: Будет все равно вызван, но в нашем случае он по умолчанию его добавляет. И метод энджи нинит вызывается тогда, когда компонент был проинициализирован. Но после конструктора, учитывая, что у нас есть теперь селектор апп тудус, мы можем

56: Его использовать, например, в компоненте апп компонент html, и здесь я просто превращаю этот селектор v обычный тег если мы посмотрим, то здесь мы увидим строчку тудус ворк, потому что в шаблоне у нас написано такой.

57: Текст. Теперь давайте займёмся структурой данного компонента, чтобы показать какой-нибудь функционал, и корневым элементом у нас будет tech уэль, где у него будут несколько элементов ли, у каждого элемента ли будет определённая структура?

58: Давайте пока что временно мы здесь напишем тёк стронг.

59: Допустим, единица. И пока просто напишу здесь туду 1.

60: И просто скопируем данную разметку.

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

62: Script внутри данного компонента для этого в компоненте апп точка компонент ттс я создам, допустим, публичную переменную, которую назову тудус, и сразу же хорошей практикой считается.

63: Типов данных массивов. То есть это у нас будет массив, состоящий из определённых элементов. Давайте сразу же укажем, каких элементов для этого я буду экспортировать интерфейс, который назову туду, и у него будут несколько полей поле id.

64: Типом number поле title типа string поле комплитед.

65: Типа булиан и поле date, которое необязательное. То есть я могу поставить здесь вопрос, и оно будет типа anne. То есть это мы описали определённый 1 элемент внутри массива, для того, чтобы указать его тип.

66: Ставлю двоеточие и говорю, что этот массив у нас будет представлен в виде массива из элементов туду, и теперь мне web storm подчёркивает данный объект как невалидный, потому что у него есть 3 обязательных поля поле i.

67: Поле title, допустим, купить хлеб.

68: И поле комплит по умолчанию false.

69: Мы также можем добавить поле date и, как видите, мне вебшторм все подсвечивает. То есть это уже удобство определённого тайпскрипта. Я добавлю здесь 3 элемента, у каждого будут разные айди, разные тайтлы, масло и пиво. Все.

70: Стандарту, допустим, 2 элемент у нас будет сделан. И в принципе, все. Теперь у нас массив тудус готов, как нам теперь передавать из апп компонента в тудус компоненты. Этот массив для начала в тудус компонент нам необходимо обозначить

71: Что мы принимаем какой-либо массив. И для этого нам нужно использовать декоратор, который называется импут. Кстати, он сразу же импортируется из библиотеки энгури. Здесь мы пишем название того элемента, который мы хотим получить, то есть наш

72: В нашем случае переменная тудус типа туду, массив, все эти интерфейсы, они у меня сами импортируются из по вебшторму, но, как видите, пути, они добавляются, и вы можете их копировать, и

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

74: В квадратные скобочки. Давайте я нажму энтер и сюда я передам тудус.

75: Почему мы оборачиваем данную переменную в квадратные скобки? Все дело в том, что в Энглер есть определённая система внутри шаблона, которая обозначает, что и как нам нужно делать. То есть, если мы хотим забайндить какую-то переменную

76: Мы оборачиваем её в квадратные скобки. Если мы хотим прослушивать какое-то событие, то мы должны обернуть её в круглые скобки. И в принципе, на этом система заканчивается. Теперь мы знаем, что мы принимаем в компоненте туду, массив тудус и даль.

77: Мы можем вывести его в цикле, поэтому я удалю повторяющийся элемент, и здесь для того, чтобы воспользоваться циклом, мы будем пользоваться директивами, но те директивы, которые в Энглер меняют структуру html, начинаются со звёздочки и дальше.

78: Директива называется engine for здесь на каждой итерации с помощью ключевого слова лет я буду создавать переменную туду из массива тудус. Также мне потребуется, например, переменная и которая является индексом и

79: В теге strong я буду выводить с помощью интерполяции переменную и + 1 для того, чтобы не показывался индекс единицы, а вместо строки туду я буду выводить туду тайтл и вот что уже здорово, как видите.

80: Из за того, что мы прописали интерфейс web storm мне уже подсказывает, какое именно поле у меня присутствует в этом объекте, то есть он понимает взаимосвязь и сразу же делает разработку намного проще. Как видите, сейчас мы получаем уже готовый список, и теперь

81: Теперь было бы неплохо его стилизовать, но для начала давайте зададим ему определённую структуру. То есть я здесь все оберну в текс, пан.

82: Дальше внутри спана у меня будет тег импут, и он будет являться чекбоксом.

83: Дальше будет тег strong и допустим, после стронга у меня будет выводиться тайтл, ну а после того, как span закончится здесь, в теге смол, я буду выводить определённую дату давайте пока здесь напишем туду, дейт.

84: Таким образом, и дальше у меня будет кнопка с классом рм, где я буду выводить тиль символ таймс. Окей. Теперь, если мы посмотрим, то увидим, что у нас появляется вот такая структура, которую

85: Было бы неплохо стилизовать, для этого я также воспользуюсь уже готовыми стилями, и вы просто можете их скопировать.

86: То есть у нас есть список оэль, и дальше мы задаём ему просто определённые стили.

87: Если мы сейчас сохраним, то получим уже относительно неплохой шаблон, но также мне потребуется здесь ещё несколько классов, я их скопирую.

88: И вставлю. То есть эти классы мы также будем использовать. Теперь, если мы посмотрим, то мы получаем уже относительно красивую вёрстку, но по какой-то причине данная кнопка у меня по другому отображалась, когда я делал стили. Поэтому что мы можем сделать?

89: Для класса рм, например, как быстрый хак добавить display flex justify content center и align items center.

90: Да ну, теперь это выглядит все более менее прикольно, хорошо разрабатываем наш список дальше и у нас есть чекбокс, который, безусловно, должен откликаться на поле комплите, то есть если он находится в значении true, то, во первых, нам.

91: Можно добавить класс зачёркивания это класс дан и также поставить чекбокс в нужный стейт. То есть здесь мы можем воспользоваться атрибутом чект, но учитывая, что в него мы будем передавать некоторую динамическую сущность,

92: То мы его buddy на объект, туду комплитед, и в случае, если у нас туду комплитед, то тогда он должен быть поставлен в чект. Это 1 этап, 2 этап, нам необходимо доба

93: Класс и в Энглер это делается очень просто мы пишем класс, дальше указываем через точку название класса, в нашем случае это dawn и дальше мы прописываем условия по которому его нужно добавить в нашем случае

94: Это просто туду комплитед, то есть также байдим это специальный шоткат. Если мы сейчас посмотрим на результат, то мы увидим, что у нас зачёркивается тайтл. Это тоже хорошо.

95: Теперь давайте посмотрим на дату, потому что выглядит она, мягко говоря, не очень и было бы неплохо её отформатировать и если бы мы использовали другой фреймворк, например, view джис или реакт, мы бы писали свою логику или бы использовали библиотеку.

96: Но в Энглер все намного проще мы можем перейти в документацию и перейти в поле апи и здесь написать, допустим, слово pipe.

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

98: Забитые определённые форматы дат. Как видите, мы их можем использовать различные. Есть возможности по таймзоне, по локализации и так далее. То есть возможностей очень много. Но для того, чтобы применять пайпы, мы используем верти.

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

100: Версию даты и как вы понимаете, мы можем использовать огромнейшее количество форматов. То есть тут все можно доступно прочесть и мы получаем вот такую конструкцию. Теперь давайте рассмотрим как Энглер за

101: Взаимодействует с другими компонентами. И в начале мы посмотрим с вами 1 подход, а потом разберём более правильный подход и рассмотрим это на примере чекбокса. То есть сейчас, если мы кликаем, то ничего не зачёркивается, потому что нам нужно изменить

102: Состояние этого массива в родительском элементе. Для начала нам необходимо отследить, когда у нас изменяется чекбокс. Для этого мы добавляем событие.

103: В круглых скобках чейндж. И здесь мы описываем тот метод, который мы хотим вызвать. Допустим, метод будет называться он чейндж, куда мы будем передавать туду айди.

104: Теперь этот метод нам необходимо создать в туду компоненте, здесь и мы знаем, что этот метод принимает id типом number. Далее нам необходимо сказать родительскому апп компоненту, что

105: У нас произошло какое-то событие, и мы хотим изменить массив тудус конкретно 1 его элемент. И для этого в Энглер присутствует специальный декоратор, который называется аутпут, который позволяет аутпут ть определённые события. Он так

106: Импортируется из Энглер кор и, допустим, переменную, которую я создам, будет называться он тогл.

107: Она будет равняться новому экземпляру класса event эмиттер, который мы также должны импортировать из библиотеки Энглер кор, и мы знаем, что тип дженерик будет number.

108: Теперь мы знаем, что у нас есть приватная переменная, он тогол, у которой есть свойство, называющееся имит, и сюда мы просто передаём тот id, который мы хотим заэмитить, теперь запомните название он тогол и в апп компоненте.

109: Компоненту апп тудус мы можем, учитывая, что мы слушаем какое-то событие, то мы оборачиваем его в круглые скобочки и называется оно он того. То есть, как видите, также все подсвечивается. Ну и, допустим, метод я буду вызывать он того, куда я должен передать.

110: Специальный символ доллар ивент, что означает, что мы будем передавать в него некоторое событие и сейчас в апп компоненте я просто реализовываю метод он тогл, где я буду принимать id типом number и если.

111: Посмотрим в консоли на этот number.

112: На id.

113: То мы увидим, что у нас появляется новое значение того id, по которому мы кликнули, и это значит, что мы можем все менять. Соответственно, дальше напишем простую логику.

114: Допустим, конст индекс равно в начале мы хотим найти индекс того туду, который необходимо изменить тудус файнд индекс, где t id будет совпадать с id и дальше все, что мы будем делать, массивы тудус.

115: По индексу индекс мы будем менять поле комплитед на противоположное.

116: И больше нам ничего не нужно делать, потому что дальше Энглер за всем этим будет следить и автоматически менять нам шаблон. Мы можем в этом убедиться, если обновим приложение и будем нажимать на чекбокс. Как видите, все работает замечательно. И у нас действительно

117: Меняется логика, то есть добавляется класс и меняется сам чекбокс. Окей, это 1 этап. И, как вы понимаете, кнопочку удаления можно таким же способом реализовать. Но, как я говорил, мы будем делать более правильный подход и

118: На самом деле для работы с данными в энгере присутствует специальная сущность, которая называется сервисы. Для этого я в Папке апп создам папку новую, которую назову шерт, то есть нечто, что можно расшарить между другими.

119: Сущностями и в корне я создам файл, который назову тудус точка сервис точка ттс. Кстати, обратите внимание, как у нас пишутся названия файлов. То есть если это модуль, пишется название

120: В начале апп, а потом пишется название того, что это модуль либо компонент, либо в моём случае сервис. И, как я говорил, любые сущности у нас являются классами и мы сразу же получаем нужное название класса. Это тоже важно для

121: Ставил гайды для того, чтобы Энглер определил, что это сервис. Мы должны использовать декоратор, который называется инжекта.

122: Куда мы должны передать свойство, которое называется provided in root для того, чтобы он был автоматически зарегистрирован и мы не должны были его регистрировать в модуле и дальше в этом сервисе. На самом деле мы будем хранить список всех туду.

123: То есть мы можем вынести отсюда данный интерфейс и указать его в сервисе, потому что он нам потребуется здесь. Ну и в принципе, их можно хранить рядом с сервисами. И также у нас будет публичная переменная тудус тип.

124: Tudo и по умолчанию пока что мы забьём дефолтное значение, которое у нас есть в апп компоненте. То есть, в принципе можно все это было вырезать таким образом. Теперь апп компонент у нас немного некорректен, потому

125: Потому что у нас нет приватной переменной тудус, и что мы делаем? Мы берём он тогл, вырезаем его и переносим сразу же в туду сервис. То есть в сервисе мы будем хранить всю логику, которая относится именно к туду, и он

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

127: Остальное, как он будет взаимодействовать, нам нас не будет волновать, потому что у нас есть сервис и апп компонент мы на этом больше не трогаем. Теперь переходим в компонент тудус компонент. Здесь нам необходимо поправить импорт.

128: Tudo, но для начала мы вообще удалим все это лишнее. То есть это нам не потребуется. Сейчас нам необходимо оптимизировать импорты, потому что много чего ненужного. И у нас есть сейчас ошибка, то есть пока что

129: У нас такого метода нет, но у нас есть сервис, и для того, чтобы его инжектировать в энгере реализована концепция депенденси инжекшн в конструкторе мы пишем слово прайвет, можно в принципе и public использовать дальше название.

130: Переменная, например, тудус сервис, двоеточие и тип данного сервиса тудус сервис. И теперь у нас есть приватная переменная тудус сервис. Дальше для того, чтобы компонент работал, потому что сейчас, если мы

131: Смотрим то у нас ничего нет, и это логично, потому что мы больше не передаём никакого массива, однако сейчас в шаблоне

132: Если мы будем обращаться не к массиву тудус, а к массиву тудус сервис точка тудус, то, как видите, все поправляется внутри шаблона и, как видите, сейчас у нас восстановлен функционал, кроме галочки чект.

133: Поэтому нам необходимо его вернуть. То есть в методе он чендж. Вместо того, чтобы вызывать зис, он того, мы будем вызывать зис туду сервис. И у этого класса есть метод, он того, куда мы передаём просто id.

134: Сохраним. И, как видите, у нас, я хотел сказать, что все работает, но на самом деле не совсем так. То есть пишется, что this to do сервис он того is not a function. Так, но

135: Все должно быть хорошо, поэтому если я перезагружу страницу, да, то сейчас, как видите, никакой ошибки нет, видимо, там какой-то кэш собрался. То есть сейчас все работает корректно и при этом у нас нет больше вот такого сложного взаимосвязи между компонентами. Все рабо.

136: Работает отдельно. Компоненты и сервисы тоже самое. Давайте реализуем для удаления туду, то есть для кнопочки button мы добавим событие клик и будем вызывать метод remove туду, куда будем передавать туду. Ай.

137: Данный метод нам нужен в классе, он принимает id туду, и мы будем вызывать туду сервис, но для начала необходимо эту функцию реализовать.

138: Id тип number и мы просто будем переопределять массив тудус на this тудус филтер, где t id не будет совпадать с тем id, который мы передали.

139: То есть это самая базовая логика, и в компоненте мы просто вызываем туду сервис, ремув туду. По id id, если мы сохраним и будем удалять, то, как видите, все удаляется, однако, когда у нас нет списка, нет ни

140: Такого текста, и было бы неплохо его добавить. Безусловно, в энгере это делается очень просто. И для этого у нас есть директива звёздочка энджи иф, где мы можем спросить, если в тудус сервис тудус ленд, что-то

141: Есть, то тогда мы показываем данный блок, а иначе точка с запятой лс. Допустим, мы будем показывать блок no тудус. Дальше нам нужно создать этот блок и обозвать его для этого.

142: Мы используем компонент энжи темплейт и дальше через решётку мы его называем допустим, ноу тудус и здесь в параграфе п. У которого могут быть инлайн стили например, txt line центр мы напишем ноуту.

143: Дуна, например. То есть идея в том, что если данное условие не срабатывает, то мы показываем другой блок и блок, мы должны обернуть в ng темплейт, а внутри него мы уже описываем какой-либо код окей, если

144: Мы сейчас будем удалять то, как видите, у нас нет никаких тудус и это хорошо. Но как теперь нам дальше разрабатывать приложение, потому что было бы неплохо что-то загружать с сервера и для этого

145: Мы будем использовать json плейсхолдер, где есть вот такая ссылка, которая возвращает нам тудус в нужном формате, но как Энглер работает с различными бэкэндами и Апикова для этого у нас уже есть.

146: Сервис и давайте по умолчанию. У нас массив тудус будет абсолютно пустым.

147: Дальше, как я говорил, в энгуре уже все есть, и для этого действительно у него присутствует библиотека, позволяющая работать с http запросами. Для этого мы инжектируем в конструктор сервиса, допустим, переменную http тип.

148: Http client, который мы должны импортировать из библиотеки Энглер, коман, слэш, эйчтитипи. И дальше, допустим, у нас будет метод, который будет позволять грузить эти туду. Я его назову Феч тудус, он ничего

149: Не будет принимать и дальше мы будем обращаться к приватной переменной зис http и как видите, у него есть большое количество различных методов, то есть под пуст точнее

150: Put post json пи. Например патч Гетт делит мы можем создавать свои собственные реквесты, то есть это очень гибкий инструмент, но мы будем делать метод get, и здесь, как в тайпскрипте, нам нужно указать, что мы будем

151: В итоге получать. То есть это у нас будет туду массив и по ссылке, которую мы скопировали с сайта. И по сути, мы можем вернуть данный стрим. То есть это все нам возвращает некоторый рекс дж стрим.

152: Здесь мы можем написать, что за тип у него, то есть это обзер с дженерик типом туду, пустой массив и обзер импортируется из библиотеки Эрикс джиэс, но учитывая, что мы работаем с внутренней переменной тудус, то когда загру

153: Грузятся эти данные. Было бы неплохо их сохранить в этом массиве. Поэтому у любого стрима мы можем вызвать метод пайп, куда я передам метод тёп. Он импортируется из рекс джис операторс. Здесь я принимаю некоторую колбэк функцию

154: И все, что я буду здесь делать приватной переменной тудус буду добавлять значение тудус, которые мне приходят в из бэкэнда. Однако сейчас у нас есть метод Феч тудус, и мы можем его

155: Использовать, то есть для этого в методе энджи он инет. То есть это тот момент, когда компонент стартует, я обращаюсь к тудус сервису и вызываю метод Феч тудус. И когда данный метод выполнится, мы можем

156: Него подписаться как на обычный стрим с помощью функции subscribe. И здесь мы укажем, что мы загрузили все переменные и нам нужно допустим флаг лоадинг поставить значение false, то есть по умолчанию у нас будет флаг лоадинг.

157: Типа булиан, и он в начале у нас будет в true, то есть показывать определённый лоудер, но как только все завершится, мы будем говорить, что this лоудинг у нас будет находиться в значении false, и мы будем показывать.

158: Некоторый контент страницы. И сейчас нам нужно поправить немного код. Допустим, все мы обернём в некоторый дифф. Ну и здесь давайте немного упростим себе конструкцию, то есть напишем, если не лодинг.

159: То тогда мы будем показывать этот дифф. А если, допустим, лодинг, то есть энджи иф лодинг, то тогда мы будем показывать строчку, например, loading. И если мы посмотрим на приложение, то мы

160: Видим, что у нас есть какие-то ошибки, потому что написано, что мы не можем инжектировать эйчтипи клайнт, так как нам необходимо этот модуль зарегистрировать в файле апп модуль точка ттс в массиве импортс написать

161: Client. Module. Теперь, если мы сохраним, ну, импортируется он из библиотеки энгла коман эйчтитипи, то мы увидим, что у нас все работает, причём у нас есть большое количество тудус, поэтому давайте его ограничим здесь.

162: Написав, например, квери параметр лимит равно 3, чтобы загрузить всего 3 туду. И сейчас, как видите, у нас сразу же появляется массив тудус, но для того, чтобы проверить, как работает загрузка, мы можем

163: Очень просто это сделать, если раньше мы добавляли, например, set timeout, то тут начинает играть прелесть реджиса. Мы можем добавить пайп. И, например, функцию delay, которая как раз-таки за нас добавит некоторую задержку, например, на 2

164: Секунды, а delay импортируется из операторов. И сейчас мы видим, что есть явно лодинг, а потом уже появляются нужные нам туду, которые прекрасно отрабатывают

165: Теперь давайте сделаем другой компонент, позволяющий нам добавлять новые элементы туду. Только я здесь уменьшу задержку. Например, поставлю 500 миллисекунд. Для этого я в начале создам новый компонент, то есть мы

166: Это знаем, как делается с помощью engine компонент. Я, допустим, назову его туду форм, по моему, там можно написать параметр скип тестс, но я не уверен, через 2 дефиса, что он так называется.

167: Хотя, судя по всему, действительно я угадал, да, то есть, как видите, у меня тесты не сгенерировались за счёт этого флага. Хорошо, теперь мы в апп компоненте добавим просто этот компонент апп тудус форм и по

168: Смотрим, как это все выглядит. То есть у нас есть параграф пока что, который нам необходимо изменить на нужный шаблон. Давайте я пока все закрою и в шаблоне я напишу корневой элемент диф. Дальше у нас будет элемент импут, тип тёк.

169: Давайте допустим здесь добавлю плейсхолдер, допустим it туду тайтл и, например, у меня будет кнопочка, которая будет позволять добавлять этот элемент button it туду.

170: Теперь давайте добавлю немного стилей и я также их скопирую для быстроты. То есть вы можете посмотреть, что здесь за стили ничего необычного, и это просто влияет на некоторую визуализацию. Да, если мы посмотрим, то мы получаем вот такую

171: Необычную форму, почему необычную? Не знаю. Ну потому что она внизу, наверное, находится. Теперь как нам сделать так, чтобы мы при набирании какого-то текста нажимали это туду и туду добавлялся в список для

172: Этого мы можем рассмотреть следующую возможность в энгере, которая называется энджи форм и вообще.

173: Безусловно, мы будем пользоваться энджи формой, но непосредственный концепт называется engine модель, которая позволяет отслеживать состояние импута и создавать to way байндинг. Для начала в этом компоненте нам необходимо создать какую-то модель. Я назову её тайтл, например.

174: Это будет обычная строка типа string. И дальше для того, чтобы добавить энджи модель, я пишу следующее. То есть запомните, что у нас есть two way байндинг для того, чтобы бандить в 1 сторону, мы используем такие скобочки, а для того,

175: Чтобы банить в обратную сторону, мы пишем круглые скобочки, и поэтому здесь мы так и указываем, а директива называется engine модул, то есть, по сути, данная конструкция, она явно указывает, в какую сторону мы, что bunny, и это позволяет добиться хорошей.

176: Производительности. Ну а модель у нас называется тайтл, но здесь видно, что сейчас мы web storm. Мне сразу же подчёркивает, да, что это некорректное применение, потому что для использования энджи модели в модуле нам

177: Необходимо зарегистрировать ещё 1 модуль, который называется формс модуль. Ну, импортируется он из файла формс, точнее, Энглер. Форумс это ещё 1 пакет. И сейчас, как видите, больше ничего не подсвечивается. Ну, а те

178: Теперь, допустим, для того, чтобы добавить туду, мы добавим событие клик, и я буду вызывать метод эт туду.

179: Где я его вызову просто с помощью круглых скобок в компоненте туду форм. Я его реализую. И дальше, по сути, мне необходимо сформировать объект туду, то есть конс туду, типа туду его можно

180: Импортировать этот интерфейс. И мы знаем, что у него будут определённые поля, например, поле title, которое равняется переменной дес тайтл. То есть все за тайтлом нам следить не нужно, потому что Энглер с помощью этого сам будет

181: Менять состояние этой переменной id у него будет, допустим, дейт нау комплитед фолс и, допустим, поле date я скажу, что будет

182: Значение нью дейт. То есть мы сформировали корректный элемент туду и дальше мне необходимо через сервис добавить его в массив. То есть мы можем обратиться к сервису и здесь у нас есть метод, который называется

183: Я только что его создал. Мы принимаем сюда туду типа туду и все, что мы делаем, мы обращаемся к массиву тудус и с помощью метода пуш добавляем сюда элемент туду. То есть все супер. Просто дальше

184: В форме мы инжектируем в конструктор приватную переменную туду сервис типа туду сервис, который, безусловно, необходимо импортировать. И для того, чтобы добавить этот элемент, мы просто обращаемся

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

186: Допустим, потому что иначе проект не соберётся в этом как раз и есть прелесть тайп скрипта. И сейчас, если мы посмотрим, будем что-то вписывать, я нажму эт туду, то, как видите, все отрабатывает корректно, но не чистится тайтл.

187: Поэтому давайте это исправим. После того, как мы добавим я здесь напишу просто title равно пустая строка. И добавлю ещё 1 классный функционал для того, чтобы при нажатии на enter мы также могли добавлять туду. Буду

188: События, например, кидан.

189: И также буду вызывать метод эт туду. Но для того, чтобы здесь обрабатывался энтер, я могу написать точка enter. Видите, очень удобно, что web storm полностью подсказывает мне, какие мне опции здесь доступны, да, то есть вы можете посмотреть, например,

190: Какие методы, в принципе, мне доступны, да? То есть вот на букву c, на букву б там блур и так далее. То есть именно комплексная разработка здесь супер удобная.

191: Да, если мы сейчас посмотрим, добавляем, как видите, все работает замечательно. Я все думал в рамках этого урока, что же нам ещё рассмотреть, и придумал, что было бы неплохо рассмотреть, как создаются пайпы и

192: Как вообще с ними работать, насколько это в принципе удобно, поэтому давайте так и поступим. И для этого в компоненте тудус в шаблоне, перед тем, как задавать список уэль, я создам ещё 1 блок, который назову. Точка.

193: То есть это обычный диф с классом фильтр, и в диве будет содержаться импут типа текст.

194: Давайте я зададим задам ему атрибут плейсхолдер, где напишу например filter туду, допустим бай тайтл и как вы понимаете, с помощью этого импута мы будем что-то вписывать и Энглер будет.

195: Нам динамически рендерить список элементов в зависимости от того, что мы вписали для этого в компоненте тудус, я создам, допустим, какую-нибудь переменную, назову её

196: String типа string и по умолчанию это будет пустая строка. На самом деле такие явные типы можно не писать. То есть мы точно здесь понимаем, что это string, поэтому можно опускать. Мы точно понимаем, что это Булин поэтом.

197: Можно не писать булиан, но я пишу для того, чтобы это было более явно, да, но в реальном продакшене так лучше не делать. У нас теперь есть переменная соч стринг, которую мы также будем бандить как engine модель.

198: Model и сюда передаём се стринг. То есть, по сути, пока что ничего необычного. Мы просто байдим на этот импут. Далее давайте добавим определённые стили, я их сейчас копирую.

199: Они здесь будут очень простые. Это просто добавление определённых стилей для импута. То есть выглядит это все примерно таким образом, да, то есть пока что мы что-то вписываем, ничего не происходит, но что мы хотим делать?

200: То есть, если мы что-то впишем здесь, то в зависимости от этого текста и тайтлов, которые есть туду, мы будем показывать совпадение. И для этого мы разработаем свой собственный пайп, который я сложу, например, в папку шед и на

201: Например, тудус филтер, точка пайп точка тёс любые сущности в Энглер это классы. Поэтому здесь я экспортирую класс, который назову

202: Тудус фьютерс пайп, да, то есть, как видите, по умолчанию, в зависимости от названия файла web storm, мне уже генерирует название класса, и для того, чтобы превратить пайп в пайп, я использую декоратор пайп, куда передаю импорт?

203: Вы можете видеть сами объект с полем name, и я должен назвать как-то пайп, например, тудус фиттер. Дальше видно, что веб штор мне подчёркивает крас.

204: Потому что те сущности, которые мы определяем как пайпы, во первых, нужно зарегистрировать в модуле в поле declarations.

205: Его импортирую. И учитывая, что у нас это pipe, мы можем имплементироваться от интерфейса, который называется пайп трансформ, который обязует нас реализовывать метод, который называ

206: Transform. То есть выглядит примерно таким образом. И мы знаем, что мы будем принимать массив тудус типа туду массив, и мы будем принимать 2 параметром.

207: Некоторую строку search типа string по умолчанию это будет пустая строка, и в ответ мы также будем выдавать туду пустой массив.

208: Сейчас он подчёркивает, потому что мы ничего не выдаём, да, но если мы напишем временно пустой массив, то, как видите, ошибка уходит. Трансфор мы импортируем также из Энглер кор. И здесь давайте напишем какую-нибудь простую логику, например, в начале спросим.

209: Если строка search у нас является пустой, то есть если не search.

210: И допустим, мы её можем вызвать метод 3, то тогда мы будем просто возвращать массив тудус, но если же в сече что-то есть, то тогда нам необходимо это все отфильтровать. Поэтому здесь я буду писать return тудус метод.

211: Фильтр, да, потому что это у нас массив и на каждой итерации я буду принимать объект туду.

212: Здесь я буду проверять следующее условие если туду тайтл, то поле, по которому мы делаем фильтрацию, и обратите внимание ещё раз. То есть я пишу туду, пишу точка и web storm мне сразу же показывает.

213: Какие поля у меня есть в большом проекте, в сложных взаимодействиях это просто невероятно полезно. И чем сложнее проект, тем больше разница как раз-таки между реактом и view и энглером, то есть Энглер начинает постепенно

214: Выигрывать, потому что на нём намного проще разрабатывать. Это только на обычных тудушка. Достаточно сложно все это выглядит, но в действительности это плюс. И поэтому мы им пользуемся, тайтл. Мы знаем, что у строки есть методы, например, ту,

215: Lower case у строки есть метод?

216: Index of и в index of мы будем передавать ту строку, которую написали в импоте сеч и также прдукту, ловер кейс, если вся эта конструкция не равна минус единице, то есть минус единица у метода.

217: Index of выдаётся в том случае, если ничего не найдено, то тогда мы будем таким образом фильтровать этот массив, и для того, чтобы применить этот пайп, мы можем к туду сервису в цикле энджи фор.

218: Просто применить его через вертикальную черту и называется он

219: Он называется у нас. Давайте посмотрим, как тудус филтер. То есть здесь я пишу тудус, филтер и энгвер благодаря своим определённым интерфейсам, также позволяет автокомплиту работать. То есть, видите, вебшторм также понимает,

220: То я могу здесь писать в тудус филтер. Мы должны передать строку, и параметры в пайпы передаются через двоеточие. Куда я пишу ту модель, которую я добавлял, то есть search string, и если мы

221: Сейчас посмотрим. То, например, я хочу найти вот эту вот строку ут.

222: Пробел name, то есть, как видите, все это работает и работает моментально, да, то есть если мы, допустим, временно протестируем

223: Не 3 элемента, например, 30 элементов.

224: То данная загрузка должна быть более явной, но что-то пошло не так, видимо, нет, просто долго грузилось. То есть есть массив тудус, и мы здесь можем писать различные элементы и видно, как фильтрация быстро работает, как все это отрабатывает, замеча.

225: И Энглер успешно фильтрует на любых объёмах данных.

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

227: То есть, помимо сервисов и пайпов, которые есть в Энглер, у него встроенная, есть возможность очень крутой и мощной валидации любых типов форм, и это все уже встроено в Энглер. То есть это можно посмотреть в библиотеке.

228: Engler формс, там встроенные валидаторы мы можем создавать свои валидаторы и никакие библиотеки не нужны, очень много возможностей присутствует у http кланта, да, то есть часть из них я показал, что они в принципе существуют, но помимо

229: Этого присутствуют ещё такие вещи, как формирование своих реквестов, как создание своих собственных интерсепторов, например, и так далее. То есть там огромнейшее количество функционала. Есть очень мощные вещи по анимации модуль.

230: Роутинг, модуль мы так и не рассмотрели, но это 1 огромный модуль, который позволяет работать с роутингом, причём делает это очень гибко и мощно и этим также можно пользоваться. То есть в действительности здесь есть огромнейшее количество фун

231: Функционала и в 1 уроке, тем более за 1 час принципиально невозможно про это все рассказать, даже то, что мы сейчас с вами рассмотрели, можно написать несколькими способами, и они все будут более менее корректные и гибкие, но

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

233: И так далее. Что касательно конкретно 8 версии, то давайте расскажу, чем она отличается от предыдущих. На самом деле Энглер немножечко проигрывал по размеру финального бандла по отношению

234: К другим библиотекам и решениям, и поэтому весь 8 релиз команда энглера существенно работала над оптимизацией данного фреймворка, и у неё неплохо получилось помимо того, что Энглер разработал свои собственные.

235: Инструменты для сборки и оптимизации финальных приложений. Он также сделал ещё очень крутые штуки для поддержки различных браузеров. То есть, например,

236: Сейчас, когда мы собираем финальный бандл, то есть собираем в продакшн моде весь наш, все наше приложение, то мы получаем определённый набор скриптов. Некоторые скрипты содержат полифилы для старых браузеров. Некоторые скрипты находятся без полифил.

237: И, соответственно, они весят намного меньше. Например, я говорю про поддержку ие 10 и других браузеров. И когда Энглер стартует, он запускает маленький скрипт, который сам определяет, какие полифилы нужны для работы приложе.

238: И он сам уже в зависимости от браузера, где вы грузите приложение, загружает необходимый набор скриптов. И представьте, что вам для этого нужно сделать для того, чтобы реализовать такую систему в энгере. Ничего, это все идёт.

239: С коробки и все делается автоматически. Помимо этого, в Энглер присутствует также большое количество оптимизаций, которые, скорее всего, в итоге выстрелят в 9 версии. Но пока мы имеем то, что мы имеем, мы имеем

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

241: Ну, я надеюсь, что вам было интересно посмотреть данный ролик. Вы, может быть, что-то нашли для себя, может быть, создали это приложение и