1
00:00:03,680 --> 00:00:11,610
Теперь, когда у вас было первое введение в реактивное программирование, RxJS,

2
00:00:11,610 --> 00:00:14,880
и использование шаблона наблюдателя и

3
00:00:14,880 --> 00:00:21,165
как Angular использует шаблон наблюдателя и поддерживает реактивное программирование,

4
00:00:21,165 --> 00:00:24,600
давайте перейдем к нашему самому первому упражнению, чтобы получить наши ноги

5
00:00:24,600 --> 00:00:29,315
мокрый, используя наблюдаемые в Angular.

6
00:00:29,315 --> 00:00:35,950
В этом упражнении мы собираемся обновить наши сервисы, чтобы использовать наблюдаемые,

7
00:00:35,950 --> 00:00:43,999
, потому что, когда мы перейдем к следующему модулю, где мы будем смотреть на поддержку HTTP в Angular,

8
00:00:43,999 --> 00:00:49,915
мы сразу поймем, что поддержка HTTP в Angular основана вокруг наблюдаемых.

9
00:00:49,915 --> 00:00:54,485
Итак, это хорошая идея для нас, чтобы познакомиться

10
00:00:54,485 --> 00:00:59,870
с использованием наблюдаемых в самом уроке.

11
00:00:59,870 --> 00:01:04,770
Итак, мы обновим сервисы для экспорта наблюдаемых.

12
00:01:04,770 --> 00:01:08,479
После этого, в рамках наших компонентов,

13
00:01:08,479 --> 00:01:11,270
мы будем подписываться на эти наблюдаемые и

14
00:01:11,270 --> 00:01:15,190
получить данные, необходимые для рендеринга представлений.

15
00:01:15,190 --> 00:01:19,340
Давайте перейдем к упражнению дальше.

16
00:01:19,340 --> 00:01:21,680
Вам должно быть интересно,

17
00:01:21,680 --> 00:01:25,390
как мы используем RxJS в пределах Angular,

18
00:01:25,390 --> 00:01:28,510
и он уже доступен для нас?

19
00:01:28,510 --> 00:01:31,730
Итак, вы заметите, что с угловым CLI,

20
00:01:31,730 --> 00:01:34,480
, когда вы выстраиваете свое угловое приложение,

21
00:01:34,480 --> 00:01:37,040
RxJS автоматически включается туда.

22
00:01:37,040 --> 00:01:39,560
Итак, если вы перейдете к файлу package.json,

23
00:01:39,560 --> 00:01:42,795
вы заметите, что в зависимости

24
00:01:42,795 --> 00:01:48,900
библиотека RxJS уже включена в ваше приложение.

25
00:01:48,900 --> 00:01:53,155
Итак, все, что вам нужно использовать из RxJS, уже доступно для вас.

26
00:01:53,155 --> 00:02:00,215
Таким образом, мы можем идти вперед и использовать библиотеку RxJS прямо в нашем угловом приложении.

27
00:02:00,215 --> 00:02:03,735
Если вы создаете свое угловое приложение с нуля,

28
00:02:03,735 --> 00:02:08,450
, то вам нужно явно сделать npm установку RxJS.

29
00:02:08,450 --> 00:02:11,135
Переходя к файлу dish.service.js,

30
00:02:11,135 --> 00:02:21,080
позвольте мне сначала импортировать

31
00:02:21,080 --> 00:02:27,750
из наших «rxjs» наблюдаемых.

32
00:02:28,960 --> 00:02:32,045
Мы также импортируем - Теперь,

33
00:02:32,045 --> 00:02:35,235
, когда вы используете RxJS в вашем угловом приложении,

34
00:02:35,235 --> 00:02:37,330
вся библиотека не включается.

35
00:02:37,330 --> 00:02:41,445
Вы можете импортировать только те части, которые вам нужны из библиотеки RxJS,

36
00:02:41,445 --> 00:02:43,400
, а затем использовать их в приложении Angular.

37
00:02:43,400 --> 00:02:48,680
Таким образом, когда ваше угловое приложение, наконец, готово к развертыванию,

38
00:02:48,680 --> 00:02:52,070
только те части из RxJS, которые необходимы, будут

39
00:02:52,070 --> 00:02:56,030
включены в ваше угловое приложение.

40
00:02:56,030 --> 00:02:58,055
Оператор задержки.

41
00:02:58,055 --> 00:03:07,815
Оператор задержки позволяет нам задерживать излучание элемента из нашего наблюдаемого.

