[MUSIC]
Теперь, когда мы имели быстрое введение в MVM и
MVVM фреймворки, угловые сервисы, а также инъекцию зависимостей,
давайте теперь перейдем к нашему следующему упражнению, где мы создадим нашу
сначала Угловая служба и затем внедрить его в наш компонент и
использовать его в рамках нашей компонент.
Чтобы начать работу, перейдите в приложение в
панели редактора в папке App,
создайте новую вложенную папку и назовите ее как Службы.
Теперь мы будем использовать Angular CLI, чтобы добавить новый сервис в наше угловое приложение.
Для этого в командной строке введите ng
генерировать сервис, а услуги/блюдо.
Таким образом, это создаст новый сервис в папке Services с именем dish service.
Таким образом, как только это будет создано, вы увидите, что два файла создаются
угловым CLI под названием dishService.ts и dish.service.specter.ts.
Этот используется для тестирования нашей угловой службы, пока мы поговорим позже.
Второй - это то, где мы создадим наш блюдо, а затем добавим его в наш модуль приложения и используем его в нашем компоненте меню.
Перейдя в редактор, давайте откроем файл dish.service.ts.
Теперь, когда вы открываете этот файл, вы сразу заметите здесь самый первый оператор
, говорящий, что импортируйте {Injectable} из '@angular /core'.
Таким образом, этот инъекционный позволяет нам определить этот инъекционный
декоратор для любого класса, который мы определили здесь.
Таким образом, вы можете видеть, что мы определяем класс здесь под названием DishService.
Используя этот инъекционный декоратор для этого блюдо службы,
мы делаем этот объект теперь инъекционный в нашем приложении.
Таким образом, это то, что позволяет использовать инъекцию зависимостей в нашем приложении
.
Итак, как только вы объявите класс как инъекционный,
давайте теперь настроим наш DishService, чтобы предоставить нам некоторую информацию.
Итак, здесь, я собираюсь импортировать,
Класс Блюда из общей папки,
, а также импортировать,
константа BISHES из,
Общая папка здесь.
Поэтому, как только я импортировал эти два,
теперь моя служба может быть настроена, чтобы предоставить значение для нас.
Поэтому внутри сервиса я собираюсь
добавить в новый метод вызов getDishes, и
этот метод вернет в массиве блюд здесь.
И, таким образом, этот метод вернет константу BISHES
, которую мы импортировали в наш DishService.
При этом наш DishService теперь настроен на
поставлять массив объектов DISHES JavaScript в любую
другую часть нашего приложения, которая требует его.
Теперь, прежде чем это произойдет, нам нужно взять эту услугу и
затем ввести в наше приложение.
Для этого мы откроем файл.ts модуля приложения.
Таким образом, внутри файла.ts модуля приложения, сразу после импорта
компонентов прямо там, я собираюсь импортировать,
DishService прямо там.
И это импортируется из,
Услуги DishService здесь.
Поэтому, как только мы импортируем это, мы объявим этот DishService поставщиком.
Поэтому, если вы заходите в декоратор модуля ng, поэтому
вы видите это третье свойство здесь называется провайдерами.
Таким образом, у нас есть декларации, импорт и поставщики.
Поэтому всякий раз, когда у вас есть сервис, который вы хотите сделать доступным для
все компоненты из части этого модуля.
Тогда вы укажете это в качестве поставщика внутри модуля здесь.
Так что прямо здесь, я скажу, DishService, здесь.
Таким образом, с этим, мой DishService теперь становится доступен для остальной части приложения.
Как это случилось?
Injectable зависимости Angular смотрит на эту информацию, которую мы
объявили здесь, а затем решает, что он должен создать DishService и
вводит его везде, где это требуется.
Теперь, как мы используем эту услугу?
Мы видим, что в компоненте меню мы раньше получали
константу DISHES напрямую, импортировав из файла общих блюд здесь.
Теперь это не идеальный способ получения информации,
вместо привязки информации непосредственно к вашему компоненту,
вы скорее должны позволить сервису получить эту информацию для вас.
Позже мы можем перепроектировать наш сервис, чтобы иметь возможность идти и
получать ту же информацию с серверного сервера, если вы этого потребуете.
Действительно, это то, что мы будем делать в некоторых из последующих упражнений.
Таким образом, вы делегируете ответственность за получение информации сервису
, а затем вы просто будете использовать сервис в этом компоненте меню.
Таким образом, мы удалим этот компонент посуды оттуда и
вместо этого мы будем импортировать это DishService здесь.
И это DishService импортируется из,
сервисы/dish.service файла здесь.
Итак, добавив это сейчас, мы сделали одну часть работы.
Теперь нам нужно сделать эту услугу доступной для нашего компонента, чтобы использовать.
Так вот, где мы спустимся к этому конструктору здесь.
В этом конструкторе, поэтому
теперь вы видите использование конструктора внутри нашего класса здесь.
Таким образом, в этом конструкторе мы увидим
частное блюдо и DishService здесь.
Таким образом, это тип DishService, поэтому
, когда вы объявляете это в конструкторе, когда этот компонент создается,
, то это DishService, которое вы ввели в модуль приложения.
Когда вы вводите это в модуль приложения,
он создаст один объект dishService.
И этот объект dishService будет доступен вам в вашем меню
компонента здесь.
Таким образом, теперь вы можете обратиться к методам, которые этот DishService предоставляет
для вас, чтобы сделать работу от вашего имени.
Итак, как только вы положили это туда,
теперь мы понимаем, что у нас больше нет этой постоянной БЛЮДИ здесь.
Так что мне нужно как-то получить эту информацию.
Теперь я собираюсь использовать сервис, который у меня есть, чтобы
получить информацию для нас.
Где мы берем эту информацию?
Итак, вот где мы собираемся воспользоваться помощью этого метода жизненного цикла под названием
ngOnInit.
Итак, когда вы объявляете этот метод жизненного цикла под названием ngOnInit в вашем приложении
, поэтому вы видите, что в классе, вы говорите, реализует OnInit.
Таким образом, реализация этого OnInit требует, чтобы вы реализовыли этот метод ngOnInit как часть вашего класса здесь.
Таким образом, внутри этого метода ngOnInit
вы можете попросить службу получить эту информацию.
Почему это так?
Этот метод жизненного цикла будет выполняться
угловой структурой всякий раз, когда этот компонент создается.
Таким образом, всякий раз, когда этот компонент создается, этот метод будет выполняться.
Поэтому, когда этот метод выполняется, тогда в этот момент я могу пойти и
получить блюда из dishService.
Так что я могу сказать dishService, и
тогда вы будете знать, что у вас есть метод getDishes внутри dishService.
Вы можете обратиться к методу, чтобы забрать посуду для вас.
Теперь, когда мы это сделаем, то объект посуды будет поставлен
сервис к нам через этот метод getDishes.
И что можно положить в наши блюда локальную переменную, которую мы определили здесь.
Таким образом, мы завершим обновление
для всех наших файлов приложений.
Давайте пойдем и быстро посмотрим на полученное угловое приложение.
Переходя в браузер, вы можете видеть, что в браузере приложение Angular
отображается так же, как и раньше.
В этой версии, как вы видели, информация о блюдах
будет извлечена в ваш компонент, воспользовавшись услугой.
Служба в свою очередь собирается получить эту информацию для вас.
Теперь в этот момент мы держим сервис очень базовым.
Сервис просто возвращает это постоянное значение, которое мы определили здесь.
Позже вы можете себе представить, что вы будете расширять сервис, чтобы пойти и
получить эту информацию с серверного сервера.
Когда это произойдет,
сбор информации не будет происходить мгновенно.
Вот где нам понадобится помощь обещаний и
также реактивный подход JavaScript для поддержки этой задержки и
дело с задержкой в получении информации в нашем приложении.
Мы поговорим об этом более подробно в следующем модуле.
На данный момент наше приложение будет работать просто отлично, так что вы можете выбрать любой из
этих блюд и информация будет отображаться так же, как и раньше.
С этим мы конкурируем в этом упражнении, где мы изучаем основы Угловых служб.
И мы также видели, как мы можем использовать Angular сервис,
в рамках нашего компонента приложений.
Это хорошее время для вас, чтобы сделать git commit с основными службами сообщения.
[МУЗЫКА].