1
00:00:00,000 --> 00:00:04,586
[МУЗЫКА]

2
00:00:04,586 --> 00:00:08,713
Позвольте мне теперь дать вам краткий обзор Angular и

3
00:00:08,713 --> 00:00:12,340
его отношения с реактивной программой,

4
00:00:12,340 --> 00:00:16,780
как Angular использовать реактивное программирование.

5
00:00:16,780 --> 00:00:21,988
В частности, библиотека RxJS и как она используется

6
00:00:21,988 --> 00:00:28,174
Angular для обеспечения реактивного способа написания угловых приложений.

7
00:00:28,174 --> 00:00:33,199
Теперь, что мы представляем в этой лекции очень быстрый обзор

8
00:00:33,199 --> 00:00:38,426
общей концепции реактивного программирования, наблюдаемые,

9
00:00:38,426 --> 00:00:43,930
наблюдаемый шаблон и как он применяется в Angular.

10
00:00:43,930 --> 00:00:47,280
Реактивное программирование само по себе является очень обширной темой

11
00:00:48,460 --> 00:00:52,100
, которая не может быть рассмотрена за десять минут.

12
00:00:53,240 --> 00:00:54,410
Реактивное программирование,

13
00:00:54,410 --> 00:00:59,800
, если нужно осветить его в полной мере, станет целым курсом самостоятельно.

14
00:00:59,800 --> 00:01:01,421
И, к сожалению,

15
00:01:01,421 --> 00:01:07,372
у нас нет времени, чтобы встроить весь курс в этот конкретный курс.

16
00:01:07,372 --> 00:01:12,718
Таким образом, учитывая тот факт, что мы заинтересованы в основном в том, как Angular использует

17
00:01:12,718 --> 00:01:18,066
реактивное программирование, чтобы позволить нам удвоить угловые приложения,

18
00:01:18,066 --> 00:01:21,590
, поэтому мы сосредоточимся на этом аспекте.

19
00:01:21,590 --> 00:01:22,455
Но по пути

20
00:01:22,455 --> 00:01:28,340
я дам вам краткое введение в различные концепции в этой общей области.

21
00:01:28,340 --> 00:01:30,720
Если вы заинтересованы в реактивном программировании,

22
00:01:30,720 --> 00:01:36,100
я настоятельно советую вам продолжить некоторые ссылки, которые я предоставил и

23
00:01:36,100 --> 00:01:40,240
дополнительные ресурсы для этого конкретного урока.

24
00:01:40,240 --> 00:01:44,090
У вас есть доступ к большому количеству материалов, но

25
00:01:44,090 --> 00:01:48,220
мы дадим вам сильное обоснование в реактивном программировании.

26
00:01:48,220 --> 00:01:51,713
Но в этом курсе, начиная с этого момента,

27
00:01:51,713 --> 00:01:57,448
мы рассмотрим, как Angular использует реактивную парадигму программирования для

28
00:01:57,448 --> 00:02:00,150
проектирования угловых приложений.

29
00:02:00,150 --> 00:02:04,818
Мы не просто ограничимся только этим уроком, но

30
00:02:04,818 --> 00:02:10,266
все последующие уроки также увидят Используется наблюдаемого и

31
00:02:10,266 --> 00:02:16,220
шаблон наблюдения и как мы пишем реактивные приложения в угловом.

32
00:02:18,080 --> 00:02:22,800
Вся дискуссия о реактивном программировании вращается вокруг

33
00:02:22,800 --> 00:02:27,770
этого конкретного шаблона разработки программного обеспечения, называемого наблюдаемым шаблоном.

34
00:02:27,770 --> 00:02:31,970
Вы помните банду из четырех, о которой я упоминал вам в одном из предыдущих

35
00:02:31,970 --> 00:02:35,690
лекций, где мы обсуждали структуру контроллера модели и

36
00:02:35,690 --> 00:02:38,140
модель представления модели.

37
00:02:38,140 --> 00:02:43,246
Та же банда из четырех книг содержит часть паттерна, который

38
00:02:43,246 --> 00:02:49,616
был довольно успешно использован в реактивном шаблоне программирования.

39
00:02:49,616 --> 00:02:53,570
Шаблон наблюдателя вращается вокруг наблюдаемых.

40
00:02:53,570 --> 00:02:58,948
Таким образом, у вас есть наблюдаемые, чье поведение можно наблюдать наблюдателями.

41
00:02:58,948 --> 00:03:02,200
Так вот почему это называется шаблон наблюдателя.

