1
00:00:00,031 --> 00:00:04,477
[MUSIC]

2
00:00:04,477 --> 00:00:09,184
Теперь, когда мы имели быстрое введение в MVM и

3
00:00:09,184 --> 00:00:15,564
MVVM фреймворки, угловые сервисы, а также инъекцию зависимостей,

4
00:00:15,564 --> 00:00:21,003
давайте теперь перейдем к нашему следующему упражнению, где мы создадим нашу

5
00:00:21,003 --> 00:00:26,442
сначала Угловая служба и затем внедрить его в наш компонент и

6
00:00:26,442 --> 00:00:29,710
использовать его в рамках нашей компонент.

7
00:00:29,710 --> 00:00:34,370
Чтобы начать работу, перейдите в приложение в

8
00:00:34,370 --> 00:00:38,629
панели редактора в папке App,

9
00:00:38,629 --> 00:00:44,237
создайте новую вложенную папку и назовите ее как Службы.

10
00:00:44,237 --> 00:00:52,918
Теперь мы будем использовать Angular CLI, чтобы добавить новый сервис в наше угловое приложение.

11
00:00:52,918 --> 00:00:57,953
Для этого в командной строке введите ng

12
00:00:57,953 --> 00:01:04,673
генерировать сервис, а услуги/блюдо.

13
00:01:04,673 --> 00:01:11,480
Таким образом, это создаст новый сервис в папке Services с именем dish service.

14
00:01:11,480 --> 00:01:16,815
Таким образом, как только это будет создано, вы увидите, что два файла создаются

15
00:01:16,815 --> 00:01:23,837
угловым CLI под названием dishService.ts и dish.service.specter.ts.

16
00:01:23,837 --> 00:01:30,010
Этот используется для тестирования нашей угловой службы, пока мы поговорим позже.

17
00:01:30,010 --> 00:01:42,516
Второй - это то, где мы создадим наш блюдо, а затем добавим его в наш модуль приложения и используем его в нашем компоненте меню.

18
00:01:42,516 --> 00:01:47,550
Перейдя в редактор, давайте откроем файл dish.service.ts.

19
00:01:47,550 --> 00:01:52,618
Теперь, когда вы открываете этот файл, вы сразу заметите здесь самый первый оператор

20
00:01:52,618 --> 00:01:58,108
, говорящий, что импортируйте {Injectable} из '@angular /core'.

21
00:01:58,108 --> 00:02:02,791
Таким образом, этот инъекционный позволяет нам определить этот инъекционный

22
00:02:02,791 --> 00:02:06,674
декоратор для любого класса, который мы определили здесь.

23
00:02:06,674 --> 00:02:10,730
Таким образом, вы можете видеть, что мы определяем класс здесь под названием DishService.

24
00:02:10,730 --> 00:02:15,532
Используя этот инъекционный декоратор для этого блюдо службы,

25
00:02:15,532 --> 00:02:21,030
мы делаем этот объект теперь инъекционный в нашем приложении.

26
00:02:21,030 --> 00:02:25,481
Таким образом, это то, что позволяет использовать инъекцию зависимостей в нашем приложении

27
00:02:25,481 --> 00:02:26,490
.

28
00:02:26,490 --> 00:02:30,345
Итак, как только вы объявите класс как инъекционный,

29
00:02:30,345 --> 00:02:36,746
давайте теперь настроим наш DishService, чтобы предоставить нам некоторую информацию.

30
00:02:36,746 --> 00:02:39,119
Итак, здесь, я собираюсь импортировать,

31
00:02:42,757 --> 00:02:51,413
Класс Блюда из общей папки,

32
00:02:51,413 --> 00:02:55,354
, а также импортировать,

33
00:02:58,307 --> 00:03:01,887
константа BISHES из,

34
00:03:08,402 --> 00:03:11,574
Общая папка здесь.

35
00:03:11,574 --> 00:03:14,353
Поэтому, как только я импортировал эти два,

36
00:03:14,353 --> 00:03:19,432
теперь моя служба может быть настроена, чтобы предоставить значение для нас.

