1
00:00:00,000 --> 00:00:04,586
[MUSIC]

2
00:00:04,586 --> 00:00:08,713
Permítanme ahora darles una visión general rápida de Angular y

3
00:00:08,713 --> 00:00:12,340
su relación con el programa reactivo,

4
00:00:12,340 --> 00:00:16,780
cómo Angular hace uso de la programación reactiva.

5
00:00:16,780 --> 00:00:21,988
En particular, la biblioteca RxJS y cómo es aprovechada por

6
00:00:21,988 --> 00:00:28,174
Angular para proporcionar una forma reactiva de escribir aplicaciones Angular.

7
00:00:28,174 --> 00:00:33,199
Ahora lo que presentamos en esta conferencia es una visión muy rápida de

8
00:00:33,199 --> 00:00:38,426
el concepto general de programación reactiva, observables,

9
00:00:38,426 --> 00:00:43,930
el patrón observado y cómo se aplica en Angular.

10
00:00:43,930 --> 00:00:47,280
La programación reactiva por sí misma es un tema

11
00:00:48,460 --> 00:00:52,100
muy vasto que no se puede cubrir en diez minutos.

12
00:00:53,240 --> 00:00:54,410
La programación reactiva,

13
00:00:54,410 --> 00:00:59,800
si necesito cubrirla con todo detalle se convertirá en un curso completo por derecho propio.

14
00:00:59,800 --> 00:01:01,421
Y desafortunadamente,

15
00:01:01,421 --> 00:01:07,372
no tenemos tiempo para incrustar un curso completo en este curso en particular.

16
00:01:07,372 --> 00:01:12,718
Así que dado el hecho de que estamos interesados principalmente en cómo Angular aprovecha la programación reactiva

17
00:01:12,718 --> 00:01:18,066
para permitirnos duplicar aplicaciones Angular,

18
00:01:18,066 --> 00:01:21,590
por lo que nos concentraremos en ese aspecto.

19
00:01:21,590 --> 00:01:22,455
Pero en el camino,

20
00:01:22,455 --> 00:01:28,340
les daré una rápida introducción a los diversos conceptos en esta área general.

21
00:01:28,340 --> 00:01:30,720
Si usted se interesa en la programación reactiva,

22
00:01:30,720 --> 00:01:36,100
le aconsejo encarecidamente que busque algunos de los enlaces que he proporcionado y

23
00:01:36,100 --> 00:01:40,240
recursos adicionales para esta lección en particular.

24
00:01:40,240 --> 00:01:44,090
Usted tiene acceso a una gran cantidad de material por ahí, pero

25
00:01:44,090 --> 00:01:48,220
le daremos una fuerte conexión a tierra en la programación reactiva.

26
00:01:48,220 --> 00:01:51,713
Pero en este curso, a partir de este punto,

27
00:01:51,713 --> 00:01:57,448
veremos cómo Angular aprovecha el paradigma de programación reactiva para

28
00:01:57,448 --> 00:02:00,150
diseñar aplicaciones Angular.

29
00:02:00,150 --> 00:02:04,818
No sólo vamos a restringir sólo a esta lección, pero

30
00:02:04,818 --> 00:02:10,266
todas las lecciones posteriores también verán Usado de lo observable y

31
00:02:10,266 --> 00:02:16,220
el patrón de observación y cómo escribimos aplicaciones reactivas en angular.

32
00:02:18,080 --> 00:02:22,800
Toda la discusión sobre la programación reactiva gira en torno a

33
00:02:22,800 --> 00:02:27,770
este patrón particular de ingeniería de software llamado como patrón observable.

34
00:02:27,770 --> 00:02:31,970
Recordáis la pandilla de cuatro que os mencioné en una de las anteriores conferencias

35
00:02:31,970 --> 00:02:35,690
donde discutimos sobre el marco del controlador de vista modelo y

36
00:02:35,690 --> 00:02:38,140
el marco del modelo de vista modelo.

37
00:02:38,140 --> 00:02:43,246
La misma banda de cuatro libros contiene algunos del patrón que

38
00:02:43,246 --> 00:02:49,616
ha sido utilizado con bastante éxito en el patrón de programación reactiva.

39
00:02:49,616 --> 00:02:53,570
El patrón de observador gira en torno a observables.

40
00:02:53,570 --> 00:02:58,948
Así que tienes observables, cuyo comportamiento puede ser observado por observadores.

