1
00:00:03,950 --> 00:00:07,125
В предыдущем упражнении

2
00:00:07,125 --> 00:00:13,625
мы обновили наши службы угловых приложений, чтобы использовать обещания,

3
00:00:13,625 --> 00:00:15,960
, а также обновление компонентов для

4
00:00:15,960 --> 00:00:19,245
иметь дело с обещаниями, которые возвращаются службами.

5
00:00:19,245 --> 00:00:24,280
В этом упражнении, которое является продолжением предыдущего упражнения,

6
00:00:24,280 --> 00:00:29,485
мы собираемся имитировать задержку времени для разрешения обещания.

7
00:00:29,485 --> 00:00:31,240
В предыдущем упражнении

8
00:00:31,240 --> 00:00:33,490
обещания решались немедленно.

9
00:00:33,490 --> 00:00:35,540
Но в реальной жизни

10
00:00:35,540 --> 00:00:42,934
, когда вы запрашиваете данные от сервиса и сервис предоставляет обещание,

11
00:00:42,934 --> 00:00:44,540
сервис, в свою очередь,

12
00:00:44,540 --> 00:00:47,900
должен идти и извлекать данные с серверного сервера,

13
00:00:47,900 --> 00:00:49,295
, и это займет время.

14
00:00:49,295 --> 00:00:51,310
Итак, для обещания разрешить

15
00:00:51,310 --> 00:00:53,740
будет определенное количество временной задержки.

16
00:00:53,740 --> 00:00:59,880
Теперь, как мы справляемся с этой задержкой времени на нашей компонентной стороне?

17
00:00:59,880 --> 00:01:04,040
Как мы информируем пользователя о том, что существует

18
00:01:04,040 --> 00:01:09,810
задержка времени, прежде чем данные могут быть получены и показаны пользователю?

19
00:01:10,070 --> 00:01:14,490
Как мы справляемся с самой задержкой?

20
00:01:14,490 --> 00:01:15,830
Теперь, в этом упражнении,

21
00:01:15,830 --> 00:01:24,820
я собираюсь имитировать задержку времени, используя метод JavaScript в моих службах,

22
00:01:24,820 --> 00:01:34,190
, а затем также обновить компоненты, чтобы иметь возможность показать сообщение пользователю, используя

23
00:01:34,190 --> 00:01:41,765
компонент углового материала прогресса spinner, чтобы показать вращающийся диск в

24
00:01:41,765 --> 00:01:46,130
шаблон чтобы держать пользователя в курсе

25
00:01:46,130 --> 00:01:51,630
о том, что данные извлекаются с сервера,

26
00:01:51,630 --> 00:01:55,940
и мы будем визуализировать в представлении, как только данные становятся

27
00:01:55,940 --> 00:02:00,590
доступными для компонента при разрешении обещания.

28
00:02:00,590 --> 00:02:04,680
Давайте посмотрим, как мы можем это сделать в этом упражнении.

29
00:02:04,680 --> 00:02:09,110
Опять же, возвращаясь к моему обслуживанию,

30
00:02:09,110 --> 00:02:11,990
здесь у меня есть блюдо сервис открыт здесь.

31
00:02:11,990 --> 00:02:15,490
Вместо того, чтобы немедленно решить обещание,

32
00:02:15,490 --> 00:02:18,620
мы теперь собираемся дать обещание, а затем дать

33
00:02:18,620 --> 00:02:22,500
обещание решить через короткий промежуток времени.

34
00:02:22,500 --> 00:02:26,510
Итак, чтобы сделать это, это разрешение обещания больше не будет работать

35
00:02:26,510 --> 00:02:31,055
, как показано здесь, поэтому я собираюсь удалить это.

36
00:02:31,055 --> 00:02:34,535
Вместо этого, когда мой метод вызывается,

37
00:02:34,535 --> 00:02:38,915
метод вернет обещание, создав новое обещание.