37
00:03:19,432 --> 00:03:24,246
Поэтому внутри сервиса я собираюсь

38
00:03:24,246 --> 00:03:29,370
добавить в новый метод вызов getDishes, и

39
00:03:29,370 --> 00:03:35,753
этот метод вернет в массиве блюд здесь.

40
00:03:35,753 --> 00:03:41,098
И, таким образом, этот метод вернет константу BISHES

41
00:03:41,098 --> 00:03:45,722
, которую мы импортировали в наш DishService.

42
00:03:45,722 --> 00:03:50,239
При этом наш DishService теперь настроен на

43
00:03:50,239 --> 00:03:54,866
поставлять массив объектов DISHES JavaScript в любую

44
00:03:54,866 --> 00:03:59,398
другую часть нашего приложения, которая требует его.

45
00:03:59,398 --> 00:04:03,862
Теперь, прежде чем это произойдет, нам нужно взять эту услугу и

46
00:04:03,862 --> 00:04:06,660
затем ввести в наше приложение.

47
00:04:06,660 --> 00:04:11,652
Для этого мы откроем файл.ts модуля приложения.

48
00:04:11,652 --> 00:04:17,214
Таким образом, внутри файла.ts модуля приложения, сразу после импорта

49
00:04:17,214 --> 00:04:22,333
компонентов прямо там, я собираюсь импортировать,

50
00:04:25,974 --> 00:04:34,950
DishService прямо там.

51
00:04:34,950 --> 00:04:36,618
И это импортируется из,

52
00:04:42,730 --> 00:04:46,466
Услуги DishService здесь.

53
00:04:46,466 --> 00:04:53,885
Поэтому, как только мы импортируем это, мы объявим этот DishService поставщиком.

54
00:04:53,885 --> 00:04:58,121
Поэтому, если вы заходите в декоратор модуля ng, поэтому

55
00:04:58,121 --> 00:05:03,170
вы видите это третье свойство здесь называется провайдерами.

56
00:05:03,170 --> 00:05:05,960
Таким образом, у нас есть декларации, импорт и поставщики.

57
00:05:05,960 --> 00:05:11,176
Поэтому всякий раз, когда у вас есть сервис, который вы хотите сделать доступным для

58
00:05:11,176 --> 00:05:14,860
все компоненты из части этого модуля.

59
00:05:14,860 --> 00:05:21,170
Тогда вы укажете это в качестве поставщика внутри модуля здесь.

60
00:05:21,170 --> 00:05:25,618
Так что прямо здесь, я скажу, DishService, здесь.

61
00:05:25,618 --> 00:05:31,036
Таким образом, с этим, мой DishService теперь становится доступен для остальной части приложения.

62
00:05:31,036 --> 00:05:32,186
Как это случилось?

63
00:05:32,186 --> 00:05:36,948
Injectable зависимости Angular смотрит на эту информацию, которую мы

64
00:05:36,948 --> 00:05:41,944
объявили здесь, а затем решает, что он должен создать DishService и

65
00:05:41,944 --> 00:05:44,382
вводит его везде, где это требуется.

66
00:05:44,382 --> 00:05:47,092
Теперь, как мы используем эту услугу?

67
00:05:47,092 --> 00:05:52,674
Мы видим, что в компоненте меню мы раньше получали

68
00:05:52,674 --> 00:06:00,180
константу DISHES напрямую, импортировав из файла общих блюд здесь.

69
00:06:00,180 --> 00:06:04,681
Теперь это не идеальный способ получения информации,

70
00:06:04,681 --> 00:06:09,812
вместо привязки информации непосредственно к вашему компоненту,

71
00:06:09,812 --> 00:06:14,685
вы скорее должны позволить сервису получить эту информацию для вас.

72
00:06:14,685 --> 00:06:19,065
Позже мы можем перепроектировать наш сервис, чтобы иметь возможность идти и

73
00:06:19,065 --> 00:06:24,579
получать ту же информацию с серверного сервера, если вы этого потребуете.