41
00:02:58,948 --> 00:03:02,200
Así que es por eso que esto se llama el patrón de observador.

42
00:03:02,200 --> 00:03:07,180
Declaras ciertos objetos como observables o sujetos y

43
00:03:07,180 --> 00:03:12,060
estos observables serán observados por observadores.

44
00:03:12,060 --> 00:03:15,190
Ahora, los propios observadores se registrarán en

45
00:03:16,280 --> 00:03:19,400
observar los cambios en lo observable y

46
00:03:19,400 --> 00:03:24,010
el observable notificará a los observadores cada vez que ocurran cambios.

47
00:03:24,010 --> 00:03:29,781
Así que en este patrón de observador, la forma en que estos observadores suscribirán

48
00:03:29,781 --> 00:03:35,165
a lo observable o se registrarán con lo observable.

49
00:03:35,165 --> 00:03:40,013
Entonces, así es como el observable sabe qué observadores están interesados en

50
00:03:40,013 --> 00:03:42,430
cualquier cambio en su estado.

51
00:03:42,430 --> 00:03:46,250
Así pues, cada vez que un observador observable diga,

52
00:03:46,250 --> 00:03:51,830
cambio en su estado, notificará inmediatamente a todos los observadores

53
00:03:51,830 --> 00:03:56,660
sobre el cambio de estado y los observadores posteriormente podrán tomar

54
00:03:56,660 --> 00:04:02,170
acción basada en esta notificación del cambio en lo observable.

55
00:04:02,170 --> 00:04:06,185
El patrón de observador se ha utilizado muy eficazmente en muchas circunstancias

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

57
00:04:07,212 --> 00:04:12,600
Y de hecho, el paradigma de programación reactiva se basa en él.

58
00:04:12,600 --> 00:04:15,990
Entonces, la pregunta que viene a tu mente inmediatamente es

59
00:04:15,990 --> 00:04:18,280
¿por qué hablamos de los observables?

60
00:04:18,280 --> 00:04:21,730
¿Cuál es el interés especial sobre los observables?

61
00:04:21,730 --> 00:04:26,161
El patrón de observador es una forma de escribir aplicaciones de software.

62
00:04:26,161 --> 00:04:29,760
Entonces, esto se basa en Streams.

63
00:04:29,760 --> 00:04:33,290
Por lo tanto, usted tiene datos que fluyen su aplicación.

64
00:04:33,290 --> 00:04:37,826
Estos datos se pueden ver como una secuencia de valores que fluye a través de su aplicación

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

66
00:04:38,879 --> 00:04:44,158
Entonces, la corriente es el canal principal alrededor del cual se diseña observables y

67
00:04:44,158 --> 00:04:47,380
patrón observable.

68
00:04:47,380 --> 00:04:51,007
Entonces, qué transmisiones puedes suscribirte a estas transmisiones.

69
00:04:51,007 --> 00:04:55,762
Y cada vez que un valor aparece en la secuencia, recoges ese valor y

70
00:04:55,762 --> 00:04:58,400
entonces puedes reaccionar a ese valor.

71
00:04:58,400 --> 00:05:02,430
Así que para poder reaccionar a ese valor, necesitas suscribirte a esa transmisión o

72
00:05:02,430 --> 00:05:04,710
necesitas suscribirte al observable.

73
00:05:04,710 --> 00:05:08,860
El observable con frecuencia mantendrá los valores emisores.

74
00:05:08,860 --> 00:05:13,059
Y cuando ves esos valores, el observador puede reaccionar a ellos.

75
00:05:13,059 --> 00:05:16,413
Ahora esto también significa que cuando ya no estás interesado,

76
00:05:16,413 --> 00:05:19,660
puedes darte de baja de un observable.

77
00:05:19,660 --> 00:05:23,653
Puedes decir, ya no estoy interesado en verte y luego desaparecer.

78
00:05:23,653 --> 00:05:28,794
Así que el patrón observable le permite observar periódicamente cambios,

79
00:05:28,794 --> 00:05:34,170
si quieres y luego deja de observar cuando ya no estás interesado.

80
00:05:34,170 --> 00:05:38,855
Así que ese tipo de paradigma le permite diseñar sus aplicaciones de software

81
00:05:38,855 --> 00:05:43,135
de una manera muy interesante, de una manera muy intuitiva.