38
00:02:38,915 --> 00:02:42,310
Вы помните, что когда вы создали новое обещание,

39
00:02:42,310 --> 00:02:47,060
внутри обещания, у вас будет функция

40
00:02:47,060 --> 00:02:52,795
с разрешением и отклонение как два параметра.

41
00:02:52,795 --> 00:02:56,080
Теперь я иду использовать только разрешимую часть этого.

42
00:02:56,080 --> 00:03:02,665
Итак, я реализую функцию внутри обещания, просто используя функцию стрелки здесь.

43
00:03:02,665 --> 00:03:04,690
Итак, я скажу решимость,

44
00:03:04,690 --> 00:03:13,380
и я буду имитировать короткую задержку для этого решения.

45
00:03:13,380 --> 00:03:17,340
Позвольте мне написать комментарий.

46
00:03:17,440 --> 00:03:28,780
Имитация задержки сервера с двухсекундной задержкой.

47
00:03:28,780 --> 00:03:31,410
Итак, как мы это смоделируем?

48
00:03:31,410 --> 00:03:37,380
Итак, мы используем метод setTimeout

49
00:03:37,380 --> 00:03:43,900
, который доступен в JavaScript.

50
00:03:43,900 --> 00:03:45,870
Итак, для метода setTimeout,

51
00:03:45,870 --> 00:03:48,115
снова, я буду реализовывать функцию стрелки,

52
00:03:48,115 --> 00:03:52,625
метод setTimeout не имеет никаких параметров, которые нам там нужны.

53
00:03:52,625 --> 00:03:57,565
Таким образом, когда этот setTimeout выполняется,

54
00:03:57,565 --> 00:04:04,245
, то он решит доставку BISHES.

55
00:04:04,245 --> 00:04:08,480
Итак, позвольте мне сократить эти БЛЮДИ, а затем вставить их в БЛЮДИ.

56
00:04:08,480 --> 00:04:14,650
Итак, вы видите, что этот результат теперь возвращает результат здесь,

57
00:04:14,650 --> 00:04:22,370
и этот результат будет возвращен через две секунды задержки здесь.

58
00:04:24,880 --> 00:04:31,160
С этим обновлением наше обещание решится через две секунды.

59
00:04:31,160 --> 00:04:37,010
Таким образом, метод setTimeout, доступный в JavaScript, имитирует короткую задержку.

60
00:04:37,010 --> 00:04:38,710
Итак, как вы можете видеть,

61
00:04:38,710 --> 00:04:44,345
он имитирует короткую задержку и принимает обратный вызов здесь.

62
00:04:44,345 --> 00:04:46,280
Этот обратный вызов, как вы можете видеть,

63
00:04:46,280 --> 00:04:48,930
Я реализовал его как функцию стрелки здесь.

64
00:04:48,930 --> 00:04:51,730
Таким образом, никаких параметров, а затем, когда это решится,

65
00:04:51,730 --> 00:05:01,450
он собирается разрешить возврат BISHES и задержка для этого составляет две секунды.

66
00:05:01,450 --> 00:05:04,185
Итак, эта часть является функцией

67
00:05:04,185 --> 00:05:09,180
и это временная задержка, которую мы имеем здесь.

68
00:05:09,180 --> 00:05:14,590
Итак, теперь мое обещание решится после двухсекундной задержки.

69
00:05:14,590 --> 00:05:19,870
Аналогично, давайте обновим остальные два метода здесь.

70
00:05:20,720 --> 00:05:22,785
Итак, чтобы сделать это,

71
00:05:22,785 --> 00:05:29,430
Я просто собираюсь скопировать

72
00:05:29,430 --> 00:05:35,745
эту часть, а затем просто вставить, что там,

73
00:05:35,745 --> 00:05:41,325
, и вы заметите, что это

74
00:05:41,325 --> 00:05:51,315
будет, и мне нужно сказать 2000.

75
00:05:51,315 --> 00:05:56,390
Итак, это завершает метод setTimeout.