42
00:03:02,200 --> 00:03:07,180
Вы объявляете определенные объекты наблюдаемыми или объектами и

43
00:03:07,180 --> 00:03:12,060
эти наблюдаемые будут наблюдаться наблюдателями.

44
00:03:12,060 --> 00:03:15,190
Теперь наблюдатели сами зарегистрируются, чтобы

45
00:03:16,280 --> 00:03:19,400
наблюдать за изменениями в наблюдаемом и

46
00:03:19,400 --> 00:03:24,010
наблюдаемый будет уведомлять наблюдателей всякий раз, когда происходят изменения.

47
00:03:24,010 --> 00:03:29,781
Таким образом, в этом шаблоне наблюдателя, как эти наблюдатели будут подписываться

48
00:03:29,781 --> 00:03:35,165
на наблюдаемый или регистрироваться с наблюдаемым.

49
00:03:35,165 --> 00:03:40,013
Итак, вот как наблюдаемый знает, какие наблюдатели интересуются

50
00:03:40,013 --> 00:03:42,430
любыми изменениями в его состоянии.

51
00:03:42,430 --> 00:03:46,250
Таким образом, всякий раз, когда наблюдаемые говорят,

52
00:03:46,250 --> 00:03:51,830
изменение в своем состоянии, он немедленно уведомит всех наблюдателей

53
00:03:51,830 --> 00:03:56,660
об изменении состояния, и наблюдатели впоследствии могут предпринять

54
00:03:56,660 --> 00:04:02,170
действия на основании этого уведомления об изменении наблюдаемого.

55
00:04:02,170 --> 00:04:06,185
Шаблон наблюдателя был очень эффективно использован во многих различных обстоятельствах

56
00:04:06,185 --> 00:04:07,212
.

57
00:04:07,212 --> 00:04:12,600
И действительно, парадигма реактивного программирования основана на ней.

58
00:04:12,600 --> 00:04:15,990
Итак, вопрос, который приходит вам на ум, -

59
00:04:15,990 --> 00:04:18,280
, почему мы говорим о наблюдаемых?

60
00:04:18,280 --> 00:04:21,730
Что такое особый интерес к наблюдаемым?

61
00:04:21,730 --> 00:04:26,161
Observer шаблон является одним из способов написания программных приложений.

62
00:04:26,161 --> 00:04:29,760
Итак, это основано на потоках.

63
00:04:29,760 --> 00:04:33,290
Итак, у вас есть данные, которые обрабатывают ваше приложение.

64
00:04:33,290 --> 00:04:37,826
Эти данные можно рассматривать как поток значений, который проходит через приложение

65
00:04:37,826 --> 00:04:38,879
.

66
00:04:38,879 --> 00:04:44,158
Итак, поток является основным каналом, вокруг которого проектируется наблюдаемый и

67
00:04:44,158 --> 00:04:47,380
наблюдаемый паттерн.

68
00:04:47,380 --> 00:04:51,007
Итак, какие потоки вы можете подписаться на эти потоки.

69
00:04:51,007 --> 00:04:55,762
И всякий раз, когда значение появляется в потоке, вы выбираете это значение и

70
00:04:55,762 --> 00:04:58,400
, тогда вы можете реагировать на это значение.

71
00:04:58,400 --> 00:05:02,430
Поэтому, чтобы иметь возможность реагировать на это значение, вам нужно подписаться на этот поток или

72
00:05:02,430 --> 00:05:04,710
вам нужно подписаться на наблюдаемый.

73
00:05:04,710 --> 00:05:08,860
Наблюдаемый часто будет продолжать излучать значения.

74
00:05:08,860 --> 00:05:13,059
И когда вы видите эти значения, наблюдатель может реагировать на них.

75
00:05:13,059 --> 00:05:16,413
Теперь это также означает, что когда вы больше не заинтересованы,

76
00:05:16,413 --> 00:05:19,660
вы можете отказаться от наблюдаемого.

77
00:05:19,660 --> 00:05:23,653
Можете сказать, мне больше не интересно смотреть на тебя, а потом исчезать.

78
00:05:23,653 --> 00:05:28,794
Таким образом наблюдаемая закономерность позволяет периодически наблюдать изменения,

79
00:05:28,794 --> 00:05:34,170
, если вы хотите, а затем прекратите наблюдать, когда вы больше не заинтересованы.

80
00:05:34,170 --> 00:05:38,855
Таким образом, такая парадигма позволяет создавать приложения