82
00:05:43,135 --> 00:05:45,435
Pero para poder usar este enfoque,

83
00:05:45,435 --> 00:05:48,513
necesitas tener la cabeza alrededor de este enfoque.

84
00:05:48,513 --> 00:05:55,455
Al igual que vimos con el patrón de devolución de llamada o vimos con el uso de promesas.

85
00:05:55,455 --> 00:06:01,740
Observables es otra forma de diseñar aplicaciones.

86
00:06:01,740 --> 00:06:06,605
Entonces, un observable por sí mismo será muy perezoso y se quedará por ahí.

87
00:06:06,605 --> 00:06:10,360
Por lo tanto, puede crear un observable y luego simplemente dejarlo allí.

88
00:06:10,360 --> 00:06:12,496
El observable se activa o

89
00:06:12,496 --> 00:06:16,777
se pone caliente cuando alguien comienza a suscribirse al observador.

90
00:06:16,777 --> 00:06:21,380
Así que en ese momento, el observador entra en acción y comienza a editar valores.

91
00:06:21,380 --> 00:06:25,515
Así que si al menos un observador es confiado en lo observable,

92
00:06:25,515 --> 00:06:29,000
entonces el observable comenzará a emitir valores.

93
00:06:29,000 --> 00:06:36,010
Si nadie es confiado, observable volverá a su caparazón y permanecerá allí.

94
00:06:36,010 --> 00:06:38,058
Así que puedes pensar en ello de esa manera.

95
00:06:38,058 --> 00:06:42,231
Así que si esa imagen mental te ayuda a entender

96
00:06:42,231 --> 00:06:46,760
cómo funciona la patente del observador, entonces que así sea.

97
00:06:46,760 --> 00:06:51,939
Por lo tanto, eso le ayudará a mirar la forma en que diseñamos nuestras aplicaciones

98
00:06:51,939 --> 00:06:56,657
en los ejercicios que siguen y luego las lecciones posteriores

99
00:06:56,657 --> 00:07:01,116
donde examinamos HTTP soportado Angular con más detalle.

100
00:07:04,490 --> 00:07:11,222
Otro aspecto de los observables es el hecho de que cancelar una solicitud anterior y

101
00:07:11,222 --> 00:07:16,172
luego volver a intentarlo es muy sencillo con observables.

102
00:07:16,172 --> 00:07:20,660
La promesa que viste antes, una vez que empiezas a esperar una promesa,

103
00:07:20,660 --> 00:07:23,690
no puedes cancelar, estás esperando.

104
00:07:23,690 --> 00:07:26,878
La promesa eventualmente se resolverá o fallará y

105
00:07:26,878 --> 00:07:31,907
entonces usted tiene que reaccionar sin importar lo que incluso si ya no está interesado.

106
00:07:31,907 --> 00:07:36,075
Pero con un observable, si usted puede vender su suscripción,

107
00:07:36,075 --> 00:07:41,540
entonces que lo que sucede con lo observable no es ninguna preocupación para usted en absoluto.

108
00:07:41,540 --> 00:07:45,019
Y así no necesitas hacer nada, si cancelas tu suscripción.

109
00:07:45,019 --> 00:07:50,732
Por lo tanto, cancelar y volver a intentarlo en caso de que la prueba anterior no tenga éxito

110
00:07:50,732 --> 00:07:55,599
es muy sencillo con observables.

111
00:07:55,599 --> 00:08:01,710
Veremos algunos de estos comportamientos con más detalle en los ejercicios que siguen.

112
00:08:03,050 --> 00:08:06,771
Esto nos lleva a ese concepto de programación reactiva.

113
00:08:06,771 --> 00:08:11,071
La programación reactiva se basa en el patrón de observador y

114
00:08:11,071 --> 00:08:13,550
también en un patrón iterado.

115
00:08:13,550 --> 00:08:14,243
Pero de todos modos,

116
00:08:14,243 --> 00:08:18,610
el patrón de observador es la característica dominante de una programación reactiva.

117
00:08:18,610 --> 00:08:22,670
Así que en la programación reactiva, estamos interesados en los flujos de datos.

118
00:08:22,670 --> 00:08:25,780
Cómo fluyen los datos a través de su aplicación.

119
00:08:25,780 --> 00:08:29,450
Cualquier flujo de datos se puede tratar como una secuencia.

120
00:08:29,450 --> 00:08:34,510
Por lo tanto, este flujo de datos puede propagar cambios a través de su aplicación.

