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

2
00:00:04,711 --> 00:00:06,798
Si tienes un sitio web estático,

3
00:00:06,798 --> 00:00:11,735
entonces tienes todos los datos que necesitas para construir tu sitio web.

4
00:00:11,735 --> 00:00:17,790
Y será creado una vez y su sitio web está listo para funcionar.

5
00:00:17,790 --> 00:00:23,208
Pero muchos sitios web en estos días son impulsados por datos del backend.

6
00:00:23,208 --> 00:00:27,721
Su aplicación web recuperará datos de un servidor back-end y

7
00:00:27,721 --> 00:00:32,667
los usará para diseñar dinámicamente el contenido en su sitio web, o

8
00:00:32,667 --> 00:00:35,474
incluso actualizará el contenido en su sitio web.

9
00:00:35,474 --> 00:00:40,090
Entonces, esto requiere que los datos fluyan desde el back-end a través de

10
00:00:40,090 --> 00:00:43,410
su aplicación web al DOM.

11
00:00:43,410 --> 00:00:49,161
Y cualquier interacción del usuario en el DOM debe transmitirse de nuevo a su aplicación web.

12
00:00:49,161 --> 00:00:54,211
Entonces esto requiere la comunicación entre el DOM y

13
00:00:54,211 --> 00:00:59,920
su componente en el marco angular, por ejemplo.

14
00:00:59,920 --> 00:01:03,268
Veamos cómo sucede esto dentro del marco angular y

15
00:01:03,268 --> 00:01:04,880
con un poco más de detalle.

16
00:01:06,900 --> 00:01:11,420
Lo que hemos aprendido hasta ahora es cómo se prepara un componente.

17
00:01:11,420 --> 00:01:17,129
Así que vimos que el componente tiene dos partes principales, el archivo mecanografiado

18
00:01:17,129 --> 00:01:24,380
donde se define la arquitectura del componente, y las propiedades.

19
00:01:24,380 --> 00:01:29,480
Y los métodos de y luego tiene la plantilla que

20
00:01:29,480 --> 00:01:34,430
define cómo se presenta el contenido y se agrega al DOM.

21
00:01:34,430 --> 00:01:38,410
Así que la plantilla es la que va a suministrar por un componente a

22
00:01:38,410 --> 00:01:41,640
ocupar una parte de su página web.

23
00:01:41,640 --> 00:01:45,870
Así que la plantilla forma el medio de comunicación a su DOM.

24
00:01:45,870 --> 00:01:52,210
Y esta plantilla requiere que se obtengan datos de su componente en orden

25
00:01:53,450 --> 00:02:00,040
para representar partes del contenido en su plantilla y

26
00:02:00,040 --> 00:02:04,105
correspondientemente dentro del DOM de su página web.

27
00:02:05,250 --> 00:02:11,662
Ahora, si no tuviste el lujo de un framework como Angular,

28
00:02:11,662 --> 00:02:16,442
tienes que lidiar con todos los detalles sobre cómo

29
00:02:16,442 --> 00:02:21,586
los datos fluyen desde el sitio de la aplicación al DOM.

30
00:02:21,586 --> 00:02:25,696
Y cómo los eventos de interacción del usuario que causó en

31
00:02:25,696 --> 00:02:29,980
el DOM serán enviados de vuelta a su aplicación.

32
00:02:29,980 --> 00:02:33,851
Afortunadamente, con marcos funciona como Angular,

33
00:02:33,851 --> 00:02:38,520
admiten todos estos comportamientos inherentemente.

34
00:02:38,520 --> 00:02:44,047
Ahora ya hemos visto un uso del flujo de datos desde una propiedad de componentes

35
00:02:44,047 --> 00:02:48,504
a la plantilla en los ejercicios anteriores.

36
00:02:48,504 --> 00:02:54,433
Donde usamos las llaves dobles para proporcionar información que

37
00:02:54,433 --> 00:03:02,050
es de una variable en el código TypeScript de su componente, a su plantilla.

38
00:03:02,050 --> 00:03:03,830
Veremos otras maneras, y

39
00:03:03,830 --> 00:03:08,670
luego también en el ejercicio que sigue, haremos uso de esto,

40
00:03:08,670 --> 00:03:14,370
para modificar la aplicación angular que hemos estado desarrollando hasta ahora.

41
00:03:15,570 --> 00:03:18,975
Lo que hemos estado hablando, hasta ahora, es enlace de datos,

42
00:03:18,975 --> 00:03:23,972
un mecanismo para coordinar el flujo de información entre la plantilla y

43
00:03:23,972 --> 00:03:27,468
el componente, o entre el DOM y el componente.