81
00:05:38,855 --> 00:05:43,135
очень интересным способом, интуитивно понятным способом.

82
00:05:43,135 --> 00:05:45,435
Но чтобы иметь возможность использовать этот подход,

83
00:05:45,435 --> 00:05:48,513
вам нужно обойти этот подход.

84
00:05:48,513 --> 00:05:55,455
Так же, как мы видели с шаблоном обратного вызова или мы видели с использованием обещаний.

85
00:05:55,455 --> 00:06:01,740
Observables - это еще один способ разработки приложений.

86
00:06:01,740 --> 00:06:06,605
Итак, наблюдаемый сам по себе будет очень ленивым и он будет просто висеть там.

87
00:06:06,605 --> 00:06:10,360
Итак, вы можете создать наблюдаемый, а затем просто оставить его там.

88
00:06:10,360 --> 00:06:12,496
Наблюдаемый становится активным или

89
00:06:12,496 --> 00:06:16,777
становится горячим, когда кто-то начинает подписываться на наблюдателя.

90
00:06:16,777 --> 00:06:21,380
Таким образом, в этот момент наблюдатель начинает действовать и начинает редактировать значения.

91
00:06:21,380 --> 00:06:25,515
Таким образом, если хотя бы один наблюдатель доверен в наблюдаемом,

92
00:06:25,515 --> 00:06:29,000
, то наблюдаемый начнет излучать значения.

93
00:06:29,000 --> 00:06:36,010
Если никому не доверено, наблюдаемый вернется в свою оболочку и останется там.

94
00:06:36,010 --> 00:06:38,058
Итак, вы можете думать об этом так.

95
00:06:38,058 --> 00:06:42,231
Так что если эта ментальная картина поможет вам понять

96
00:06:42,231 --> 00:06:46,760
, как работает патент наблюдателя, то так и быть.

97
00:06:46,760 --> 00:06:51,939
Таким образом, это поможет вам взглянуть на то, как мы разрабатываем наши приложения

98
00:06:51,939 --> 00:06:56,657
в следующих упражнениях, а затем последующих уроках

99
00:06:56,657 --> 00:07:01,116
, где мы более подробно рассмотрим HTTP-поддерживаемый Angular.

100
00:07:04,490 --> 00:07:11,222
Еще одним аспектом наблюдаемых является тот факт, что отмена предыдущего запроса и

101
00:07:11,222 --> 00:07:16,172
затем повторная попытка очень проста с наблюдаемыми.

102
00:07:16,172 --> 00:07:20,660
Обещание, которое вы видели ранее, как только вы начинаете ждать обещания,

103
00:07:20,660 --> 00:07:23,690
вы не можете отменить, вы ждете.

104
00:07:23,690 --> 00:07:26,878
Обещание в конечном итоге решит или провалится, и

105
00:07:26,878 --> 00:07:31,907
тогда вы должны реагировать независимо от того, что, даже если вы больше не заинтересованы.

106
00:07:31,907 --> 00:07:36,075
Но с наблюдаемым, если вы можете продать свою подписку,

107
00:07:36,075 --> 00:07:41,540
то, что происходит с наблюдаемым не беспокоит вас вообще.

108
00:07:41,540 --> 00:07:45,019
И поэтому вам не нужно ничего делать, если вы отмените подписку.

109
00:07:45,019 --> 00:07:50,732
Таким образом, отмена и повторная попытка в случае, если предыдущее судебное разбирательство не увенчается успехом

110
00:07:50,732 --> 00:07:55,599
, очень просто с наблюдаемыми.

111
00:07:55,599 --> 00:08:01,710
Мы увидим некоторые из этих моделей поведения более подробно в следующих упражнениях.

112
00:08:03,050 --> 00:08:06,771
Это подводит нас к концепции реактивного программирования.

113
00:08:06,771 --> 00:08:11,071
Реактивное программирование основано на шаблоне наблюдателя и

114
00:08:11,071 --> 00:08:13,550
также итерированном шаблоне.

115
00:08:13,550 --> 00:08:14,243
Но в любом случае,

116
00:08:14,243 --> 00:08:18,610
шаблон наблюдателя является доминирующей особенностью реактивного программирования.

117
00:08:18,610 --> 00:08:22,670
Поэтому в реактивном программировании мы заинтересованы в потоках данных.

118
00:08:22,670 --> 00:08:25,780
Как данные передаются через ваше приложение.

119
00:08:25,780 --> 00:08:29,450
Любой поток данных может рассматриваться как поток.