121
00:08:34,510 --> 00:08:37,940
Y mientras los cambios se propagan a través de la aplicación,

122
00:08:39,140 --> 00:08:43,440
en etapas intermedias puede incluso tomar un flujo en particular,

123
00:08:43,440 --> 00:08:46,860
modificarlo y crear otro flujo saliendo desde allí.

124
00:08:46,860 --> 00:08:51,980
Así que eso es lo que un patrón observable nos permite dibujar.

125
00:08:51,980 --> 00:08:58,000
Para que todo el paradigma de programación se construya alrededor de flujos o flujos de datos.

126
00:08:58,000 --> 00:09:04,540
Así que esta es otra forma de tratar de resolver tu problema.

127
00:09:04,540 --> 00:09:10,180
Y es por eso que estoy enfatizando el hecho de que usted necesita para dar vueltas a

128
00:09:10,180 --> 00:09:17,120
entender cómo el patrón reactivo o cómo la programación reactiva se hace en la práctica.

129
00:09:17,120 --> 00:09:20,810
Ahora, a menudo escuchas a la gente hablando de algo llamado programación funcional

130
00:09:20,810 --> 00:09:22,290
reactiva.

131
00:09:22,290 --> 00:09:25,640
Si está familiarizado con el paradigma de programación funcional.

132
00:09:25,640 --> 00:09:28,430
Pero además de la programación reactiva

133
00:09:28,430 --> 00:09:32,400
es lo que la gente a menudo se refiere como programación reactiva funcional.

134
00:09:32,400 --> 00:09:35,670
Así que el matrimonio entre estos dos enfoques.

135
00:09:35,670 --> 00:09:40,340
Ahora, verá el uso de algunos de estos con Angular

136
00:09:40,340 --> 00:09:43,720
a medida que vaya a través de este curso en particular.

137
00:09:43,720 --> 00:09:46,010
Finalmente, ¿qué pasa con RxJS?

138
00:09:46,010 --> 00:09:49,890
¿Qué papel juega en todo este ecosistema?

139
00:09:49,890 --> 00:09:55,280
RxJS es una implementación de JavaScript del patrón observable y

140
00:09:55,280 --> 00:09:58,750
también soporte para programación reactiva.

141
00:09:58,750 --> 00:10:03,820
Entonces, si hicieras programación reactiva en JavaScript,

142
00:10:03,820 --> 00:10:07,820
entonces aprovechas la biblioteca RxJS para hacerlo.

143
00:10:07,820 --> 00:10:10,790
RxJS solo una de esas implementaciones.

144
00:10:10,790 --> 00:10:15,990
Hay algunos otros pero la razón por la que estamos interesados en RxJS en particular

145
00:10:15,990 --> 00:10:20,860
en este curso es porque Angular aprovecha RxJS para

146
00:10:20,860 --> 00:10:23,880
su soporte para la programación reactiva.

147
00:10:23,880 --> 00:10:26,190
Entonces el RxJS es una biblioteca.

148
00:10:26,190 --> 00:10:28,480
Es una biblioteca separada que está por ahí.

149
00:10:28,480 --> 00:10:35,010
También puede usar RxJS para otros fines, no necesariamente relacionados con Angular.

150
00:10:35,010 --> 00:10:39,960
Ha habido aplicaciones que se han desarrollado usando RxJS per se

151
00:10:39,960 --> 00:10:42,400
no relacionadas con Angular.

152
00:10:42,400 --> 00:10:46,955
Pero en este curso, estamos interesados en cómo RxJS se une con

153
00:10:46,955 --> 00:10:52,480
el Angular para apoyar la programación reactiva en Angular.

154
00:10:52,480 --> 00:10:57,790
Así que RxJS es una biblioteca que le permite hacer programación asíncrona.

155
00:10:57,790 --> 00:11:01,800
Hemos hablado de programación asíncrona que promete antes.

156
00:11:01,800 --> 00:11:06,300
Veremos programación asíncrona con devoluciones de llamada en el curso del nodo.

157
00:11:06,300 --> 00:11:11,380
Y observables es otra forma de mirar la programación asíncrona

158
00:11:11,380 --> 00:11:16,530
, junto con el programador impulsado por eventos.

159
00:11:16,530 --> 00:11:20,320
Así que si está familiarizado con el paradigma de programación impulsado por eventos,