42
00:03:07,815 --> 00:03:09,780
Перейдя в методы,

43
00:03:09,780 --> 00:03:15,295
мы теперь обновим эти методы, чтобы использовать наблюдаемые,

44
00:03:15,295 --> 00:03:18,230
и мы вернем обещание, преобразуя

45
00:03:18,230 --> 00:03:21,755
наблюдаемый в ваше обещание с помощью оператора toPromise.

46
00:03:21,755 --> 00:03:27,700
Итак, если у вас уже есть компоненты, которые используют обещания,

47
00:03:27,700 --> 00:03:30,520
и вы хотите не изменять компоненты,

48
00:03:30,520 --> 00:03:33,470
вы можете просто преобразовать наблюдаемый в ваше обещание, а затем

49
00:03:33,470 --> 00:03:37,890
отправить обещание на ваши компоненты.

50
00:03:37,890 --> 00:03:42,265
Как мы поняли, обещания будут излучать только один элемент,

51
00:03:42,265 --> 00:03:48,000
, тогда как вы можете видеть, что наблюдаемые основаны на потоках.

52
00:03:48,000 --> 00:03:51,350
Итак, это ограничение, которое вы получите, если вы

53
00:03:51,350 --> 00:03:54,560
просто используете два оператора обещания на наблюдаемых

54
00:03:54,560 --> 00:03:58,520
и используете его, потому что оператор toPromise

55
00:03:58,520 --> 00:04:03,525
позволит вашему наблюдаемым излучать только одно значение.

56
00:04:03,525 --> 00:04:09,350
Но на данный момент давайте сделаем это как первый шаг, прежде чем мы

57
00:04:09,350 --> 00:04:14,665
перейдем к полной наблюдаемой реализации наших услуг.

58
00:04:14,665 --> 00:04:17,820
Итак, перейдя к методу getDishes,

59
00:04:17,820 --> 00:04:22,370
я собираюсь вернуть эти блюда.

60
00:04:22,370 --> 00:04:27,950
Итак, я собираюсь удалить эту часть, а затем сказать, вернуться.

61
00:04:27,950 --> 00:04:31,625
Если вы хотите испускать только одно значение из наблюдаемого,

62
00:04:31,625 --> 00:04:33,260
вы будете использовать метод

63
00:04:33,260 --> 00:04:38,010
и который будет принимать любое значение, которое вы хотите испускать там.

64
00:04:38,010 --> 00:04:43,300
Этого достаточно для нашего текущего приложения на данный момент.

65
00:04:43,300 --> 00:04:46,160
Итак, мы собираемся использовать это,

66
00:04:46,160 --> 00:04:52,040
, а также мы хотим отложить излучание значения на две секунды.

67
00:04:52,040 --> 00:04:55,565
Итак, я собираюсь изменить эту часть кода, чтобы использовать

68
00:04:55,565 --> 00:05:01,895
оператор задержки для моего наблюдаемого, используя pipe.

69
00:05:01,895 --> 00:05:09,360
Мне нужно преобразовать это toPromise и дать обещание.

70
00:05:09,360 --> 00:05:14,775
Итак, теперь мой метод getDises обновляется, чтобы использовать наблюдаемый,

71
00:05:14,775 --> 00:05:19,665
, а затем преобразовать его в обещание, а затем отправить обещание моему компоненту.

72
00:05:19,665 --> 00:05:22,710
Поэтому мне не нужно делать какие-либо обновления компонента.

73
00:05:22,710 --> 00:05:31,200
Давайте использовать тот же подход для обновления оставшихся двух методов моего обслуживания здесь.

74
00:05:31,200 --> 00:05:34,455
Так что я просто собираюсь скопировать эту часть,

75
00:05:34,455 --> 00:05:42,225
, а затем обновить эту часть,

76
00:05:42,225 --> 00:05:46,140
затем взять часть задержки,

77
00:05:46,140 --> 00:05:54,080
, а затем обновить эту часть, чтобы использовать задержку

78
00:05:54,080 --> 00:06:06,300
и преобразовать этот метод toPromise.

79
00:06:06,300 --> 00:06:10,980
Таким образом, мой метод getDish также обновляется.

80
00:06:10,980 --> 00:06:17,370
Позвольте мне сделать то же самое с методом getFeaturedDish.

81
00:06:17,370 --> 00:06:21,000
Опять же, если вы хотите,