120
00:08:29,450 --> 00:08:34,510
Таким образом, этот поток данных может распространять изменения по всему приложению.

121
00:08:34,510 --> 00:08:37,940
И пока изменения распространяются через приложение,

122
00:08:39,140 --> 00:08:43,440
на промежуточных этапах вы даже можете взять один конкретный поток,

123
00:08:43,440 --> 00:08:46,860
изменить его и создать другой поток, идущий оттуда.

124
00:08:46,860 --> 00:08:51,980
Так вот, что наблюдаемая картина позволяет нам нарисовать.

125
00:08:51,980 --> 00:08:58,000
Таким образом, вся парадигма программирования построена вокруг потоков или потоков данных.

126
00:08:58,000 --> 00:09:04,540
Так что это еще один способ взглянуть на решение вашей проблемы.

127
00:09:04,540 --> 00:09:10,180
И именно поэтому я подчеркиваю тот факт, что вам нужно обойти голову, чтобы

128
00:09:10,180 --> 00:09:17,120
понять, как реактивный шаблон или как реактивное программирование выполняется на практике.

129
00:09:17,120 --> 00:09:20,810
Теперь вы часто слышите, как люди говорят о чем-то называемом функциональном

130
00:09:20,810 --> 00:09:22,290
реактивном программировании.

131
00:09:22,290 --> 00:09:25,640
Если вы знакомы с парадигмой функционального программирования.

132
00:09:25,640 --> 00:09:28,430
Но плюс реактивное программирование

133
00:09:28,430 --> 00:09:32,400
- это то, что люди часто называют функциональным реактивным программированием.

134
00:09:32,400 --> 00:09:35,670
Таким образом, взаимный брак этих двух подходов.

135
00:09:35,670 --> 00:09:40,340
Теперь вы увидите использование некоторых из них с Angular

136
00:09:40,340 --> 00:09:43,720
, как вы проходите через этот конкретный курс.

137
00:09:43,720 --> 00:09:46,010
Наконец, что насчет RxJS?

138
00:09:46,010 --> 00:09:49,890
Какую роль он играет во всей этой экосистеме?

139
00:09:49,890 --> 00:09:55,280
RxJS - это реализация JavaScript наблюдаемого шаблона и

140
00:09:55,280 --> 00:09:58,750
также поддержка реактивного программирования.

141
00:09:58,750 --> 00:10:03,820
Поэтому, если вы должны были выполнять реактивное программирование в JavaScript,

142
00:10:03,820 --> 00:10:07,820
, тогда вы используете библиотеку RxJS для этого.

143
00:10:07,820 --> 00:10:10,790
RxJS только одна такая реализация.

144
00:10:10,790 --> 00:10:15,990
Есть несколько других, но причина, по которой мы заинтересованы в RxJS в частности

145
00:10:15,990 --> 00:10:20,860
в этом курсе, потому что Angular использует RxJS для

146
00:10:20,860 --> 00:10:23,880
свою поддержку реактивного программирования.

147
00:10:23,880 --> 00:10:26,190
Таким образом, RxJS - это библиотека.

148
00:10:26,190 --> 00:10:28,480
Это отдельная библиотека, которая есть там.

149
00:10:28,480 --> 00:10:35,010
Вы можете использовать RxJS для других целей, не обязательно связанных с Angular.

150
00:10:35,010 --> 00:10:39,960
Были приложения, которые были разработаны с использованием RxJS per se

151
00:10:39,960 --> 00:10:42,400
, не связанных с Angular.

152
00:10:42,400 --> 00:10:46,955
Но в этом курсе мы заинтересованы в том, как RxJS объединяются с

153
00:10:46,955 --> 00:10:52,480
Angular для поддержки реактивного программирования в Angular.

154
00:10:52,480 --> 00:10:57,790
Таким образом, RxJS - это библиотека, которая позволяет вам выполнять асинхронное программирование.

155
00:10:57,790 --> 00:11:01,800
Мы говорили об асинхронном программировании, которое обещает ранее.

156
00:11:01,800 --> 00:11:06,300
Мы увидим асинхронное программирование с обратными вызовами в курсе узлов.

157
00:11:06,300 --> 00:11:11,380
И наблюдаемые - это еще один способ взглянуть на асинхронное программирование

158
00:11:11,380 --> 00:11:16,530
вместе с программистом, управляемым событиями.

159
00:11:16,530 --> 00:11:20,320
Поэтому, если вы знакомы с парадигмой программирования, управляемой событиями,