160
00:11:20,320 --> 00:11:24,230
RxJS encaja bien dentro de ese entorno.

161
00:11:25,970 --> 00:11:30,290
Todo está construido alrededor de secuencias Observables.

162
00:11:30,290 --> 00:11:37,160
Y la biblioteca RxJS le proporciona un tipo de núcleo llamado como Observable.

163
00:11:37,160 --> 00:11:39,810
Y alrededor de este tipo de núcleo, usted tiene algunos tipos de satélite

164
00:11:39,810 --> 00:11:44,390
que se construyen llamados como observadores, planificadores y sujetos.

165
00:11:44,390 --> 00:11:47,520
Todo esto le permite hacer programación reactiva.

166
00:11:48,620 --> 00:11:54,445
Además, RxJS también admite un montón de operadores.

167
00:11:55,745 --> 00:11:59,345
Soporta operadores, separadores, lo siento.

168
00:11:59,345 --> 00:12:02,545
Eso fue un resbalón de mi lengua.

169
00:12:03,872 --> 00:12:06,642
RxJS soporta operadores, operadores

170
00:12:06,642 --> 00:12:11,292
que se inspiran en los operadores de matriz JavaScript.

171
00:12:11,292 --> 00:12:15,892
Si está familiarizado con los operadores de matrices JavaScript como el mapa, entonces

172
00:12:18,202 --> 00:12:22,232
los operadores RxJS se verán muy familiares para usted.

173
00:12:22,232 --> 00:12:25,372
Puede tratar un observable y

174
00:12:25,372 --> 00:12:30,340
los valores que una imagen observable como una matriz, por lo que es por eso que muchos de

175
00:12:30,340 --> 00:12:36,170
los operadores de matriz encuentran su camino en RxJS y programación reactiva también.

176
00:12:36,170 --> 00:12:40,250
Así que los usuarios mapear, filtrar, reducir y

177
00:12:40,250 --> 00:12:46,440
otros operadores de array también encontrarán un lugar en RxJS y programación reactiva.

178
00:12:46,440 --> 00:12:51,890
Y esto es lo que le permite manejar eventos asincrónicos como colecciones.

179
00:12:51,890 --> 00:12:55,092
Entonces, cuando quiera esperar a

180
00:12:55,092 --> 00:12:59,770
un evento asincrónico, será similar a suscribirse a un observable.

181
00:12:59,770 --> 00:13:03,684
Así que cuando ese observable emite el valor, estás listo para capturar el valor y

182
00:13:03,684 --> 00:13:05,550
luego actuar en consecuencia.

183
00:13:05,550 --> 00:13:07,960
Usted sabe cuándo va a tener lugar esa emisión.

184
00:13:07,960 --> 00:13:13,220
Entonces esa es la parte asíncrona que entra en juego con el uso de RxJS.

185
00:13:14,550 --> 00:13:19,480
Y como ya mencioné, la razón por la que estamos interesados en RxJS es porque

186
00:13:19,480 --> 00:13:22,750
Angular aprovecha la biblioteca RxJS para

187
00:13:23,900 --> 00:13:27,840
haciendo su soporte para la programación reactiva.

188
00:13:27,840 --> 00:13:31,080
Angular en sí tiene un número de observables construidos,

189
00:13:31,080 --> 00:13:32,369
como veremos en poco tiempo.

190
00:13:33,430 --> 00:13:38,430
Cuando usted entra en el mundo de la programación reactiva, a menudo escuchará a la gente hablando

191
00:13:38,430 --> 00:13:42,230
sobre observables, luego escuchará a la gente hablando de operadores y

192
00:13:42,230 --> 00:13:45,830
entonces también escuchará a la gente hablando de diagramas de mármol.

193
00:13:45,830 --> 00:13:49,290
Ahora, los diagramas de mármol son una forma de representar

194
00:13:50,390 --> 00:13:53,730
la programación reactiva usando observables.

195
00:13:53,730 --> 00:13:55,710
Así que si tienes un observable,

196
00:13:56,830 --> 00:14:02,070
entonces si ves este observable como una función del tiempo,

197
00:14:02,070 --> 00:14:06,710
por lo que si este eje representa una función del tiempo, el

198
00:14:06,710 --> 00:14:12,090
observable emitirá periódicamente valores como este, uno tras otro.

199
00:14:12,090 --> 00:14:16,896
Así que si organizas estos valores a lo largo de una secuencia,