82
00:06:21,000 --> 00:06:23,040
вы можете напечатать все это.

83
00:06:23,040 --> 00:06:32,270
Я просто ленив только вырезать и вставить и изменить части, которые

84
00:06:32,270 --> 00:06:42,395
Я хочу изменить и преобразовать этот метод toPromise.

85
00:06:42,395 --> 00:06:52,800
Вот оно. Моя служба теперь обновлена, чтобы вернуть обещания от наблюдаемого здесь.

86
00:06:52,800 --> 00:06:54,405
Таким образом, с этим обновлением

87
00:06:54,405 --> 00:07:04,215
мой блюдо обновляется, чтобы использовать наблюдаемые, а не напрямую используя значения.

88
00:07:04,215 --> 00:07:10,460
Аналогичным образом, продолжайте и обновляйте сервис лидера и службу продвижения.

89
00:07:10,460 --> 00:07:13,415
Теперь вы заметили, что я уже обновил

90
00:07:13,415 --> 00:07:17,985
сервис лидера, чтобы использовать наблюдаемые.

91
00:07:17,985 --> 00:07:24,380
Аналогичным образом, я также обновил службу продвижения, чтобы использовать наблюдаемые.

92
00:07:24,380 --> 00:07:28,200
Сохраните изменения и давайте посмотрим на наше приложение.

93
00:07:28,200 --> 00:07:29,890
Когда вы заходите в браузер,

94
00:07:29,890 --> 00:07:34,745
вы заметите, что ваше приложение работает точно так же, как и раньше

95
00:07:34,745 --> 00:07:41,010
и извлекает данные из сервисов так же, как и раньше.

96
00:07:41,010 --> 00:07:45,160
Так что не много изменений в вашем приложении как таковом.

97
00:07:45,160 --> 00:07:46,850
Он выполняет точно так же.

98
00:07:46,850 --> 00:07:51,035
Итак, обратите внимание, что, заменив ваши обещания наблюдаемыми,

99
00:07:51,035 --> 00:07:55,370
в вашем приложении не было много изменений, как вы ожидаете этого.

100
00:07:55,370 --> 00:07:58,460
Теперь пойдем на шаг дальше.

101
00:07:58,460 --> 00:08:04,540
Теперь мы позволим нашим сервисам возвращать наблюдаемые,

102
00:08:04,540 --> 00:08:08,240
и мы обновим компоненты, чтобы использовать наблюдаемые.

103
00:08:08,240 --> 00:08:09,835
Причина, как я упоминал,

104
00:08:09,835 --> 00:08:13,790
заключается в том, что, когда мы обновляем наши службы, чтобы использовать

105
00:08:13,790 --> 00:08:18,420
службу HTTP, чтобы перейти на сервер для получения данных,

106
00:08:18,420 --> 00:08:25,345
, то мы бы отметили, что в Angular методы HTTP будут возвращать наблюдаемые.

107
00:08:25,345 --> 00:08:30,260
Службы могут просто передать наблюдаемые на наши компоненты и позволить

108
00:08:30,260 --> 00:08:33,080
компоненты подписаться на эти наблюдаемые и использовать

109
00:08:33,080 --> 00:08:36,215
данных, которые они получают таким образом.

110
00:08:36,215 --> 00:08:41,020
Итак, это был бы промежуточный шаг для нас, чтобы выйти на эту стадию.

111
00:08:41,020 --> 00:08:45,275
Мы получим, чтобы посмотреть HTTP в следующем модуле.

112
00:08:45,275 --> 00:08:48,234
Возвращаясь к нашим услугам,

113
00:08:48,234 --> 00:08:52,460
теперь вы можете удалить toPromise сначала, удалив

114
00:08:52,460 --> 00:08:55,400
оператор toPromise, потому что нам это больше не нужно

115
00:08:55,400 --> 00:08:59,660
, а затем мы просто удалим toPromise из этого,

116
00:08:59,660 --> 00:09:04,110
import наблюдаемый, а затем пусть

117
00:09:04,110 --> 00:09:09,044
наш метод возвращает

118
00:09:09,044 --> 00:09:16,140
наблюдаемые вместо обещания.

119
00:09:16,140 --> 00:09:17,615
Итак, как я уже упоминал,

120
00:09:17,615 --> 00:09:21,420
любое обещание может сделать наблюдаемое также может сделать.

121
00:09:22,810 --> 00:09:28,400
Итак, давайте обновим все это, чтобы вернуть наблюдаемые.