160
00:11:20,320 --> 00:11:24,230
RxJS хорошо вписывается в эту среду.

161
00:11:25,970 --> 00:11:30,290
Все это построено вокруг наблюдаемых последовательностей.

162
00:11:30,290 --> 00:11:37,160
И библиотека RxJS предоставляет вам один тип ядра, называемый Observable.

163
00:11:37,160 --> 00:11:39,810
И вокруг этого типа ядра, у вас есть некоторые типы спутников

164
00:11:39,810 --> 00:11:44,390
, которые построены как наблюдатели, планировщики и субъекты.

165
00:11:44,390 --> 00:11:47,520
Все это позволяет вам выполнять реактивное программирование.

166
00:11:48,620 --> 00:11:54,445
Кроме того, RxJS также поддерживает целую кучу операторов.

167
00:11:55,745 --> 00:11:59,345
Поддержка операторов, разделителей, извините.

168
00:11:59,345 --> 00:12:02,545
Это был [смех] мой язык.

169
00:12:03,872 --> 00:12:06,642
RxJS поддерживает операторы,

170
00:12:06,642 --> 00:12:11,292
операторы, вдохновленные операторами массива JavaScript.

171
00:12:11,292 --> 00:12:15,892
Если вы знакомы с операторами массива JavaScript, такими как map, тогда

172
00:12:18,202 --> 00:12:22,232
операторы RxJS будут выглядеть очень знакомыми для вас.

173
00:12:22,232 --> 00:12:25,372
Вы можете обрабатывать наблюдаемые и

174
00:12:25,372 --> 00:12:36,170
значения, которые наблюдаемое изображение так же, как массив, поэтому многие операторы массива находят свой путь в RxJS и реактивное программирование также.

175
00:12:36,170 --> 00:12:40,250
Таким образом, пользователи карты, фильтруют, уменьшают и

176
00:12:40,250 --> 00:12:46,440
другие операторы массива также найдут место в RxJS и реактивном программировании.

177
00:12:46,440 --> 00:12:51,890
И это то, что позволяет обрабатывать асинхронные события как коллекции.

178
00:12:51,890 --> 00:12:55,092
Итак, когда вы хотите ждать

179
00:12:55,092 --> 00:12:59,770
асинхронного события, это будет похоже на подписку на наблюдаемое.

180
00:12:59,770 --> 00:13:03,684
Поэтому, когда это наблюдаемое излучает значение, вы готовы поймать значение и

181
00:13:03,684 --> 00:13:05,550
затем действовать соответствующим образом.

182
00:13:05,550 --> 00:13:07,960
Вы знаете, когда будет происходить выброс.

183
00:13:07,960 --> 00:13:13,220
Так что это асинхронная часть, вступающая в игру с использованием RxJS.

184
00:13:14,550 --> 00:13:19,480
И как я уже упоминал, причина, по которой мы заинтересованы в RxJS, заключается в том, что

185
00:13:19,480 --> 00:13:22,750
Angular использует библиотеку RxJS для

186
00:13:23,900 --> 00:13:27,840
, поддерживая реактивное программирование.

187
00:13:27,840 --> 00:13:31,080
Угловой сам имеет ряд встроенных наблюдаемых,

188
00:13:31,080 --> 00:13:32,369
, как мы увидим в короткое время.

189
00:13:33,430 --> 00:13:38,430
Когда вы попадаете в мир реактивного программирования, вы часто услышите людей, говорящих

190
00:13:38,430 --> 00:13:45,830
о наблюдаемых, тогда вы услышите людей, говорящих об операторах, а затем вы также услышите людей, говорящих о мраморных диаграммах.

191
00:13:45,830 --> 00:13:49,290
Теперь, мраморные диаграммы являются способом представления

192
00:13:50,390 --> 00:13:53,730
реактивного программирования с использованием наблюдаемых.

193
00:13:53,730 --> 00:13:55,710
Так что если у вас есть наблюдаемый,

194
00:13:56,830 --> 00:14:02,070
то, если вы рассматриваете это наблюдаемое как функцию времени,

195
00:14:02,070 --> 00:14:06,710
так что если эта ось представляет собой функцию времени, наблюдаемый

196
00:14:06,710 --> 00:14:12,090
будет периодически излучать такие значения, один за другим.

197
00:14:12,090 --> 00:14:16,896
Поэтому, если вы организуете эти значения вдоль последовательности,