200
00:14:16,896 --> 00:14:21,540
como una función del tiempo, por lo que verías los valores que se emiten de esta manera.

201
00:14:22,680 --> 00:14:26,350
También existe la posibilidad de que encuentre un error.

202
00:14:27,750 --> 00:14:30,990
En cuyo caso, debe manejar el error apropiadamente.

203
00:14:30,990 --> 00:14:32,510
Si maneja el error correctamente,

204
00:14:32,510 --> 00:14:37,830
puede continuar o puede detenerse en ese punto.

205
00:14:37,830 --> 00:14:41,520
Del mismo modo, cuando un observable completa todas sus iteraciones,

206
00:14:41,520 --> 00:14:44,730
entonces se marcará como la finalización de lo observable.

207
00:14:44,730 --> 00:14:49,570
Por lo tanto, debe ser capaz de manejar incluso el evento de finalización en un observable.

208
00:14:49,570 --> 00:14:54,500
Dado este tiempo el comportamiento anotado de lo observable, puede tomar

209
00:14:54,500 --> 00:15:00,240
los valores que la imagen observable y aplicar operadores en esos observables.

210
00:15:00,240 --> 00:15:04,680
Ahora estos valores se pueden ver como una matriz.

211
00:15:04,680 --> 00:15:10,120
Si eso te ayuda a comprender mejor, puedes verlo como una matriz de valores.

212
00:15:10,120 --> 00:15:15,140
Ahora, estos valores pueden ser operados usando varios operadores.

213
00:15:15,140 --> 00:15:21,630
Así que ahí es donde soporta su mapa, su filtro, su reducción y varios operadores que

214
00:15:21,630 --> 00:15:26,560
cualquier biblioteca de programas reactivos típicos como RxJS.

215
00:15:26,560 --> 00:15:29,010
Le permite transformar

216
00:15:29,010 --> 00:15:33,590
un conjunto de valores que obtiene de un observable en otro conjunto de valores.

217
00:15:33,590 --> 00:15:36,640
De este modo, terminas creando un nuevo observable.

218
00:15:36,640 --> 00:15:39,170
Y este nuevo observable consistirá en

219
00:15:39,170 --> 00:15:42,830
valores transformados desde el observable original.

220
00:15:42,830 --> 00:15:48,294
Así que esa es la razón por la que muestro estos valores transformados como rectángulos aquí.

221
00:15:48,294 --> 00:15:52,861
Sólo para darle una impresión visual de lo que es lo que estamos tratando de hacer con

222
00:15:52,861 --> 00:15:54,170
un operador.

223
00:15:54,170 --> 00:15:58,620
Así que estás tomando un valor y luego transformándolo en un valor diferente.

224
00:15:58,620 --> 00:16:01,640
Y esa secuencia de esos diferentes valores que

225
00:16:01,640 --> 00:16:06,400
Usted obtiene transformando los valores emitidos por un observable.

226
00:16:06,400 --> 00:16:11,390
se convertirá en otra cadena de valores, y en consecuencia,

227
00:16:11,390 --> 00:16:12,880
se convertirá en otra observable.

228
00:16:12,880 --> 00:16:16,820
Entonces puedes derivar uno observable de otro observable.

229
00:16:16,820 --> 00:16:19,335
Pero este segundo observable depende del primero, por lo que depende.

230
00:16:19,335 --> 00:16:26,600
Su comportamiento se tipeó, el primero mediante el uso de este operador.

231
00:16:26,600 --> 00:16:31,730
Veremos ejemplos de estos a medida que pasamos por algunos de los ejercicios

232
00:16:31,730 --> 00:16:37,210
en esta lección y lecciones posteriores.

233
00:16:37,210 --> 00:16:41,450
¿Qué pasa con Angular y RxJS, cómo se unen?

234
00:16:41,450 --> 00:16:48,540
Angular, como mencionamos anteriormente, admite una serie de observables por sí mismo.

235
00:16:48,540 --> 00:16:53,375
Y este soporte de observables en Angular le permite hacer una programación reactiva

236
00:16:53,375 --> 00:16:59,070
dentro de su aplicación Angular.

237
00:16:59,070 --> 00:17:02,210
Así, por ejemplo, formas en Angular,

238
00:17:02,210 --> 00:17:06,340
vimos formas reactivas ya en una de las lecciones anteriores.