76
00:05:56,730 --> 00:06:00,445
Теперь мы будем иметь

77
00:06:00,445 --> 00:06:09,705
закрывающую скобку.

78
00:06:09,705 --> 00:06:16,725
Аналогичным образом, позвольте мне также обновить последний метод.

79
00:06:16,725 --> 00:06:20,340
Итак, вы видите, что он разрешает ДИШЕС,

80
00:06:20,340 --> 00:06:26,020
, а затем через две секунды задержки,

81
00:06:29,270 --> 00:06:32,840
и закрыть метод туда.

82
00:06:32,840 --> 00:06:36,965
Вот оно. Итак, теперь мой блюдо обновляется

83
00:06:36,965 --> 00:06:43,105
, чтобы разрешить все обещания после двух секунд задержки.

84
00:06:43,105 --> 00:06:47,810
Теперь, аналогичным образом, обновите сервис лидера и

85
00:06:47,810 --> 00:06:52,405
услугу продвижения, используя тот же шаблон, что я вам показал здесь.

86
00:06:52,405 --> 00:06:57,890
Вторая часть вопроса заключается в том, чтобы каким-то образом держать пользователя в курсе

87
00:06:57,890 --> 00:07:03,260
о том, что есть временная задержка, задействованная в получении результатов,

88
00:07:03,260 --> 00:07:07,700
и поэтому представление будет обновляться, как только будут получены результаты.

89
00:07:07,700 --> 00:07:10,690
Вы видели такое поведение во многих приложениях,

90
00:07:10,690 --> 00:07:18,020
включая мобильные приложения, где у вас будет счетчик показан на экране, чтобы держать

91
00:07:18,020 --> 00:07:21,620
пользователя в курсе того, что что-то загружается из-за

92
00:07:21,620 --> 00:07:25,445
сцены и когда результаты становятся доступными,

93
00:07:25,445 --> 00:07:27,275
представление будет обновлен.

94
00:07:27,275 --> 00:07:33,750
Итак, мы собираемся использовать аналогичный подход в наших компонентах.

95
00:07:33,750 --> 00:07:35,530
Чтобы помочь нам в этом,

96
00:07:35,530 --> 00:07:40,585
мы будем использовать компонент spinner прогресса из Angular Material.

97
00:07:40,585 --> 00:07:43,330
Итак, чтобы использовать компонент spinner прогресса,

98
00:07:43,330 --> 00:07:47,625
давайте сначала перейти в файл приложения

99
00:07:47,625 --> 00:07:52,725
module.ts, а затем импортировать модуль spinner прогресса там.

100
00:07:52,725 --> 00:07:55,180
Итак, идем в приложение module.ts.

101
00:07:55,180 --> 00:08:01,595
Мы сначала пойдем сюда, чтобы импортировать

102
00:08:01,595 --> 00:08:12,150
MatProgressSpinnerModule из угловой/материал/прогресс спиннер.

103
00:08:17,560 --> 00:08:23,025
После того, как мы импортировали это в файл,

104
00:08:23,025 --> 00:08:28,415
, то мы перейдем в ng модуль декоратор в импорт,

105
00:08:28,415 --> 00:08:34,290
, а затем добавить в MatProgressSpinnerModule в это.

106
00:08:34,290 --> 00:08:35,650
После того, как мы закончим это,

107
00:08:35,650 --> 00:08:42,075
, мы можем обновить компоненты, чтобы использовать прогресс счетчик.

108
00:08:42,075 --> 00:08:45,970
Итак, здесь я покажу вам пример

109
00:08:45,970 --> 00:08:51,555
, иллюстрирующий, как мы можем обновить компонент меню, чтобы показать эту информацию.

110
00:08:51,555 --> 00:08:55,505
Итак, перейдите в файл компоновки компонентов меню.

111
00:08:55,505 --> 00:09:02,425
Здесь мы видим, что мы показываем меню, используя список сетки здесь.