198
00:14:16,896 --> 00:14:21,540
как функция времени, так что вы увидите значения, испускаемые таким образом.

199
00:14:22,680 --> 00:14:26,350
Существует также возможность того, что вы можете столкнуться с ошибкой.

200
00:14:27,750 --> 00:14:30,990
В этом случае вам нужно обработать ошибку соответствующим образом.

201
00:14:30,990 --> 00:14:32,510
Если вы обработаете ошибку соответствующим образом,

202
00:14:32,510 --> 00:14:37,830
вы можете продолжить или вы можете остановиться в этом месте.

203
00:14:37,830 --> 00:14:41,520
Аналогично, когда наблюдаемый завершает все свои итерации,

204
00:14:41,520 --> 00:14:44,730
, то он будет помечен как завершение наблюдаемого.

205
00:14:44,730 --> 00:14:49,570
Таким образом, вам нужно иметь возможность даже обрабатывать событие завершения в наблюдаемом.

206
00:14:49,570 --> 00:14:54,500
Учитывая это время аннотированное поведение наблюдаемого, вы можете затем взять

207
00:14:54,500 --> 00:15:00,240
значения, что наблюдаемое изображение и применить операторы к этим наблюдаемым.

208
00:15:00,240 --> 00:15:04,680
Теперь эти значения можно рассматривать как массив.

209
00:15:04,680 --> 00:15:10,120
Если это поможет вам лучше понять, вы можете рассматривать его как массив значений.

210
00:15:10,120 --> 00:15:15,140
Теперь эти значения могут управляться с помощью различных операторов.

211
00:15:15,140 --> 00:15:21,630
Так вот где ваша карта, ваш фильтр, сокращение и несколько операторов, которые

212
00:15:21,630 --> 00:15:26,560
поддерживает любые типичные реактивные программные библиотеки, такие как RxJS.

213
00:15:26,560 --> 00:15:29,010
Включите преобразование

214
00:15:29,010 --> 00:15:33,590
одного набора значений, которые вы получаете из наблюдаемого в другой набор значений.

215
00:15:33,590 --> 00:15:36,640
Таким образом, вы в конечном итоге создаете новый наблюдаемый.

216
00:15:36,640 --> 00:15:39,170
И этот новый наблюдаемый будет состоять из

217
00:15:39,170 --> 00:15:42,830
преобразованных значений из исходного наблюдаемого.

218
00:15:42,830 --> 00:15:48,294
Так вот почему я показываю эти преобразованные значения как прямоугольники здесь.

219
00:15:48,294 --> 00:15:52,861
Просто чтобы дать вам визуальное представление о том, что мы пытаемся сделать с

220
00:15:52,861 --> 00:15:54,170
оператором.

221
00:15:54,170 --> 00:15:58,620
Таким образом, вы берете значение, а затем превращаете его в другое значение.

222
00:15:58,620 --> 00:16:01,640
И эта последовательность тех различных значений, которые

223
00:16:01,640 --> 00:16:06,400
Вы получаете путем преобразования значений, излучаемых наблюдаемым.

224
00:16:06,400 --> 00:16:11,390
Сам станет еще одной строкой значений, и, следовательно,

225
00:16:11,390 --> 00:16:12,880
станет еще одной наблюдаемой.

226
00:16:12,880 --> 00:16:16,820
Таким образом, вы можете получить один наблюдаемый из другого наблюдаемого.

227
00:16:16,820 --> 00:16:19,335
Но этот второй наблюдаемый зависит от первого, так что это зависит.

228
00:16:19,335 --> 00:16:26,600
Его поведение типизировано, первое через использование этого оператора.

229
00:16:26,600 --> 00:16:31,730
Мы увидим примеры этих упражнений

230
00:16:31,730 --> 00:16:37,210
в этом уроке и последующих уроках.

231
00:16:37,210 --> 00:16:41,450
Как насчет Angular и RxJS, как они объединяются?

232
00:16:41,450 --> 00:16:48,540
Угловой, как мы уже упоминали ранее, поддерживает ряд наблюдаемых сам по себе.

233
00:16:48,540 --> 00:16:53,375
И эта поддержка наблюдаемых в Angular позволяет вам выполнять некоторые

234
00:16:53,375 --> 00:16:59,070
реактивное программирование в вашем угловом приложении.

235
00:16:59,070 --> 00:17:02,210
Так, например, формы в Angular,

236
00:17:02,210 --> 00:17:06,340
мы видели реактивные формы уже в одном из предыдущих уроков.