239
00:17:06,340 --> 00:17:11,040
En ese momento, nunca mencioné la palabra observable explícitamente allí.

240
00:17:11,040 --> 00:17:15,725
Pero ahora que sabemos observable, volveremos a la forma reactiva, y

241
00:17:15,725 --> 00:17:18,440
luego haremos alguna transformación a la forma reactiva.

242
00:17:18,440 --> 00:17:21,460
Las formas mismas se convierten en observables en Angular.

243
00:17:21,460 --> 00:17:26,337
Y cualquier cambio en los valores de cualquiera de los elementos del formulario,

244
00:17:26,337 --> 00:17:30,605
puede ser producido, y observado suscribiéndose a

245
00:17:30,605 --> 00:17:36,280
lo observable que el marco Angular proporciona para nosotros.

246
00:17:36,280 --> 00:17:41,934
Del mismo modo, HTTP, que encontraremos en el siguiente módulo de este curso,

247
00:17:41,934 --> 00:17:46,500
también estará basado en observables.

248
00:17:46,500 --> 00:17:52,720
Entonces, cuando su servicio va y recupera datos de un servidor, la biblioteca HTTP,

249
00:17:52,720 --> 00:17:56,750
o el módulo HTTP en Angular, admite observables.

250
00:17:56,750 --> 00:17:59,780
Así que cada vez que realice cualquiera de los métodos, get, put, post o

251
00:17:59,780 --> 00:18:04,160
delete, usando HTTP, le darán un

252
00:18:04,160 --> 00:18:07,730
observable que luego puede suscribirse dentro de su servicio.

253
00:18:07,730 --> 00:18:11,495
Y luego transformarlo, y luego dárselo a sus componentes, y

254
00:18:11,495 --> 00:18:13,958
los componentes pueden suscribirse a los observables.

255
00:18:13,958 --> 00:18:18,410
El servicio se proporciona mediante la transformación de las secuencias HTTP.

256
00:18:18,410 --> 00:18:21,780
Y ahí es donde la programación reactiva y el flujo

257
00:18:21,780 --> 00:18:27,800
de datos a través de su aplicación Angular se vuelven muy sencillos.

258
00:18:27,800 --> 00:18:32,840
Del mismo modo, hay un AsyncPipe, que encontrará más adelante en este curso.

259
00:18:32,840 --> 00:18:38,631
Y también la detección de cambios construida alrededor de observables en Angular.

260
00:18:38,631 --> 00:18:44,310
Verá algunos ejemplos de esto en el resto de este curso.

261
00:18:44,310 --> 00:18:49,110
Ahora, volviendo a la pregunta que vimos en la diapositiva anterior.

262
00:18:49,110 --> 00:18:53,615
¿Cómo se toma un observable y lo transforma en otro observable?

263
00:18:53,615 --> 00:19:01,465
He aquí un ejemplo que se encontrará en el ejercicio que sigue a esta conferencia.

264
00:19:01,465 --> 00:19:07,415
Así que aquí, tenemos el parámetro de ruta

265
00:19:07,415 --> 00:19:12,410
dentro de nuestro componente de menú, que utiliza el parámetro de ruta para

266
00:19:12,410 --> 00:19:17,710
proporcionar el valor del plato seleccionado al componente de detalle del plato.

267
00:19:17,710 --> 00:19:20,250
Entonces, el parámetro de ruta se convierte en un observable.

268
00:19:20,250 --> 00:19:24,905
El módulo de enrutador de Angular tiene un servicio ActivatedRoute de actividad que

269
00:19:24,905 --> 00:19:30,435
admite un montón de observables y uno de ellos es los parámetros observables.

270
00:19:30,435 --> 00:19:33,996
Los parámetros observables están vinculados a los parámetros de ruta.

271
00:19:33,996 --> 00:19:37,615
Y así cualquier cambio en los parámetros,

272
00:19:37,615 --> 00:19:43,620
en la URL que encuentre se emitirá como observable.

273
00:19:43,620 --> 00:19:47,521
Ahora, entonces cuando obtienes el observable, para que como puedes ver,

274
00:19:47,521 --> 00:19:53,010
puedes obtener acceso a este observable diciendo que esta ruta params en tu código.

275
00:19:53,010 --> 00:19:55,415
Entonces los parámetros en sí son observables aquí.

276
00:19:55,415 --> 00:19:57,666
Ahora, a este parámetro observable,