122
00:09:28,400 --> 00:09:32,695
Сделайте то же самое с остальными двумя сервисами.

123
00:09:32,695 --> 00:09:36,680
Теперь вы заметили, что я также обновил сервис лидера

124
00:09:36,680 --> 00:09:40,725
, чтобы просто вернуть наблюдаемые вместо обещаний,

125
00:09:40,725 --> 00:09:43,984
, а также служба продвижения была соответственно

126
00:09:43,984 --> 00:09:47,735
обновлена, чтобы вернуть наблюдаемый вместо обещаний.

127
00:09:47,735 --> 00:09:52,460
Теперь это означает, что нам нужно идти и обновлять наши компоненты

128
00:09:52,460 --> 00:09:57,590
, чтобы использовать наблюдаемые, а не обещания, как мы делали раньше.

129
00:09:57,590 --> 00:10:01,885
Теперь для обещания мы увидели, что нам нужно использовать.then

130
00:10:01,885 --> 00:10:07,430
, чтобы получить результат, когда разрешение обещания будет выполнено.

131
00:10:07,430 --> 00:10:12,495
С наблюдаемым, .then преобразуется в.subscribe.

132
00:10:12,495 --> 00:10:16,715
То, как вы потребляете данные, останется точно таким же.

133
00:10:16,715 --> 00:10:19,890
Таким образом, с этим незначительным изменением в ваших компонентах,

134
00:10:19,890 --> 00:10:25,480
компоненты теперь смогут обрабатывать наблюдаемые, а не обещания.

135
00:10:25,480 --> 00:10:31,085
Итак, перейдя ко всем четырем компонентам, которые используют сервисы,

136
00:10:31,085 --> 00:10:37,185
сначала, давайте перейдем к файлу menu.component.ts.

137
00:10:37,185 --> 00:10:39,280
В файле menu.component.ts

138
00:10:39,280 --> 00:10:42,080
вы сразу заметите красную линию squiggly там,

139
00:10:42,080 --> 00:10:48,100
под то очевидно, потому что мы не возвращаем обещание.

140
00:10:48,100 --> 00:10:50,090
Вместо этого мы возвращаем наблюдаемый.

141
00:10:50,090 --> 00:10:55,245
Так что просто конвертируйте это, чтобы подписаться, и это все.

142
00:10:55,245 --> 00:10:59,225
Ваш компонент меню теперь может

143
00:10:59,225 --> 00:11:04,910
потреблять наблюдаемые значения, испускаемые наблюдаемым.

144
00:11:04,910 --> 00:11:10,890
Сделайте то же самое изменение в файле about.component.ts,

145
00:11:10,890 --> 00:11:16,760
файле dishdetail.component.ts и файле home.component.ts.

146
00:11:16,760 --> 00:11:22,520
После обновления оставшихся компонентов файлов Tapscott,

147
00:11:22,520 --> 00:11:27,245
пойдем и посмотрим на поведение нашего приложения в браузере.

148
00:11:27,245 --> 00:11:32,920
Зайдите в браузер, вы не заметите никакой разницы в поведении нашего приложения.

149
00:11:32,920 --> 00:11:36,170
Эта версия нашего углового приложения обновлена, чтобы использовать

150
00:11:36,170 --> 00:11:40,275
наблюдаемые вместо обещаний.

151
00:11:40,275 --> 00:11:42,620
Итак, домашний компонент здесь

152
00:11:42,620 --> 00:11:46,085
о компоненте выполняет точно так же, как и раньше,

153
00:11:46,085 --> 00:11:49,800
и компонент меню делает точно то же самое.

154
00:11:49,800 --> 00:11:54,785
Также компонент детализации блюда будет вести себя точно так же, как и раньше.

155
00:11:54,785 --> 00:11:57,960
С этим мы завершаем это упражнение.

156
00:11:57,960 --> 00:12:01,430
В этом упражнении мы сделали первые шаги по использованию

157
00:12:01,430 --> 00:12:05,030
наблюдаемых в нашем угловом приложении, обновив

158
00:12:05,030 --> 00:12:08,330
услуги и соответственно компоненты, чтобы

159
00:12:08,330 --> 00:12:12,185
использовать наблюдаемые вместо обещаний.

160
00:12:12,185 --> 00:12:18,640
Это хорошее время для вас, чтобы сделать git commit с сообщением RxJS часть первая.