74
00:06:24,579 --> 00:06:28,396
Действительно, это то, что мы будем делать в некоторых из последующих упражнений.

75
00:06:28,396 --> 00:06:33,384
Таким образом, вы делегируете ответственность за получение информации сервису

76
00:06:33,384 --> 00:06:37,814
, а затем вы просто будете использовать сервис в этом компоненте меню.

77
00:06:37,814 --> 00:06:43,627
Таким образом, мы удалим этот компонент посуды оттуда и

78
00:06:43,627 --> 00:06:48,806
вместо этого мы будем импортировать это DishService здесь.

79
00:06:48,806 --> 00:06:52,105
И это DishService импортируется из,

80
00:06:57,492 --> 00:07:04,140
сервисы/dish.service файла здесь.

81
00:07:04,140 --> 00:07:09,744
Итак, добавив это сейчас, мы сделали одну часть работы.

82
00:07:09,744 --> 00:07:14,774
Теперь нам нужно сделать эту услугу доступной для нашего компонента, чтобы использовать.

83
00:07:14,774 --> 00:07:18,107
Так вот, где мы спустимся к этому конструктору здесь.

84
00:07:18,107 --> 00:07:19,769
В этом конструкторе, поэтому

85
00:07:19,769 --> 00:07:23,813
теперь вы видите использование конструктора внутри нашего класса здесь.

86
00:07:23,813 --> 00:07:28,814
Таким образом, в этом конструкторе мы увидим

87
00:07:28,814 --> 00:07:35,609
частное блюдо и DishService здесь.

88
00:07:35,609 --> 00:07:38,377
Таким образом, это тип DishService, поэтому

89
00:07:38,377 --> 00:07:43,914
, когда вы объявляете это в конструкторе, когда этот компонент создается,

90
00:07:43,914 --> 00:07:48,771
, то это DishService, которое вы ввели в модуль приложения.

91
00:07:48,771 --> 00:07:52,222
Когда вы вводите это в модуль приложения,

92
00:07:52,222 --> 00:07:56,177
он создаст один объект dishService.

93
00:07:56,177 --> 00:08:00,956
И этот объект dishService будет доступен вам в вашем меню

94
00:08:00,956 --> 00:08:02,123
компонента здесь.

95
00:08:02,123 --> 00:08:09,606
Таким образом, теперь вы можете обратиться к методам, которые этот DishService предоставляет

96
00:08:09,606 --> 00:08:13,780
для вас, чтобы сделать работу от вашего имени.

97
00:08:13,780 --> 00:08:15,847
Итак, как только вы положили это туда,

98
00:08:15,847 --> 00:08:20,333
теперь мы понимаем, что у нас больше нет этой постоянной БЛЮДИ здесь.

99
00:08:20,333 --> 00:08:24,311
Так что мне нужно как-то получить эту информацию.

100
00:08:24,311 --> 00:08:29,138
Теперь я собираюсь использовать сервис, который у меня есть, чтобы

101
00:08:29,138 --> 00:08:31,023
получить информацию для нас.

102
00:08:31,023 --> 00:08:33,257
Где мы берем эту информацию?

103
00:08:33,257 --> 00:08:38,058
Итак, вот где мы собираемся воспользоваться помощью этого метода жизненного цикла под названием

104
00:08:38,058 --> 00:08:38,801
ngOnInit.

105
00:08:38,801 --> 00:08:43,861
Итак, когда вы объявляете этот метод жизненного цикла под названием ngOnInit в вашем приложении

106
00:08:43,861 --> 00:08:49,561
, поэтому вы видите, что в классе, вы говорите, реализует OnInit.

107
00:08:49,561 --> 00:08:59,570
Таким образом, реализация этого OnInit требует, чтобы вы реализовыли этот метод ngOnInit как часть вашего класса здесь.

108
00:08:59,570 --> 00:09:02,461
Таким образом, внутри этого метода ngOnInit

109
00:09:02,461 --> 00:09:07,450
вы можете попросить службу получить эту информацию.