237
00:17:06,340 --> 00:17:11,040
В тот момент я никогда не упоминал слово, наблюдаемое там явно.

238
00:17:11,040 --> 00:17:15,725
Но теперь, когда мы знаем, что можно наблюдать, мы вернемся к реактивной форме, и

239
00:17:15,725 --> 00:17:18,440
затем сделаем некоторое преобразование в реактивную форму.

240
00:17:18,440 --> 00:17:21,460
Формы сами становятся заметными в Angular.

241
00:17:21,460 --> 00:17:26,337
И любые изменения в значениях любого из элементов формы,

242
00:17:26,337 --> 00:17:30,605
можно вывести, и наблюдать, подписавшись на

243
00:17:30,605 --> 00:17:36,280
наблюдаемый, что Угловая структура обеспечивает для нас.

244
00:17:36,280 --> 00:17:41,934
Аналогично, HTTP, с которым мы столкнемся в следующем модуле этого курса,

245
00:17:41,934 --> 00:17:46,500
также будет основываться на наблюдаемых.

246
00:17:46,500 --> 00:17:52,720
Поэтому, когда ваш сервис идет и извлекает данные с сервера, библиотека HTTP,

247
00:17:52,720 --> 00:17:56,750
или модуль HTTP в Angular, поддерживает наблюдаемые.

248
00:17:56,750 --> 00:17:59,780
Таким образом, всякий раз, когда вы выполняете любой из методов, получаете, положите, публикуете или

249
00:17:59,780 --> 00:18:04,160
delete, используя HTTP, они будут давать вам наблюдаемый

250
00:18:04,160 --> 00:18:07,730
, который вы затем можете подписаться в своем сервисе.

251
00:18:07,730 --> 00:18:11,495
А затем преобразовывать его, а затем отдавать его своим компонентам, а

252
00:18:11,495 --> 00:18:13,958
компоненты могут подписаться на наблюдаемые.

253
00:18:13,958 --> 00:18:18,410
Услуга предоставляется путем преобразования потоков HTTP.

254
00:18:18,410 --> 00:18:21,780
И вот где реактивное программирование и

255
00:18:21,780 --> 00:18:27,800
поток данных через ваше угловое приложение становится очень простым.

256
00:18:27,800 --> 00:18:32,840
Аналогично, есть AsyncPipe, с которым вы столкнетесь позже в этом курсе.

257
00:18:32,840 --> 00:18:38,631
А также обнаружение изменений, построенное вокруг наблюдаемых в Angular.

258
00:18:38,631 --> 00:18:44,310
Вы увидите несколько примеров этого в остальной части этого курса.

259
00:18:44,310 --> 00:18:49,110
Теперь возвращаемся к вопросу, который мы видели в предыдущем слайде.

260
00:18:49,110 --> 00:18:53,615
Как вы принимаете наблюдаемый и превращаете его в другой наблюдаемый?

261
00:18:53,615 --> 00:19:01,465
Вот пример, с которым вы столкнетесь в упражнении, которое следует за этой лекцией.

262
00:19:01,465 --> 00:19:07,415
Итак, здесь у нас есть параметр маршрута

263
00:19:07,415 --> 00:19:12,410
в нашем компоненте меню, который использует параметр маршрута для

264
00:19:12,410 --> 00:19:17,710
поставить значение выбранного блюда компоненту детали блюда.

265
00:19:17,710 --> 00:19:20,250
Таким образом, параметр маршрута становится наблюдаемым.

266
00:19:20,250 --> 00:19:24,905
Модуль маршрутизатора Angular имеет активность ActivatedRoute службы, которая

267
00:19:24,905 --> 00:19:30,435
поддерживает кучу наблюдаемых и один из них является наблюдаемыми параметрами.

268
00:19:30,435 --> 00:19:33,996
Наблюдаемые параметры привязаны к параметрам маршрута.

269
00:19:33,996 --> 00:19:37,615
И поэтому любые изменения параметров

270
00:19:37,615 --> 00:19:43,620
в URL-адресе, с которым вы сталкиваетесь, будут испускаться как наблюдаемый.

271
00:19:43,620 --> 00:19:47,521
Теперь, поэтому, когда вы получаете наблюдаемый, так как вы можете видеть,

272
00:19:47,521 --> 00:19:53,010
вы можете получить доступ к этому наблюдаемым, сказав эти параметры маршрута в вашем коде.

273
00:19:53,010 --> 00:19:55,415
Таким образом, параметры сами по себе наблюдаемы здесь.