277
00:19:57,666 --> 00:20:02,970
puede aplicar un operador como un operador aquí llamado switchmap.

278
00:20:02,970 --> 00:20:05,830
Veremos el uso de esto en el ejercicio.

279
00:20:05,830 --> 00:20:09,840
El operador switchmap toma los parámetros observables.

280
00:20:09,840 --> 00:20:17,190
Y luego transforma los parámetros observables en otro observable que es un plato.

281
00:20:17,190 --> 00:20:21,861
Toma el valor de params, y luego extrae el valor de ID de los params,

282
00:20:21,861 --> 00:20:25,493
que le da acceso al parámetro de ruta, el id, o

283
00:20:25,493 --> 00:20:30,708
el parámetro que ha especificado, y luego lo usa para ir y buscar el plato.

284
00:20:30,708 --> 00:20:38,265
Así que cada vez que cambie el parámetro, resultará en una recuperación de un nuevo plato.

285
00:20:38,265 --> 00:20:42,045
Y así cada vez que cambia el parámetro,

286
00:20:42,045 --> 00:20:47,290
que es equivalente a emitir un nuevo valor por sus parámetros observables.

287
00:20:47,290 --> 00:20:50,850
Que se transforma en buscar el nuevo plato para

288
00:20:50,850 --> 00:20:53,190
que es el ID correspondiente.

289
00:20:53,190 --> 00:20:56,240
Así que el plato se convertirá en otro observable.

290
00:20:56,240 --> 00:21:01,100
Ahora, cuando este plato observable esté disponible, puedes suscribirte a este plato

291
00:21:01,100 --> 00:21:05,850
observable aquí, y obtener el valor del plato.

292
00:21:05,850 --> 00:21:10,490
Y cuando obtengas el valor del plato, entonces puedes tomar el valor del plato, y luego

293
00:21:10,490 --> 00:21:17,742
crea tu variable de plato dentro de tu componente de detalle del plato a ese valor del plato.

294
00:21:17,742 --> 00:21:22,468
Así pues, cualquier cambio en el parámetro de ruta se propaga a través de este operador

295
00:21:22,468 --> 00:21:25,224
switchmap en un observable,

296
00:21:25,224 --> 00:21:28,296
que cuando se observa a través del suscrito,

297
00:21:28,296 --> 00:21:32,569
le permitirá transformar eso y asignarlo a otro plato.

298
00:21:32,569 --> 00:21:37,236
Y cuando esto sucede, tu vista puede actualizarse con

299
00:21:37,236 --> 00:21:41,915
el nuevo plato que se ha obtenido del servicio.

300
00:21:41,915 --> 00:21:47,106
Así que ahora, verá cómo los datos fluyen a través del parámetro de ruta,

301
00:21:47,106 --> 00:21:50,184
a través del operador switchmap, y

302
00:21:50,184 --> 00:21:55,985
en el resultado del cambio de la vista de su componente de detalle de plato.

303
00:21:55,985 --> 00:22:01,000
Esa es la razón por la cual la programación basada observable o la programación reactiva

304
00:22:01,000 --> 00:22:05,060
en Angular se vuelve muy útil para

305
00:22:05,060 --> 00:22:09,070
implementar ciertas características dentro de su aplicación Angular.

306
00:22:09,070 --> 00:22:11,034
Este es uno de esos ejemplos.

307
00:22:11,034 --> 00:22:15,984
Veremos el uso de este ejemplo particular en

308
00:22:15,984 --> 00:22:20,332
el ejercicio que sigue a esta conferencia.

309
00:22:20,332 --> 00:22:22,658
Pensé que haría que sea fácil para

310
00:22:22,658 --> 00:22:27,970
recordar todo esto simplemente cantando esta Oda a Observables.

311
00:22:27,970 --> 00:22:34,948
[MÚSICA]

312
00:22:34,948 --> 00:22:37,469
Deberías cantar esto a la melodía de,

313
00:22:37,469 --> 00:22:42,310
You Can Call Me Al por Paul Simon de la fama de Simon y Garfunkel.

314
00:22:42,310 --> 00:22:46,000
Si te estás dando la vuelta y diciendo, ¿quién es Paul Simon?

315
00:22:46,000 --> 00:22:47,385
Lo siento, generación diferente.

316
00:22:47,385 --> 00:22:53,670
[MÚSICA]