44
00:03:27,468 --> 00:03:30,627
En el nivel de componente, es algún tipo de propiedad o

45
00:03:30,627 --> 00:03:35,215
un método que debe suministrarse a la plantilla o invocarse desde el DOM.

46
00:03:35,215 --> 00:03:38,269
O en el lado de la plantilla, puede ser cierta información

47
00:03:38,269 --> 00:03:41,890
que la plantilla requiere para ser renderizada en el DOM o

48
00:03:41,890 --> 00:03:45,905
incluso desde el DOM capturado y enviado de vuelta a su componente.

49
00:03:45,905 --> 00:03:50,886
Entonces, todo esto requiere que los datos fluyan desde el componente a

50
00:03:50,886 --> 00:03:55,868
la plantilla o eventos que se recopilan desde el DOM o

51
00:03:55,868 --> 00:04:01,735
se envíen de vuelta a su componente para que actúe sobre esos eventos.

52
00:04:01,735 --> 00:04:07,967
Ahora esto se puede manejar fácilmente en un marco angular usando cuatro tipos

53
00:04:07,967 --> 00:04:14,850
diferentes de flujo de información que resumiremos en la siguiente diapositiva.

54
00:04:14,850 --> 00:04:19,150
Volviendo a la interacción entre el componente y la plantilla,

55
00:04:19,150 --> 00:04:22,820
ya hemos visto el primer tipo de interacción entre el componente y

56
00:04:22,820 --> 00:04:27,800
la plantilla donde el valor de una propiedad fluía en la plantilla.

57
00:04:27,800 --> 00:04:31,130
Así que vimos el uso del nombre del plato,

58
00:04:31,130 --> 00:04:35,720
la descripción del plato, los detalles del comentario del plato y así

59
00:04:35,720 --> 00:04:40,910
en ser suministrado con el fin de proporcionar información en su plantilla.

60
00:04:40,910 --> 00:04:47,210
Así que ahí es donde estábamos usando las llaves dobles para incluir el hecho de que

61
00:04:47,210 --> 00:04:53,030
un valor de su componente se está utilizando en su plantilla.

62
00:04:53,030 --> 00:04:58,160
Otro tipo de flujo de información que verá es donde

63
00:04:58,160 --> 00:05:04,930
especifica algún tipo de propiedad asociada con una etiqueta entre corchetes.

64
00:05:04,930 --> 00:05:11,670
Y luego asígnelo como el valor de una de las propiedades en su componente.

65
00:05:12,790 --> 00:05:17,010
Este tipo de enfoque veremos en el ejercicio que sigue a

66
00:05:17,010 --> 00:05:19,210
justo después de esta conferencia.

67
00:05:19,210 --> 00:05:22,160
Así que aquí especificaríamos algo entre corchetes.

68
00:05:22,160 --> 00:05:23,100
Así que ten cuidado con

69
00:05:23,100 --> 00:05:28,880
un ejemplo de eso en el ejercicio donde voy a discutir más sobre esto.

70
00:05:28,880 --> 00:05:32,640
Del mismo modo, si tiene un evento generado cerca de DOM,

71
00:05:32,640 --> 00:05:36,840
ese evento puede resultar en la llamada a un controlador o

72
00:05:36,840 --> 00:05:42,280
un método En su componente que se encargará de manejar este evento.

73
00:05:42,280 --> 00:05:45,310
Entonces, los métodos que van a ser invocados por

74
00:05:45,310 --> 00:05:50,220
los eventos de su DOM se conocen como manejadores.

75
00:05:50,220 --> 00:05:55,670
Entonces, el mango no es más que, como dije, un método, que también podría

76
00:05:55,670 --> 00:06:01,039
se pasa en algún parámetro dentro de los métodos de controlador allí.

77
00:06:02,790 --> 00:06:09,620
Más adelante, cuando miremos los formularios, veremos un enlace de datos bidireccional.

78
00:06:09,620 --> 00:06:16,190
Así que los tres que hemos visto hasta ahora, el flujo del valor de

79
00:06:16,190 --> 00:06:20,910
el componente a la plantilla o la propiedad que se asigna a un valor o

80
00:06:20,910 --> 00:06:26,380
el evento que se asigna a un controlador para manejar el evento.

81
00:06:26,380 --> 00:06:29,780
Todos estos son lo que nos referimos como enlaces de datos de una sola manera porque

82
00:06:31,010 --> 00:06:33,240
fluyen solo en una dirección.

83
00:06:33,240 --> 00:06:37,810
También puede tener flujo bidireccional donde también podría verlo