112
00:09:02,425 --> 00:09:06,880
Итак, что мы сделаем, это для этого div

113
00:09:06,880 --> 00:09:14,060
я собираюсь использовать директиву ngIf и сказать, что это должно отображаться.

114
00:09:14,060 --> 00:09:18,465
Меню должно отображаться только тогда, когда блюда не являются нулевыми.

115
00:09:18,465 --> 00:09:23,670
Так что изначально, в вашем файле скрипта вкладки компонентов

116
00:09:23,670 --> 00:09:27,325
вы увидите, что при переходе на вкладку компонентов файл скрипта вы увидите, что

117
00:09:27,325 --> 00:09:32,250
ваши блюда в настоящее время просто неопределенным объектом здесь,

118
00:09:32,250 --> 00:09:39,255
и что блюда будут назначены значению блюд только тогда, когда проблемы решаются.

119
00:09:39,255 --> 00:09:40,995
Итак, до этого момента

120
00:09:40,995 --> 00:09:43,145
блюда будут неопределенным значением.

121
00:09:43,145 --> 00:09:45,665
Таким образом, мы можем воспользоваться этим фактом,

122
00:09:45,665 --> 00:09:49,270
, а затем перепроектировать наш шаблон таким образом, что

123
00:09:49,270 --> 00:09:58,955
мы бы сказали показать этот div только в том случае, если блюда не являются неопределенными или не нулевым объектом.

124
00:09:58,955 --> 00:10:01,970
Когда неизвестно,

125
00:10:01,970 --> 00:10:10,210
, тогда я буду использовать второй div здесь со скрытым атрибутом, связанным с ним.

126
00:10:10,210 --> 00:10:14,310
Итак, вы видели, как скрытые используются раньше.

127
00:10:14,310 --> 00:10:18,685
Итак, я собираюсь использовать это для определения стебля.

128
00:10:18,685 --> 00:10:23,350
Итак, это означает, что если блюда не null,

129
00:10:23,350 --> 00:10:25,145
, то этот div будет скрыт.

130
00:10:25,145 --> 00:10:26,865
Если блюда равно null,

131
00:10:26,865 --> 00:10:28,405
, то будет показан этот div.

132
00:10:28,405 --> 00:10:31,435
Итак, теперь вы видите, что у вас здесь два дива.

133
00:10:31,435 --> 00:10:39,840
Первый будет показан, если блюда не являются нулевым массивом тарелок.

134
00:10:39,840 --> 00:10:42,365
В противном случае будет показана вторая часть.

135
00:10:42,365 --> 00:10:46,120
Итак, с этим небольшим изменением в моем шаблоне,

136
00:10:46,120 --> 00:10:54,745
я могу скрыть меню до тех пор, пока массив блюд станет доступным для меня,

137
00:10:54,745 --> 00:10:57,350
и когда массив посуды станет доступен,

138
00:10:57,350 --> 00:10:58,660
то я покажу меню.

139
00:10:58,660 --> 00:11:06,000
До этого момента я покажу коврик-спиннер.

140
00:11:06,000 --> 00:11:11,295
Который является неопределенным прогрессом счетчик

141
00:11:11,295 --> 00:11:14,635
, который доступен как угловой компонент материала.

142
00:11:14,635 --> 00:11:20,565
Таким образом, это будет отображаться как вращающийся круг на мой взгляд,

143
00:11:20,565 --> 00:11:27,185
для этого компонента меню до точки, что результаты будут получены,

144
00:11:27,185 --> 00:11:29,605
, когда проблемы решаются.

145
00:11:29,605 --> 00:11:35,330
Кроме того, я также буду использовать h4, и в пределах h4,

146
00:11:35,330 --> 00:11:43,680
я скажу, что загрузка, пожалуйста, подождите.

147
00:11:43,680 --> 00:11:48,205
Итак, что происходит, когда блюда еще не разрешены,

148
00:11:48,205 --> 00:11:51,575
счетчик и это сообщение будет отображаться на экране.