110
00:09:07,450 --> 00:09:08,690
Почему это так?

111
00:09:08,690 --> 00:09:13,560
Этот метод жизненного цикла будет выполняться

112
00:09:13,560 --> 00:09:19,040
угловой структурой всякий раз, когда этот компонент создается.

113
00:09:19,040 --> 00:09:23,770
Таким образом, всякий раз, когда этот компонент создается, этот метод будет выполняться.

114
00:09:23,770 --> 00:09:30,324
Поэтому, когда этот метод выполняется, тогда в этот момент я могу пойти и

115
00:09:30,324 --> 00:09:34,623
получить блюда из dishService.

116
00:09:34,623 --> 00:09:36,839
Так что я могу сказать dishService, и

117
00:09:36,839 --> 00:09:42,700
тогда вы будете знать, что у вас есть метод getDishes внутри dishService.

118
00:09:42,700 --> 00:09:48,105
Вы можете обратиться к методу, чтобы забрать посуду для вас.

119
00:09:48,105 --> 00:09:52,511
Теперь, когда мы это сделаем, то объект посуды будет поставлен

120
00:09:52,511 --> 00:09:56,090
сервис к нам через этот метод getDishes.

121
00:09:56,090 --> 00:10:03,829
И что можно положить в наши блюда локальную переменную, которую мы определили здесь.

122
00:10:03,829 --> 00:10:08,563
Таким образом, мы завершим обновление

123
00:10:08,563 --> 00:10:12,847
для всех наших файлов приложений.

124
00:10:12,847 --> 00:10:18,993
Давайте пойдем и быстро посмотрим на полученное угловое приложение.

125
00:10:18,993 --> 00:10:23,507
Переходя в браузер, вы можете видеть, что в браузере приложение Angular

126
00:10:23,507 --> 00:10:26,030
отображается так же, как и раньше.

127
00:10:26,030 --> 00:10:30,342
В этой версии, как вы видели, информация о блюдах

128
00:10:30,342 --> 00:10:34,967
будет извлечена в ваш компонент, воспользовавшись услугой.

129
00:10:34,967 --> 00:10:38,847
Служба в свою очередь собирается получить эту информацию для вас.

130
00:10:38,847 --> 00:10:41,945
Теперь в этот момент мы держим сервис очень базовым.

131
00:10:41,945 --> 00:10:46,105
Сервис просто возвращает это постоянное значение, которое мы определили здесь.

132
00:10:46,105 --> 00:10:50,738
Позже вы можете себе представить, что вы будете расширять сервис, чтобы пойти и

133
00:10:50,738 --> 00:10:54,042
получить эту информацию с серверного сервера.

134
00:10:54,042 --> 00:10:55,428
Когда это произойдет,

135
00:10:55,428 --> 00:11:00,489
сбор информации не будет происходить мгновенно.

136
00:11:00,489 --> 00:11:04,911
Вот где нам понадобится помощь обещаний и

137
00:11:04,911 --> 00:11:11,022
также реактивный подход JavaScript для поддержки этой задержки и

138
00:11:11,022 --> 00:11:17,881
дело с задержкой в получении информации в нашем приложении.

139
00:11:17,881 --> 00:11:21,699
Мы поговорим об этом более подробно в следующем модуле.

140
00:11:21,699 --> 00:11:26,683
На данный момент наше приложение будет работать просто отлично, так что вы можете выбрать любой из

141
00:11:26,683 --> 00:11:32,370
этих блюд и информация будет отображаться так же, как и раньше.

142
00:11:32,370 --> 00:11:38,250
С этим мы конкурируем в этом упражнении, где мы изучаем основы Угловых служб.

143
00:11:38,250 --> 00:11:41,700
И мы также видели, как мы можем использовать Angular сервис,

144
00:11:41,700 --> 00:11:46,118
в рамках нашего компонента приложений.

145
00:11:46,118 --> 00:11:51,682
Это хорошее время для вас, чтобы сделать git commit с основными службами сообщения.

146
00:11:51,682 --> 00:11:57,797
[МУЗЫКА].