274
00:19:55,415 --> 00:19:57,666
Теперь, к этим наблюдаемым парам,

275
00:19:57,666 --> 00:20:02,970
вы можете применить оператор, как оператор здесь называется switchmap.

276
00:20:02,970 --> 00:20:05,830
Мы увидим использование этого в выдержке.

277
00:20:05,830 --> 00:20:09,840
Оператор switchmap принимает наблюдаемые параметры.

278
00:20:09,840 --> 00:20:17,190
А затем преобразует параметры наблюдаемые в другой наблюдаемый, который является блюдо.

279
00:20:17,190 --> 00:20:21,861
Он принимает значение params, а затем извлекает значение ID из параметров,

280
00:20:21,861 --> 00:20:25,493
, который дает вам доступ к параметру маршрута, id или

281
00:20:25,493 --> 00:20:30,708
параметр, который вы указали, а затем использует его, чтобы пойти и получить блюдо.

282
00:20:30,708 --> 00:20:38,265
Поэтому каждый раз, когда параметр изменяется, это приведет к получению нового блюда.

283
00:20:38,265 --> 00:20:42,045
И поэтому каждый раз, когда параметр изменяется,

284
00:20:42,045 --> 00:20:47,290
, что эквивалентно испусканию нового значения по их параметрам наблюдаемым.

285
00:20:47,290 --> 00:20:50,850
Это превращается в выборку нового блюда для

286
00:20:50,850 --> 00:20:53,190
, который является соответствующим идентификатором.

287
00:20:53,190 --> 00:20:56,240
Таким образом, блюдо станет еще одним наблюдаемым.

288
00:20:56,240 --> 00:21:01,100
Теперь, когда это блюдо наблюдаемое становится доступным, вы можете подписаться на это блюдо

289
00:21:01,100 --> 00:21:05,850
, наблюдаемое здесь, и получить значение блюда.

290
00:21:05,850 --> 00:21:10,490
И когда вы получаете значение блюда, то вы можете взять значение блюда, а затем

291
00:21:10,490 --> 00:21:17,742
создать переменную блюда в вашем компоненте детали блюда к этому значению блюда.

292
00:21:17,742 --> 00:21:22,468
Таким образом, любое изменение параметра маршрута распространяется через этот

293
00:21:22,468 --> 00:21:25,224
оператор switchmap в наблюдаемый,

294
00:21:25,224 --> 00:21:28,296
, который при наблюдении через подписанный,

295
00:21:28,296 --> 00:21:32,569
позволит вам преобразовать это и назначить это другому блюду.

296
00:21:32,569 --> 00:21:37,236
И когда это произойдет, ваш взгляд может обновиться с

297
00:21:37,236 --> 00:21:41,915
новое блюдо, которое было получено от сервиса.

298
00:21:41,915 --> 00:21:47,106
Итак, теперь вы видите, как данные проходят через параметр маршрута,

299
00:21:47,106 --> 00:21:50,184
через оператор switchmap, и

300
00:21:50,184 --> 00:21:55,985
в результате изменения вида компонента детали вашего блюда.

301
00:21:55,985 --> 00:22:01,000
Вот почему наблюдаемое программирование на основе или

302
00:22:01,000 --> 00:22:05,060
реактивное программирование в Angular становится очень полезным для

303
00:22:05,060 --> 00:22:09,070
реализации определенных функций в вашем угловом приложении.

304
00:22:09,070 --> 00:22:11,034
Это один из таких примеров.

305
00:22:11,034 --> 00:22:15,984
Мы увидим использование этого конкретного примера в

306
00:22:15,984 --> 00:22:20,332
упражнении, которое следует за этой лекцией.

307
00:22:20,332 --> 00:22:22,658
Я думал, что облегчу

308
00:22:22,658 --> 00:22:27,970
вам запомнить все это, просто поя эту Оду Observables.

309
00:22:27,970 --> 00:22:34,948
[МУЗЫКА]

310
00:22:34,948 --> 00:22:37,469
Вы должны спеть это под мелодию,

311
00:22:37,469 --> 00:22:42,310
Вы можете назвать меня Аль Пол Саймон из славы Саймона и Гарфанкеля.

312
00:22:42,310 --> 00:22:46,000
Если вы разворачиваетесь и говорите, кто такой Пол Саймон?

313
00:22:46,000 --> 00:22:47,385
Извините, другое поколение.

314
00:22:47,385 --> 00:22:53,670
[МУЗЫКА]