149
00:11:51,575 --> 00:11:55,210
В момент, когда блюда становятся доступными при обещанных результатах,

150
00:11:55,210 --> 00:11:58,015
то меню будет отображаться на экране.

151
00:11:58,015 --> 00:12:03,685
Теперь мы будем делать аналогичные обновления о компоненте,

152
00:12:03,685 --> 00:12:07,985
домашнем компоненте, а также компоненте детализации блюда.

153
00:12:07,985 --> 00:12:13,135
Соответственно, мы обновим сервис лидера

154
00:12:13,135 --> 00:12:18,570
и сервис продвижения, чтобы имитировать задержку времени.

155
00:12:18,570 --> 00:12:22,000
Итак, используя шаблон, который я только что проиллюстрировал вам,

156
00:12:22,000 --> 00:12:26,660
идти вперед и обновить услуги, а также соответствующие шаблоны,

157
00:12:26,660 --> 00:12:31,135
и мы увидим результат после того, как мы закончим обновление.

158
00:12:31,135 --> 00:12:34,710
После завершения обновления всех служб и

159
00:12:34,710 --> 00:12:38,255
соответствующих шаблонов для компонентов,

160
00:12:38,255 --> 00:12:43,565
позвольте мне быстро запустить вас через обновленные файлы здесь.

161
00:12:43,565 --> 00:12:45,290
Итак, это служба лидеров.

162
00:12:45,290 --> 00:12:47,320
Итак, вы можете видеть, что в службе лидера

163
00:12:47,320 --> 00:12:54,675
я обновил getLeaders использовать setTimeout точно так же, как мы делали с блюдами,

164
00:12:54,675 --> 00:12:58,880
и getLeader и getFeaturedLeader также.

165
00:12:58,880 --> 00:13:01,650
Аналогичным образом, в службе продвижения

166
00:13:01,650 --> 00:13:08,190
мы обновили идентификатор getPromotions getPromotions и getFeaturedPromotions также.

167
00:13:08,190 --> 00:13:11,545
Таким образом, три службы теперь обновляются

168
00:13:11,545 --> 00:13:15,955
, чтобы вызвать задержку времени, прежде чем они вернут результат.

169
00:13:15,955 --> 00:13:18,325
Теперь, с точки зрения шаблонов,

170
00:13:18,325 --> 00:13:22,150
мы уже обновили шаблон menu.ponent.

171
00:13:22,150 --> 00:13:26,140
Давайте посмотрим на шаблоны home.components.

172
00:13:26,140 --> 00:13:27,985
Итак, в рамках home.component,

173
00:13:27,985 --> 00:13:31,100
вы понимаете, что когда мы разработали home.component,

174
00:13:31,100 --> 00:13:36,420
мы уже настроили карты со звездой ngIf блюдо.

175
00:13:36,420 --> 00:13:38,320
Итак, все, что нам нужно сделать, это

176
00:13:38,320 --> 00:13:40,630
ниже здесь мы добавляем div с

177
00:13:40,630 --> 00:13:47,490
скрытые и блюдо здесь, но прядильщик так же, как мы сделали с menu.component.

178
00:13:47,490 --> 00:13:53,265
Аналогичным образом, для продвижения mat-card уже имеет ngIf на месте,

179
00:13:53,265 --> 00:14:00,530
так что нам просто нужно добавить этот дополнительный div здесь со скрытым продвижением там,

180
00:14:00,530 --> 00:14:05,015
, а также для лидера здесь внизу.

181
00:14:05,015 --> 00:14:09,220
Аналогично, идет к компоненту детали блюда.

182
00:14:09,220 --> 00:14:10,810
В компоненте детализации блюда

183
00:14:10,810 --> 00:14:17,105
у нас уже был список с ngIf блюдо для комментариев.

184
00:14:17,105 --> 00:14:23,250
Также ngIf блюдо для карты, которая отображает детали блюда.