84
00:06:37,810 --> 00:06:41,200
en la sintaxis lo que especificaría con corchetes.

85
00:06:41,200 --> 00:06:44,590
Y luego encerrado dentro de eso con paréntesis estándar.

86
00:06:44,590 --> 00:06:47,772
Un dentro de allí especificará algo así como un ngModel.

87
00:06:47,772 --> 00:06:52,575
Verá el uso de esto cuando se forme más adelante en el siguiente módulo.

88
00:06:52,575 --> 00:06:55,215
Así que aquí es donde asignarás una propiedad a eso.

89
00:06:55,215 --> 00:06:58,675
Entonces, en este caso, el flujo de información es bidireccional.

90
00:06:58,675 --> 00:07:03,789
Por lo tanto, cualquier cambio en su DOM se reflejará de nuevo en su propiedad y

91
00:07:03,789 --> 00:07:05,029
el componente.

92
00:07:05,029 --> 00:07:08,785
Cualquier cambio en la propiedad del componente se reflejará de nuevo en el DOM.

93
00:07:08,785 --> 00:07:12,700
Tenga en cuenta la sintaxis específica que usamos para

94
00:07:12,700 --> 00:07:15,918
especificando el modelo ngModel en este ejemplo aquí.

95
00:07:15,918 --> 00:07:21,100
Usamos un corchete cuadrado y dentro de eso usamos el paréntesis estándar allí.

96
00:07:22,390 --> 00:07:25,640
Permítanme ahora resumir lo que acabamos de aprender acerca de

97
00:07:25,640 --> 00:07:30,620
el enlace de datos en la diapositiva anterior en esta tabla.

98
00:07:30,620 --> 00:07:36,890
Así que en esta tabla, estamos mostrando las diferentes formas en que se utiliza el enlace de datos.

99
00:07:36,890 --> 00:07:41,610
Enlace de datos unidireccional desde el origen de datos al destino de la vista, por lo que

100
00:07:41,610 --> 00:07:45,370
desde el componente al DOM,

101
00:07:45,370 --> 00:07:51,720
estamos usando una expresión de doble llave dentro de allí.

102
00:07:51,720 --> 00:07:55,970
Esto es lo que nos referimos como Interpolación como ejemplo de la cual,

103
00:07:55,970 --> 00:08:01,080
sería el nombre del plato, encerrado dentro de las llaves dobles como hemos visto,

104
00:08:01,080 --> 00:08:06,030
utilizado en los ejercicios, en el módulo anterior.

105
00:08:06,030 --> 00:08:11,345
Entonces tenemos, el segundo tipo donde encierra el objetivo

106
00:08:11,345 --> 00:08:17,385
dentro de un corchete cuadrado y luego lo asigna a una expresión en el lado derecho.

107
00:08:17,385 --> 00:08:22,450
Estas expresiones podrían ser expresiones JavaScript con algunas limitaciones.

108
00:08:22,450 --> 00:08:25,600
Los ejemplos que normalmente veremos serían

109
00:08:25,600 --> 00:08:30,960
usando una propiedad de una de las clases allí.

110
00:08:30,960 --> 00:08:34,390
Por lo tanto, esto es lo que nos referimos como un atributo de propiedad, y

111
00:08:34,390 --> 00:08:38,878
ejemplo de los cuales verá en el ejercicio que sigue a esta conferencia.

112
00:08:38,878 --> 00:08:44,333
Donde verías el uso de un plato, encerrado dentro de un corchete cuadrado,

113
00:08:44,333 --> 00:08:51,650
siendo equiparado a un SelectedDish, que es una variable declarada dentro de un componente.

114
00:08:51,650 --> 00:08:56,770
Esto también se puede expresar usando un enlace target,

115
00:08:56,770 --> 00:08:58,680
una forma de expresar lo mismo.

116
00:08:58,680 --> 00:09:04,630
Así que ambos, ya sea que encierra un objetivo entre corchetes o destino enlazado.

117
00:09:04,630 --> 00:09:07,550
Entonces, por ejemplo, se puede ver bind-dish.

118
00:09:07,550 --> 00:09:11,820
Así que cualquiera que sea la forma en que expreses esto, ambos se refieren a lo mismo.

119
00:09:11,820 --> 00:09:17,528
Por lo tanto, se especifica el atributo de propiedad o se especifica el estilo de clase.

120
00:09:17,528 --> 00:09:22,367
Ahora el flujo unidireccional de información desde el objetivo de vista a

121
00:09:22,367 --> 00:09:27,401
la fuente de datos generalmente se expresa con el objetivo encerrado

122
00:09:27,401 --> 00:09:32,780
entre paréntesis aquí o también se puede expresar como en destino.