185
00:14:23,250 --> 00:14:30,440
Итак, все, что нам нужно сделать, это добавить в этот новый div со скрытым блюдом здесь

186
00:14:30,440 --> 00:14:32,970
и div spinner на месте.

187
00:14:32,970 --> 00:14:36,295
Аналогично, в около компонента,

188
00:14:36,295 --> 00:14:39,015
когда вы идете в о компоненте,

189
00:14:39,015 --> 00:14:42,515
вы увидите, что у нас были корпоративные лидеры здесь,

190
00:14:42,515 --> 00:14:47,330
и у нас уже был список со звездой ngIf с лидерами.

191
00:14:47,330 --> 00:14:50,950
Итак, все, что нам нужно сделать, это добавить в div с

192
00:14:50,950 --> 00:14:55,715
скрытые и лидеры здесь с прядильщик на месте. Вот оно.

193
00:14:55,715 --> 00:14:58,155
Наше приложение теперь обновлено.

194
00:14:58,155 --> 00:15:04,665
Давайте посмотрим на обновленное приложение в браузере дальше.

195
00:15:04,665 --> 00:15:06,530
Перейдя в браузер,

196
00:15:06,530 --> 00:15:10,275
вы увидите, что при попытке загрузить в домашний компонент,

197
00:15:10,275 --> 00:15:14,520
есть короткий промежуток времени, когда вы видите счетчик на

198
00:15:14,520 --> 00:15:18,730
экран перед загрузкой карт.

199
00:15:18,730 --> 00:15:21,520
Аналогичным образом, когда вы идете в menu.component,

200
00:15:21,520 --> 00:15:24,765
вы увидите прядильщик на левой стороне для

201
00:15:24,765 --> 00:15:28,995
за две секунды до фактического меню обновляется,

202
00:15:28,995 --> 00:15:33,395
и когда вы идете к отдельному блюду также вы видите, что

203
00:15:33,395 --> 00:15:38,505
прядильщик на экране, прежде чем детали блюдо визуализируются,

204
00:15:38,505 --> 00:15:42,500
и в о компоненте также аналогично, вы увидите, что,

205
00:15:42,500 --> 00:15:50,400
у вас будет вращающийся круг там до того, как информация лидера будет обновлена.

206
00:15:50,400 --> 00:15:53,520
Каждый раз, когда мы перейдем к любому из них,

207
00:15:53,520 --> 00:16:02,190
вы увидите аналогичную короткую задержку перед обновлением воспаления на экране.

208
00:16:04,030 --> 00:16:12,860
Итак, с этим вы видите, как вы можете справиться с задержкой в получении результатов,

209
00:16:12,860 --> 00:16:18,874
или задержкой в разрешении обещания со стороны сервиса в пределах вашего компонента

210
00:16:18,874 --> 00:16:21,830
и держать пользователя в курсе того, что есть

211
00:16:21,830 --> 00:16:25,495
короткая задержка перед обновлением экрана.

212
00:16:25,495 --> 00:16:28,260
Это завершает это упражнение.

213
00:16:28,260 --> 00:16:35,420
В этом упражнении мы увидели, как мы можем имитировать короткую задержку с нашими обещаниями.

214
00:16:35,420 --> 00:16:38,575
Получение разрешения от услуг,

215
00:16:38,575 --> 00:16:45,185
и мы также видели, как держать пользователя в курсе, используя компоненты углового материала MD spinner

216
00:16:45,185 --> 00:16:49,460
, чтобы показать на экране для

217
00:16:49,460 --> 00:16:53,900
длительность, когда результаты еще не доступны,

218
00:16:53,900 --> 00:16:59,025
, что на время до тех пор, пока обещание не будет разрешено.

219
00:16:59,025 --> 00:17:01,470
Это завершает это упражнение.

220
00:17:01,470 --> 00:17:07,770
Это хорошее время для вас, чтобы сделать git commit с сообщением обещание Часть вторая.