123
00:09:32,780 --> 00:09:36,610
Y en el lado derecho sería una declaración.

124
00:09:36,610 --> 00:09:41,523
Una declaración podría ser algún tipo de expresión JavaScript normalmente

125
00:09:41,523 --> 00:09:46,532
estaría en la invocación de un método dentro de un componente.

126
00:09:46,532 --> 00:09:51,668
Bueno, verá un ejemplo en el ejercicio que sigue donde

127
00:09:51,668 --> 00:09:57,611
habría clic dentro del paréntesis y asignado a onSelect.

128
00:09:57,611 --> 00:10:02,700
Que es un método descrito dentro de una clase

129
00:10:02,700 --> 00:10:10,540
componente allí con un plato de parámetros que se suministra a este método allí.

130
00:10:10,540 --> 00:10:15,920
El enlace de datos bidireccional como vimos sería con escudero y paréntesis,

131
00:10:15,920 --> 00:10:21,320
escudero paréntesis y paréntesis que se equipara a una expresión.

132
00:10:21,320 --> 00:10:26,380
Veremos el enlace de datos bidireccional como un conjunto con formularios un poco más tarde donde

133
00:10:26,380 --> 00:10:31,843
usará algo así como un ngModel, encerrado dentro de los corchetes y

134
00:10:31,843 --> 00:10:35,647
paréntesis, equiparado a algo así como dish.name.

135
00:10:35,647 --> 00:10:40,438
Que conecta el elemento de formulario a una propiedad de

136
00:10:40,438 --> 00:10:44,640
un objeto JavaScript, en nuestro componente.

137
00:10:46,260 --> 00:10:50,240
También puede expresar esto como bindon-target.

138
00:10:50,240 --> 00:10:52,401
Que es otra forma de decir lo mismo.

139
00:10:52,401 --> 00:10:56,866
Ahora, este enlace de datos bidireccional que hacemos es a veces

140
00:10:56,866 --> 00:11:00,630
jocularmente referido como un plátano en una caja.

141
00:11:00,630 --> 00:11:04,630
Así que si nos fijamos en los corchetes con el paréntesis dentro,

142
00:11:04,630 --> 00:11:06,110
parece un plátano en una caja.

143
00:11:06,110 --> 00:11:11,550
Por lo tanto, usted podría ver esto siendo usado en alguna de la documentación o

144
00:11:11,550 --> 00:11:14,580
en algunos de los blogs que usted podría leer en Internet.

145
00:11:15,970 --> 00:11:19,920
Ampliando aún más los objetivos vinculantes que hemos visto,

146
00:11:19,920 --> 00:11:23,720
los objetivos vinculantes son las propiedades que se declaran en el lado izquierdo

147
00:11:23,720 --> 00:11:27,310
de la declaración vinculante de esa declaración de enlace de datos.

148
00:11:27,310 --> 00:11:33,280
Normalmente, encerrado dentro de corchetes o entre paréntesis o ambos.

149
00:11:33,280 --> 00:11:40,850
Así que el lado derecho de la expresión de enlace son sus fuentes de enlace,

150
00:11:40,850 --> 00:11:45,670
por lo que normalmente son como las propiedades de un objeto JavaScript, o

151
00:11:45,670 --> 00:11:51,930
una variable, o una expresión que definimos en el lado derecho.

152
00:11:51,930 --> 00:11:58,970
Si define propiedades de destino asociadas con el selectivo de un componente.

153
00:11:58,970 --> 00:12:03,140
Esa es una forma de pasar información a un componente,

154
00:12:03,140 --> 00:12:07,320
o enviar información de un componente a otro componente.

155
00:12:07,320 --> 00:12:12,490
Así que esto facilita la comunicación entre componentes.

156
00:12:12,490 --> 00:12:18,258
Así que vería el uso de un decorador como @Input asociado con

157
00:12:18,258 --> 00:12:24,442
una forma de enviar información de un componente a otro componente.

158
00:12:24,442 --> 00:12:29,194
Veremos un ejemplo de este uso en el ejercicio

159
00:12:29,194 --> 00:12:32,690
que sigue a esta conferencia aquí.

160
00:12:32,690 --> 00:12:37,600
Del mismo modo, puede utilizar el decorador de salida para especificar un evento

161
00:12:37,600 --> 00:12:42,070
de un componente que se pasa de nuevo a otro componente.

162
00:12:42,070 --> 00:12:49,472
Por lo tanto, ambos usos se utilizan efectivamente para la comunicación entre componentes.

163
00:12:49,472 --> 00:12:52,759
[MÚSICA]