1
00:00:00,000 --> 00:00:06,150
Ahora pasaremos a

2
00:00:06,150 --> 00:00:09,045
nuestro próximo ejercicio donde crearemos

3
00:00:09,045 --> 00:00:13,275
un nuevo componente y lo agregaremos a nuestra aplicación Angular.

4
00:00:13,275 --> 00:00:17,430
A continuación, haremos uso de ese componente para controlar una parte

5
00:00:17,430 --> 00:00:22,380
de la pantalla que hemos diseñado para nuestra aplicación Angular.

6
00:00:22,380 --> 00:00:27,380
La pantalla para nuestra aplicación Angular es bastante aburrida en este momento.

7
00:00:27,380 --> 00:00:32,240
Todo lo que tenemos es una barra de herramientas en la parte superior y luego una pantalla blanca

8
00:00:32,240 --> 00:00:35,595
en blanco aquí, pero eso también nos da ideas.

9
00:00:35,595 --> 00:00:39,560
Ahora podemos tomar contenido adicional y luego

10
00:00:39,560 --> 00:00:43,970
colocar eso en esta parte de la pantalla aquí. ¿Cómo lo hacemos?

11
00:00:43,970 --> 00:00:46,850
Podemos crear un nuevo componente y luego entregar

12
00:00:46,850 --> 00:00:49,460
sobre esta parte de la pantalla a ese componente y decir,

13
00:00:49,460 --> 00:00:53,450
«Te encargamos de representar lo que quieras en esa parte de la pantalla».

14
00:00:53,450 --> 00:00:58,055
Por lo tanto, esa vista será controlada por el nuevo componente.

15
00:00:58,055 --> 00:01:03,345
¿Cómo lo hacemos? Vamos a pasar por el ejercicio ahora.

16
00:01:03,345 --> 00:01:06,610
Para comenzar con el ejercicio,

17
00:01:06,610 --> 00:01:10,620
ve a las instrucciones de ejercicio que siguen este video en particular.

18
00:01:10,620 --> 00:01:12,555
Luego, en las instrucciones de ejercicio,

19
00:01:12,555 --> 00:01:15,680
verá algunos recursos de ejercicio,

20
00:01:15,680 --> 00:01:18,290
que es un archivo zip disponible para usted.

21
00:01:18,290 --> 00:01:23,085
Descargue ese archivo zip en su computadora,

22
00:01:23,085 --> 00:01:28,320
y esto le dará un images.zip files.

23
00:01:28,320 --> 00:01:36,340
Así que guárdelo como images.zip en tu carpeta de descargas,

24
00:01:36,340 --> 00:01:39,140
descomprimirlo, y entonces esto te dará

25
00:01:39,140 --> 00:01:42,200
una carpeta de imágenes que contiene

26
00:01:42,200 --> 00:01:46,700
un conjunto de imágenes que vamos a hacer uso en nuestra aplicación.

27
00:01:46,700 --> 00:01:51,379
Descomprima el archivo images.zip que acaba de descargar,

28
00:01:51,379 --> 00:01:56,415
y mueva ese archivo images.zip a su proyecto,

29
00:01:56,415 --> 00:01:58,130
y dentro de su proyecto,

30
00:01:58,130 --> 00:02:02,695
a la carpeta de fuentes y activos aquí.

31
00:02:02,695 --> 00:02:08,645
Así que, de nuevo, mueva la carpeta de imágenes que obtiene por

32
00:02:08,645 --> 00:02:15,110
descomprimiendo el archivo images.zip y luego mueva esa carpeta de imágenes a su aplicación,

33
00:02:15,110 --> 00:02:17,465
por lo tanto, dentro de su aplicación,

34
00:02:17,465 --> 00:02:22,670
en la subcarpeta de fuentes y activos.

35
00:02:22,670 --> 00:02:26,975
Estas imágenes que se suministran aquí estarán

36
00:02:26,975 --> 00:02:31,690
disponibles para su uso dentro de su aplicación Angular.

37
00:02:31,690 --> 00:02:37,310
Ahora, vamos a hacer uso de la CLI angular para

38
00:02:37,310 --> 00:02:43,025
generar automáticamente un componente para nosotros y añadirlo a nuestra aplicación Angular.

39
00:02:43,025 --> 00:02:45,750
Entonces, en la terminal,

40
00:02:45,750 --> 00:02:50,420
vaya a la carpeta que contiene su aplicación Angular y escriba

41
00:02:50,420 --> 00:02:56,960
ng generate component menu.

42
00:02:56,960 --> 00:03:00,570
Por lo tanto, nombraremos este componente como el MenuComponent.

43
00:03:00,570 --> 00:03:03,980
Este MenuComponent contendrá el menú para

44
00:03:03,980 --> 00:03:08,390
el restaurante para el que estamos preparando nuestra aplicación Angular.

45
00:03:08,390 --> 00:03:10,460
Entonces, cuando escriba esto,

46
00:03:10,460 --> 00:03:11,975
esto generará automáticamente

47
00:03:11,975 --> 00:03:16,350
el MenuComponent y luego lo agregará a su aplicación Angular.

48
00:03:16,350 --> 00:03:19,970
Este MenuComponent se creará y agregará en

49
00:03:19,970 --> 00:03:27,300
la carpeta source/app/menu de su aplicación.

50
00:03:27,300 --> 00:03:33,050
Por lo tanto, creará un conjunto de archivos en la carpeta del menú.

51
00:03:33,050 --> 00:03:35,550
Por lo tanto, se puede ver que crea un archivo SCSS,

52
00:03:35,550 --> 00:03:38,310
un archivo HTML, y el archivo ts,

53
00:03:38,310 --> 00:03:40,630
y luego algo llamado el archivo ts espectral.

54
00:03:40,630 --> 00:03:42,495
Volveremos a eso más tarde.

55
00:03:42,495 --> 00:03:48,140
Luego, también, actualizará su archivo module.ts de la aplicación.

56
00:03:48,140 --> 00:03:52,920
Entonces, vamos a echar un vistazo a lo que acaba de suceder cuando

57
00:03:52,920 --> 00:03:58,415
creó este MenuComponent y lo agregó a su aplicación Angular.

58
00:03:58,415 --> 00:04:01,040
Vayamos al Editor.

59
00:04:01,040 --> 00:04:03,930
Viniendo a nuestro Editor,

60
00:04:03,930 --> 00:04:05,245
ahora notarás que,

61
00:04:05,245 --> 00:04:06,650
en la carpeta de la aplicación,

62
00:04:06,650 --> 00:04:09,380
hay una nueva carpeta llamada menú allí,

63
00:04:09,380 --> 00:04:16,210
y esta carpeta de menú contiene todos los archivos relacionados con MenuComponent aquí.

64
00:04:16,210 --> 00:04:22,385
La CLI angular sigue la guía de estilo estándar angular.

65
00:04:22,385 --> 00:04:25,715
La guía de estilo sugiere que cada componente debe colocarse

66
00:04:25,715 --> 00:04:29,765
en su propia carpeta como se ve aquí,

67
00:04:29,765 --> 00:04:34,220
y me gusta mucho esto porque soy muy obsesivo con

68
00:04:34,220 --> 00:04:38,840
mantenerlo limpio jerarquía para mis carpetas de aplicaciones aquí.

69
00:04:38,840 --> 00:04:41,825
Entonces, esto funciona muy bien para mí.

70
00:04:41,825 --> 00:04:44,545
A algunas personas les gusta una jerarquía plana,

71
00:04:44,545 --> 00:04:46,570
pero me confundo con esa parte.

72
00:04:46,570 --> 00:04:51,455
Entonces, prefiero almacenar cada componente en su propia carpeta.

73
00:04:51,455 --> 00:04:53,480
Por lo tanto, funciona bien para mí.

74
00:04:53,480 --> 00:04:58,430
Ahora, si abre el archivo module.ts de la aplicación,

75
00:04:58,430 --> 00:05:02,390
notará que el archivo module.ts de la aplicación se ha actualizado

76
00:05:02,390 --> 00:05:06,810
incluyendo otra importación en el archivo module.ts de la aplicación.

77
00:05:06,810 --> 00:05:09,435
Entonces, verá que, junto con AppComponent,

78
00:05:09,435 --> 00:05:15,235
el MenuComponent se ha agregado automáticamente como una importación a su módulo de aplicación.

79
00:05:15,235 --> 00:05:17,570
Por lo tanto, esto significa que MenuComponent está ahora

80
00:05:17,570 --> 00:05:20,470
disponible para su aplicación Angular para ser utilizada.

81
00:05:20,470 --> 00:05:26,590
Además, si comprueba la propiedad de declaraciones dentro del decorador ngModule,

82
00:05:26,590 --> 00:05:29,160
verá que en la propiedad de declaraciones,

83
00:05:29,160 --> 00:05:31,465
además del AppComponent,

84
00:05:31,465 --> 00:05:34,120
también tiene el MenuComponent incluido.

85
00:05:34,120 --> 00:05:37,270
Esta es la razón por la que me encanta Angular CLI,

86
00:05:37,270 --> 00:05:40,035
porque simplifica todo esto funcionó para mí.

87
00:05:40,035 --> 00:05:41,945
Si tuviera que hacerlo a mano,

88
00:05:41,945 --> 00:05:48,710
tendré que ir manualmente al módulo de la aplicación y luego escribir todo este código allí,

89
00:05:48,710 --> 00:05:53,830
y hay una alta probabilidad de que termine cometiendo errores allí.

90
00:05:53,830 --> 00:05:57,800
Por lo tanto, nos estamos ahorrando muchos problemas usando la CLI angular.

91
00:05:57,800 --> 00:05:59,720
Entonces, es por eso que me he enamorado de

92
00:05:59,720 --> 00:06:04,455
Angular CLI para crear mis aplicaciones Angular.

93
00:06:04,455 --> 00:06:07,965
Así que, con eso, hemos configurado

94
00:06:07,965 --> 00:06:11,570
nuestro MenuComponent para estar disponible para nuestra aplicación Angular.

95
00:06:11,570 --> 00:06:14,505
Ahora, ¿dónde voy a hacer uso del MenuComponent?

96
00:06:14,505 --> 00:06:21,460
Voy a hacer uso del MenuComponent dentro de mi plantilla AppComponents.

97
00:06:21,460 --> 00:06:25,275
Entonces, iré a la plantilla AppComponents y luego

98
00:06:25,275 --> 00:06:29,810
incluiré el MenuComponent aquí en mi AppComponent.

99
00:06:29,810 --> 00:06:37,795
Entonces, eso esencialmente entregará esa parte de la pantalla a mi MenuComponent.

100
00:06:37,795 --> 00:06:38,980
¿Cómo lo hacemos?

101
00:06:38,980 --> 00:06:44,300
Para hacer eso, primero echaremos un vistazo rápido al archivo MenuComponent.ts.

102
00:06:44,300 --> 00:06:47,425
Por lo tanto, cuando abra el archivo MenuComponent.ts,

103
00:06:47,425 --> 00:06:54,225
verá que el selector para MenuComponent se ha definido como app-menu.

104
00:06:54,225 --> 00:07:02,615
Por lo tanto, este es el nombre de selector estándar que la CLI angular da para sus componentes.

105
00:07:02,615 --> 00:07:04,840
Puede cambiar esto si lo desea,

106
00:07:04,840 --> 00:07:07,970
pero cualquier selector que especifique aquí,

107
00:07:07,970 --> 00:07:15,670
que formaría las etiquetas que usa para incluirlo en su archivo de plantilla.

108
00:07:15,670 --> 00:07:20,195
Así que, volviendo a AppComponent.html,

109
00:07:20,195 --> 00:07:23,795
ahora, si quiero incluir el archivo de menú aquí,

110
00:07:23,795 --> 00:07:24,930
así que solo diré,

111
00:07:24,930 --> 00:07:31,775
etiqueta de menú de aplicación y listo,

112
00:07:31,775 --> 00:07:35,360
esa parte de la pantalla ahora se entrega a mi MenuComponent,

113
00:07:35,360 --> 00:07:40,640
y depende del MenuComponent decidir qué quiere colocar allí.

114
00:07:40,640 --> 00:07:42,420
Entonces, lo que sea que se defina,

115
00:07:42,420 --> 00:07:49,535
la plantilla MenuComponents se colocará en su lugar aquí.

116
00:07:49,535 --> 00:07:53,630
Así que, ahora, todo lo que nos queda es ir y preparar

117
00:07:53,630 --> 00:07:58,695
nuestro MenuComponent para mostrar la información adecuada para nosotros.

118
00:07:58,695 --> 00:08:00,885
Guardemos los cambios,

119
00:08:00,885 --> 00:08:04,825
y luego cambiaremos a

120
00:08:04,825 --> 00:08:11,715
el siguiente paso donde crearemos el menú para nuestro restaurante usando el MenuComponent.

121
00:08:11,715 --> 00:08:14,845
Antes de hacer eso,

122
00:08:14,845 --> 00:08:17,625
lo que voy a hacer es,

123
00:08:17,625 --> 00:08:19,830
ir a la carpeta de la aplicación aquí,

124
00:08:19,830 --> 00:08:22,090
y luego en la carpeta de la aplicación,

125
00:08:22,090 --> 00:08:29,660
Voy a crear una nueva subcarpeta y nombre que como subcarpeta compartida.

126
00:08:29,660 --> 00:08:34,015
Ahora, cualquier archivo que voy a compartir a través de varios componentes,

127
00:08:34,015 --> 00:08:37,040
voy a ponerlo en la carpeta compartida aquí.

128
00:08:37,040 --> 00:08:39,160
Ahora, dentro de la carpeta compartida,

129
00:08:39,160 --> 00:08:45,895
voy a crear un nuevo archivo llamado dish.ts.

130
00:08:45,895 --> 00:08:51,650
Dentro de este plato.ts, voy a crear una clase para definir

131
00:08:51,650 --> 00:08:59,050
un plato y hacerlo disponible para que los componentes restantes lo usen.

132
00:08:59,050 --> 00:09:02,555
Entonces, para definir una clase TypeScript aquí,

133
00:09:02,555 --> 00:09:04,240
diré export,

134
00:09:04,240 --> 00:09:07,525
, así que estoy exportando esta clase TypeScript aquí,

135
00:09:07,525 --> 00:09:13,550
clase de exportación, y luego nombraré la clase como dish.

136
00:09:13,550 --> 00:09:16,230
Dentro de esta clase de plato,

137
00:09:16,230 --> 00:09:20,175
ahora puedo definir varias propiedades.

138
00:09:20,175 --> 00:09:21,550
Entonces, para la clase de plato,

139
00:09:21,550 --> 00:09:23,050
definiré una propiedad,

140
00:09:23,050 --> 00:09:27,425
que es una ID, que defino como una cadena.

141
00:09:27,425 --> 00:09:31,330
Ahora, observe, si viene del mundo JavaScript,

142
00:09:31,330 --> 00:09:35,975
en JavaScript, no necesita especificar el tipo de ninguna variable.

143
00:09:35,975 --> 00:09:43,380
TypeScript incluye esta función para que especifique el tipo para cada variable.

144
00:09:43,380 --> 00:09:46,405
Por lo tanto, si especifica el nombre, la columna y la cadena,

145
00:09:46,405 --> 00:09:51,785
significa que la variable de nombre será siempre del tipo de cadena.

146
00:09:51,785 --> 00:09:55,595
Entonces, si intenta asignar un entero al nombre,

147
00:09:55,595 --> 00:09:58,400
, el compilador de TypeScript automáticamente

148
00:09:58,400 --> 00:10:01,850
lo captará y luego le dirá que hay un error.

149
00:10:01,850 --> 00:10:04,855
Esa es la razón por la que, al usar TypeScript,

150
00:10:04,855 --> 00:10:08,155
, puede reducir el número de errores que puede causar.

151
00:10:08,155 --> 00:10:11,850
JavaScript tradicionalmente no hace este error

152
00:10:11,850 --> 00:10:16,790
comprobar porque no tiene ningún concepto de tipos de datos.

153
00:10:16,790 --> 00:10:22,025
Pero si viene de un lenguaje de programación tradicional como C ++ o Java,

154
00:10:22,025 --> 00:10:24,945
está muy familiarizado con los tipos de datos,

155
00:10:24,945 --> 00:10:28,565
los tipos de datos primitivos y

156
00:10:28,565 --> 00:10:33,290
otros tipos de tipos de datos que ya están definidos en el lenguaje.

157
00:10:33,290 --> 00:10:41,315
TypeScript trae esa característica a JavaScript o más bien como parte de TypeScript,

158
00:10:41,315 --> 00:10:47,865
y que le permite definir variables y adjuntar tipos a esas variables,

159
00:10:47,865 --> 00:10:49,950
de ahí el nombre TypeScript.

160
00:10:49,950 --> 00:10:51,500
Así que, para el plato,

161
00:10:51,500 --> 00:10:53,970
voy a crear una propiedad de nombre.

162
00:10:53,970 --> 00:10:57,870
Entonces voy a crear una propiedad de imagen,

163
00:10:57,870 --> 00:10:59,640
que también es una cadena.

164
00:10:59,640 --> 00:11:03,710
Esta cadena de imagen será una cadena que apunta a

165
00:11:03,710 --> 00:11:08,635
la URL de la imagen que voy a usar para este plato en particular.

166
00:11:08,635 --> 00:11:18,230
Entonces definiré una categoría para este plato como también otra cadena presentada como booleano, etiqueta

167
00:11:18,230 --> 00:11:21,130
como una cadena.

168
00:11:21,150 --> 00:11:31,810
Precio como cadena y luego descripción como cadena.

169
00:11:31,810 --> 00:11:37,695
Entonces, estas son propiedades que asocio con la clase de plato.

170
00:11:37,695 --> 00:11:43,440
Así, esto definirá varios platos en mi menú de mi restaurante,

171
00:11:43,440 --> 00:11:48,060
y para cada plato necesito especificar todas estas diversas propiedades.

172
00:11:48,060 --> 00:11:49,325
Ahora, ¿por qué necesitaría eso?

173
00:11:49,325 --> 00:11:54,400
Eso me ayudará a construir el menú para mi restaurante como verá muy pronto.

174
00:11:54,400 --> 00:12:02,890
Así que, con esto, completamos la definición de mi clase allí.

175
00:12:02,890 --> 00:12:06,940
Guardemos los cambios en el archivo dish.ts.

176
00:12:06,940 --> 00:12:11,300
Ahora, este archivo dish.ts está exportando una clase.

177
00:12:11,300 --> 00:12:15,820
Ahora, puedo importar esta clase a cualquiera de

178
00:12:15,820 --> 00:12:22,485
los archivos de script de tipo de componente de mi aplicación.

179
00:12:22,485 --> 00:12:28,550
A continuación, voy a cambiar a mi archivo menu.component.ts.

180
00:12:28,550 --> 00:12:34,484
Dentro del archivo menu.component.ts además de importar el componente,

181
00:12:34,484 --> 00:12:38,420
también veré que está importando un OnInit allí.

182
00:12:38,420 --> 00:12:41,885
Llegaremos a la parte OnInit en uno de los ejercicios posteriores.

183
00:12:41,885 --> 00:12:45,475
Explicaré lo que hace en un ejercicio posterior.

184
00:12:45,475 --> 00:12:53,820
También importaremos la nueva clase que creamos llamada clase Dish.

185
00:12:53,820 --> 00:12:56,160
¿Por qué importamos esta clase de plato?

186
00:12:56,160 --> 00:13:03,180
Para que podamos usar eso como un tipo para una variable que estoy definiendo aquí.

187
00:13:03,180 --> 00:13:04,850
Entonces, ¿dónde está esta clase de platos?

188
00:13:04,850 --> 00:13:13,955
Está en..carpeta /shared/dish.

189
00:13:13,955 --> 00:13:17,890
Entonces, esto está en la carpeta de plato compartido arriba.

190
00:13:17,890 --> 00:13:22,460
Entonces verá que hemos definido el componente de menú aquí.

191
00:13:22,460 --> 00:13:23,640
Entonces, puede ver que dice,

192
00:13:23,640 --> 00:13:27,950
«Exportar componente de menú de clase» y luego dice, «Implementar en él».

193
00:13:27,950 --> 00:13:30,630
Vamos a volver a eso en un poco más tarde.

194
00:13:30,630 --> 00:13:37,130
También ve que hay un constructor y hay un método más aquí llamado ngOnIt.

195
00:13:37,130 --> 00:13:40,170
Vamos a usarlos en algunos de los ejercicios posteriores.

196
00:13:40,170 --> 00:13:42,970
Así que dejémoslo ahí como tal y

197
00:13:42,970 --> 00:13:46,565
volveremos a entender lo que es en poco tiempo.

198
00:13:46,565 --> 00:13:48,940
Además, tenga en cuenta que para este componente,

199
00:13:48,940 --> 00:13:52,040
la plantilla se define en el menú componente dot HTML,

200
00:13:52,040 --> 00:13:56,070
y las URL de estilo definidas allí.

201
00:13:56,070 --> 00:14:02,170
Ahora, además, en mi clase de componente de menú,

202
00:14:02,170 --> 00:14:07,100
voy a incluir una nueva variable llamada como platos

203
00:14:07,100 --> 00:14:14,660
que sería una matriz del tipo de plato.

204
00:14:14,660 --> 00:14:21,540
¿De acuerdo? Entonces voy a simplemente incluir el conjunto de platos

205
00:14:21,540 --> 00:14:29,955
en mi variable de platos que he definido aquí.

206
00:14:29,955 --> 00:14:35,040
Ahora, escribir todo a mano me va a llevar mucho tiempo.

207
00:14:35,040 --> 00:14:39,060
Así que en su lugar, lo que te sugeriría que hagas es simplemente ir y copiar

208
00:14:39,060 --> 00:14:45,780
el contenido directamente de las instrucciones que siguen este video.

209
00:14:45,780 --> 00:14:47,350
Entonces, eso es lo que voy a hacer.

210
00:14:47,350 --> 00:14:50,810
Luego vuelve y pega eso aquí.

211
00:14:50,810 --> 00:14:55,720
Ahora puedes ver que he cortado y pegado la información para

212
00:14:55,720 --> 00:15:00,120
todos mis platos de las instrucciones aquí.

213
00:15:00,120 --> 00:15:07,045
Entonces, esto completa la matriz de todos los platos que se definen en mis instrucciones.

214
00:15:07,045 --> 00:15:11,035
Por lo tanto, esa es la forma más fácil de obtener esta información.

215
00:15:11,035 --> 00:15:13,525
Por lo tanto, sólo corta y pega desde allí.

216
00:15:13,525 --> 00:15:16,800
Ahora, observe que para este plato,

217
00:15:16,800 --> 00:15:20,885
cada uno de ellos es un objeto JavaScript aquí.

218
00:15:20,885 --> 00:15:25,240
Entonces, eso se puede asignar a la clase de script de tipo correspondiente allí.

219
00:15:25,240 --> 00:15:28,700
Entonces, puede ver que cada objeto JavaScript tiene propiedades allí,

220
00:15:28,700 --> 00:15:35,245
y estas propiedades coinciden exactamente con las propiedades que definí para mi clase de plato.

221
00:15:35,245 --> 00:15:37,080
Así que, una vez que defina esto,

222
00:15:37,080 --> 00:15:39,430
entonces estos platos ahora se convertirán en una matriz de

223
00:15:39,430 --> 00:15:42,020
platos y esto ahora estará disponible para

224
00:15:42,020 --> 00:15:48,420
me use cuando defina mi plantilla HTML para mi menú.

225
00:15:48,420 --> 00:15:53,715
Guardemos los cambios que hemos hecho hasta ahora y luego

226
00:15:53,715 --> 00:15:59,410
abriremos el archivo menu.component.html.

227
00:15:59,410 --> 00:16:02,580
Entonces, iremos al archivo menu.component.html.

228
00:16:02,580 --> 00:16:06,280
Verá que en el archivo menu.component.html,

229
00:16:06,280 --> 00:16:11,390
actualmente tiene solo una P con menú funciona aquí.

230
00:16:11,390 --> 00:16:17,390
Entonces, si lo pegaron allí y luego viendo la aplicación funcionando,

231
00:16:17,390 --> 00:16:20,500
habrías visto que este menú funciona en la pantalla.

232
00:16:20,500 --> 00:16:25,640
Voy a reemplazar esto con mi propio código de plantilla aquí.

233
00:16:25,640 --> 00:16:31,230
Aquí es donde voy a tomar la ayuda del diseño flexible angular para ayudarme

234
00:16:31,230 --> 00:16:37,125
a diseñar bien mi contenido en mi pantalla.

235
00:16:37,125 --> 00:16:38,885
Entonces, para comenzar,

236
00:16:38,885 --> 00:16:41,490
comenzaré con un div,

237
00:16:41,490 --> 00:16:46,480
a la que aplicaré una clase llamada contenedor.

238
00:16:46,480 --> 00:16:49,710
Voy a definir la clase contenedora usando

239
00:16:49,710 --> 00:16:55,360
algún código CSS un poco más adelante en este ejercicio.

240
00:16:55,360 --> 00:16:57,715
Entonces, aplicaré el contenedor de clase aquí.

241
00:16:57,715 --> 00:17:04,640
También voy a definir una propiedad llamada fxlayout.

242
00:17:04,640 --> 00:17:07,545
Un atributo llamado fxlayout.

243
00:17:07,545 --> 00:17:10,205
Ahora, este fxlayout es un atributo

244
00:17:10,205 --> 00:17:15,015
que el diseño flexible angular me permite aplicar a un div.

245
00:17:15,015 --> 00:17:20,295
Esto especifica si los diversos contenidos

246
00:17:20,295 --> 00:17:25,440
que incluyo dentro de esos div deben colocarse horizontal o verticalmente.

247
00:17:25,440 --> 00:17:28,755
Entonces, voy a especificar que esto sea una columna.

248
00:17:28,755 --> 00:17:32,675
Entonces, cualquiera que sea el contenido que incluya dentro de este div,

249
00:17:32,675 --> 00:17:36,105
se presentará verticalmente uno debajo del otro en mi pantalla.

250
00:17:36,105 --> 00:17:43,855
Si has visto la forma de cuadrícula de trabajar con contenido en Bootstrap,

251
00:17:43,855 --> 00:17:47,100
verías que esto esencialmente me dice que voy a

252
00:17:47,100 --> 00:17:50,970
poner todo en una sola columna allí abajo.

253
00:17:50,970 --> 00:17:55,700
No confunda esta columna con la columna de Bootstrap de la cuadrícula de Bootstrap.

254
00:17:55,700 --> 00:17:57,185
Son dos cosas diferentes.

255
00:17:57,185 --> 00:18:01,290
Aquí, el atributo es fxlayout y especifico la columna.

256
00:18:01,290 --> 00:18:03,240
También puedo especificar esto como fila,

257
00:18:03,240 --> 00:18:07,470
, lo que significa que el contenido se presentará horizontalmente.

258
00:18:07,470 --> 00:18:14,590
Ahora también, un atributo más que voy a especificar para esto es fxLayoutGap,

259
00:18:14,590 --> 00:18:18,705
que especificaré como 10 píxeles.

260
00:18:18,705 --> 00:18:23,330
Entonces, lo que esto significa es que cualquier contenido que incluyo aquí

261
00:18:23,330 --> 00:18:27,690
estará separado el uno del otro por un espacio de 10 píxeles entre cada uno de ellos.

262
00:18:27,690 --> 00:18:33,745
Desde el conocimiento de Bootstraps, ves lo que es un corte aquí.

263
00:18:33,745 --> 00:18:38,050
Esto define una separación de corte entre

264
00:18:38,050 --> 00:18:42,925
dos partes de contenido en mi plantilla de aplicación.

265
00:18:42,925 --> 00:18:46,945
Entonces, con esto, cerraremos el div aquí.

266
00:18:46,945 --> 00:18:49,080
Ahora, dentro de este div,

267
00:18:49,080 --> 00:18:57,735
voy a definir el contenido real que entrará en mi archivo menu.component.html.

268
00:18:57,735 --> 00:19:04,035
Ahora aquí, voy a hacer uso de otro componente que el diseño de material

269
00:19:04,035 --> 00:19:10,745
me proporciona llamado como un componente de lista de esteras.

270
00:19:10,745 --> 00:19:14,470
Por lo tanto, este componente me permite crear una lista de

271
00:19:14,470 --> 00:19:19,215
elementos que incluyo en mi plantilla aquí.

272
00:19:19,215 --> 00:19:25,360
Entonces, este es un componente de lista de materiales angular.

273
00:19:25,360 --> 00:19:30,980
Desde Bootstrap, observa que en Bootstrap teníamos el objeto multimedia.

274
00:19:30,980 --> 00:19:36,430
Entonces, la lista de esteras es como el objeto multimedia en algún sentido de Bootstrap.

275
00:19:36,430 --> 00:19:39,470
Ahora a esto, voy a aplicar una clase,

276
00:19:39,470 --> 00:19:42,095
un atributo llamado como fxFlex.

277
00:19:42,095 --> 00:19:49,990
Ahora, lo que esto significa es que todo esto será tratado como una unidad o una pieza de contenido

278
00:19:49,990 --> 00:19:58,180
que serán establecidos por mi diseño flexible aquí.

279
00:19:58,180 --> 00:20:01,100
Entonces, si está familiarizado con el diseño flexible CSS.

280
00:20:01,100 --> 00:20:05,505
Entonces, esta es una pieza de contenido que será presentada por mi diseño flexible CSS.

281
00:20:05,505 --> 00:20:09,420
Entonces, aplique FXFlex aquí,

282
00:20:09,420 --> 00:20:16,610
y luego dentro aquí voy a definir mat-list-item.

283
00:20:16,610 --> 00:20:18,380
Por lo tanto, este es un elemento de lista aquí.

284
00:20:18,380 --> 00:20:22,250
Entonces, por su conocimiento HTML,

285
00:20:22,250 --> 00:20:28,090
si la etiqueta LI que usa en HTML es similar a esta aquí.

286
00:20:28,090 --> 00:20:31,240
Entonces, este es un artículo de la lista de mg aquí.

287
00:20:31,240 --> 00:20:34,705
Así que obviamente, dentro de este elemento de la lista,

288
00:20:34,705 --> 00:20:39,220
vas a estar definiendo la lista de cosas.

289
00:20:39,220 --> 00:20:45,750
Ahora, angular proporciona algunas directivas estructurales que puede aplicar

290
00:20:45,750 --> 00:20:53,455
a sus etiquetas aquí que le permite crear su contenido.

291
00:20:53,455 --> 00:20:58,375
Ahora, voy a usar una directiva estructural llamada ngFor.

292
00:20:58,375 --> 00:21:01,990
Veremos cómo lo usamos en esta plantilla.

293
00:21:01,990 --> 00:21:04,050
Luego, después de este ejercicio,

294
00:21:04,050 --> 00:21:07,250
les explicaré brevemente cuáles son las directivas estructurales y

295
00:21:07,250 --> 00:21:11,625
cuál es el propósito que sirven para definir aquí sus plantillas.

296
00:21:11,625 --> 00:21:15,960
Así que, dentro de este elemento de la lista vacía, voy a decir,

297
00:21:15,960 --> 00:21:21,480
star, nota la sintaxis, star ngFor.

298
00:21:22,470 --> 00:21:25,500
Entonces, esta es la directiva estructural,

299
00:21:25,500 --> 00:21:29,585
la directiva estructural NGFor en angular.

300
00:21:29,585 --> 00:21:34,690
Lo que esta directiva estructural ngFor le permite hacer es

301
00:21:34,690 --> 00:21:40,855
iterar sobre una matriz de elementos.

302
00:21:40,855 --> 00:21:48,805
Recuerde que definimos los platos como una matriz de objetos de plato en nuestro código.

303
00:21:48,805 --> 00:21:51,040
Ahora, en mi plantilla,

304
00:21:51,040 --> 00:21:54,095
tendré acceso a ese objeto de platos.

305
00:21:54,095 --> 00:21:56,945
Así que aquí, si quiero iterar sobre él,

306
00:21:56,945 --> 00:21:59,160
la forma en que lo especifiqué es, diré,

307
00:21:59,160 --> 00:22:04,950
«Deje plato de platos.»

308
00:22:04,950 --> 00:22:11,495
Así es como funciona la sintaxis para la directiva estructural ngFor.

309
00:22:11,495 --> 00:22:14,020
Así que, vamos plato de platos.

310
00:22:14,020 --> 00:22:21,805
Lo que esto significa es que los platos son la matriz de objetos de plato.

311
00:22:21,805 --> 00:22:24,245
Cuando seleccionamos digamos plato de platos,

312
00:22:24,245 --> 00:22:27,130
esto me permitirá acceder a cada elemento de

313
00:22:27,130 --> 00:22:30,460
la matriz y luego me ayuda a iterar sobre la matriz.

314
00:22:30,460 --> 00:22:32,085
Esto es como un bucle for,

315
00:22:32,085 --> 00:22:36,210
si está familiarizado con los bucles for de la programación.

316
00:22:36,210 --> 00:22:40,630
Entonces, esto actúa como un bucle for para ti y luego te ayuda a iterar

317
00:22:40,630 --> 00:22:46,855
sobre todos los elementos de la matriz de platos aquí.

318
00:22:46,855 --> 00:22:51,050
Este plato se convierte en un objeto JavaScript que me permite

319
00:22:51,050 --> 00:22:55,350
acceder a cada elemento de esa matriz allí.

320
00:22:55,350 --> 00:23:00,680
Ahora, a partir de esto, también podemos obtener acceso

321
00:23:00,680 --> 00:23:06,775
a las propiedades de cada objeto individual dentro de mi matriz de platos.

322
00:23:06,775 --> 00:23:13,335
Entonces, puedo hacer uso de ellos para definir mi plantilla aquí.

323
00:23:13,335 --> 00:23:16,120
Permítanme diseñar la plantilla y luego vamos a volver y

324
00:23:16,120 --> 00:23:19,185
mirar cómo estos dos están interrelacionados aquí.

325
00:23:19,185 --> 00:23:21,760
Ahora, dentro de mi elemento de lista vacío,

326
00:23:21,760 --> 00:23:28,480
puedo incluir una imagen con el atributo como MatListAvatar.

327
00:23:30,040 --> 00:23:38,625
Entonces, esto me permite incluir una imagen y luego con la fuente especificada aquí.

328
00:23:38,625 --> 00:23:44,275
Ahora curiosamente, mira la sintaxis que estoy usando aquí.

329
00:23:44,275 --> 00:23:48,380
Dentro de llaves dobles, voy a decir dish.image.

330
00:23:48,560 --> 00:23:55,985
Lo que esto significa es que se trata de una interpolación unidireccional de la que estamos hablando.

331
00:23:55,985 --> 00:23:58,885
Aquí, cuando especifico esto,

332
00:23:58,885 --> 00:24:07,635
lo que esto significa es que esta fuente obtendrá el valor de dish.image que ha definido en

333
00:24:07,635 --> 00:24:10,515
mi objeto JavaScript que he definido en

334
00:24:10,515 --> 00:24:17,050
mi clase de script de tipo allí y que está disponible para mí para hacer el diseño aquí.

335
00:24:17,050 --> 00:24:22,510
Entonces, para que el valor dish.image esté disponible para mí y también para esta imagen,

336
00:24:22,510 --> 00:24:28,255
especificaré un valor alternativo como dish.name.

337
00:24:28,255 --> 00:24:33,770
Recordemos que mi plato también tenía la propiedad de nombre disponible para

338
00:24:33,770 --> 00:24:39,240
me así que define una imagen para mi lista aquí.

339
00:24:39,240 --> 00:24:42,460
Pronto se dará cuenta de cómo se ve esta lista en

340
00:24:42,460 --> 00:24:46,010
la pantalla cuando completemos esta plantilla aquí.

341
00:24:46,010 --> 00:24:53,140
Además, voy a usar un h1 con la etiqueta MatLine.

342
00:24:53,140 --> 00:24:56,500
Una vez más, este es el uso de

343
00:24:56,500 --> 00:25:04,900
el componente de material angular de lista para definir mi plantilla aquí.

344
00:25:04,900 --> 00:25:12,800
Así que, digo h1 MatLine así que esto me ayuda a definir una línea aquí y luego dentro de allí,

345
00:25:12,800 --> 00:25:17,170
voy a usar las llaves dobles y decir dish.name aquí.

346
00:25:17,170 --> 00:25:24,930
Entonces, esto me permite obtener el valor del nombre del plato allí.

347
00:25:24,930 --> 00:25:33,140
Entonces, eso define una línea y luego la en la siguiente línea voy a decir p MatLine.

348
00:25:33,140 --> 00:25:36,370
Entonces, voy a usar la etiqueta p aquí y luego cerrar

349
00:25:36,370 --> 00:25:39,655
de la etiqueta p y luego dentro de la etiqueta p,

350
00:25:39,655 --> 00:25:48,000
voy a usar un span para definir dish.description.

351
00:25:48,000 --> 00:25:52,025
Entonces, si está familiarizado con los objetos JavaScript,

352
00:25:52,025 --> 00:25:56,180
ahora ve cómo estoy accediendo a las propiedades de

353
00:25:56,180 --> 00:26:02,030
mi objeto JavaScript aquí, dish.description aquí.

354
00:26:02,030 --> 00:26:06,595
Para tener en cuenta, ejecutando esto una vez más

355
00:26:06,595 --> 00:26:13,630
el atributo ngFor me permite iterar sobre una matriz de objetos aquí.

356
00:26:13,630 --> 00:26:17,700
Entonces, los platos aquí es una variedad de objetos de plato.

357
00:26:17,700 --> 00:26:20,865
Así que, cuando digo que plato de platos,

358
00:26:20,865 --> 00:26:28,070
este plato me dará acceso a cada elemento de

359
00:26:28,070 --> 00:26:32,170
mi matriz de platos y yo iterar sobre cada elemento de la matriz

360
00:26:32,170 --> 00:26:36,525
y luego voy a estar creando este contenido para cada uno de ellos.

361
00:26:36,525 --> 00:26:39,205
Entonces, este elemento de la lista vacía,

362
00:26:39,205 --> 00:26:43,500
esencialmente actúa como un bucle for de

363
00:26:43,500 --> 00:26:47,830
su lenguaje informático tradicional y luego itera sobre

364
00:26:47,830 --> 00:26:52,890
la lista de platos y luego establece cada uno de ellos en mi pantalla.

365
00:26:52,890 --> 00:26:54,895
Así que, con este cambio,

366
00:26:54,895 --> 00:27:00,145
vamos a guardar el archivo de componente de menú.

367
00:27:00,145 --> 00:27:06,800
A continuación, vamos a app.module.ts y necesitamos importar el módulo MatList en esto.

368
00:27:06,800 --> 00:27:11,840
Así que, decimos, importar MatListModule

369
00:27:11,840 --> 00:27:20,380
desde Angular/Material/list.Una vez que hemos importado esto allí,

370
00:27:20,380 --> 00:27:25,390
luego bajamos y luego actualizamos las importaciones en

371
00:27:25,390 --> 00:27:30,320
el decorador del módulo Ng y agregamos

372
00:27:30,320 --> 00:27:36,435
el módulo MatList a la lista de importaciones allí.

373
00:27:36,435 --> 00:27:42,430
Esta mi aplicación module.ts ahora está actualizada y luego también,

374
00:27:42,430 --> 00:27:47,770
voy a ir al archivo styles.scss y luego agregar

375
00:27:47,770 --> 00:27:53,575
en la clase contenedor aquí.

376
00:27:53,575 --> 00:27:55,890
¿Qué define la clase de contenedor aquí?

377
00:27:55,890 --> 00:28:00,995
La clase contenedor es margen 20 píxeles

378
00:28:00,995 --> 00:28:07,830
y mostrar flex y guardar los cambios.

379
00:28:07,830 --> 00:28:12,210
Ahora, vamos a echar un vistazo a nuestra página web.

380
00:28:12,210 --> 00:28:14,180
Ir a nuestra página web.

381
00:28:14,180 --> 00:28:15,885
Voila. Ahí lo tienes.

382
00:28:15,885 --> 00:28:22,250
El menú de nuestro restaurante se muestra en todo su esplendor en la pantalla.

383
00:28:22,250 --> 00:28:25,365
Usted ve cómo se ha creado este menú.

384
00:28:25,365 --> 00:28:30,455
Mira la matriz de objetos JavaScript que has visto.

385
00:28:30,455 --> 00:28:35,250
Mire cómo se ha utilizado cada una de las propiedades de la matriz de objetos JavaScript y

386
00:28:35,250 --> 00:28:40,490
se ha asignado a los cuatro elementos de mi lista.

387
00:28:40,490 --> 00:28:44,170
Mira cómo se han incluido las imágenes correspondientes aquí

388
00:28:44,170 --> 00:28:48,430
usando el MatListAvatar aquí.

389
00:28:48,430 --> 00:28:55,150
Por lo tanto, esto crea imágenes redondas aquí y luego nota cómo el nombre de

390
00:28:55,150 --> 00:29:03,155
el plato se muestra aquí y luego la descripción del plato incluido aquí.

391
00:29:03,155 --> 00:29:09,010
Maravilloso. Ahora, tenemos el menú para nuestro restaurante en

392
00:29:09,010 --> 00:29:14,925
la pantalla utilizando un componente de menú en Angular.

393
00:29:14,925 --> 00:29:17,625
Esto completa este ejercicio.

394
00:29:17,625 --> 00:29:21,860
En este ejercicio aprendimos a crear un nuevo componente.

395
00:29:21,860 --> 00:29:25,165
añadirlo a nuestra aplicación Angular,

396
00:29:25,165 --> 00:29:28,270
cómo incluir ese componente en la plantilla de

397
00:29:28,270 --> 00:29:32,365
otro componente para que cree la jerarquía de los componentes.

398
00:29:32,365 --> 00:29:39,255
Luego vimos cómo podemos hacer uso de la disposición flexible angular y también

399
00:29:39,255 --> 00:29:42,700
los componentes de diseño de material para diseñar

400
00:29:42,700 --> 00:29:47,560
la plantilla para nuestro componente de menú para mostrar el contenido aquí.

401
00:29:47,560 --> 00:29:52,710
Ahora, si me preguntas cómo recuerdo todas estas cosas.

402
00:29:52,710 --> 00:29:54,535
Bueno, para ser honesto,

403
00:29:54,535 --> 00:29:59,435
no puedes recordar todo pero necesitas entender el enfoque.

404
00:29:59,435 --> 00:30:03,035
Eso es más importante que tratar de memorizar cualquiera de estas cosas.

405
00:30:03,035 --> 00:30:06,735
Ahora, si me preguntas dónde obtengo la información sobre

406
00:30:06,735 --> 00:30:12,740
el componente de lista de material angular.

407
00:30:12,740 --> 00:30:16,560
Podemos ordenar la documentación de material angular y allí

408
00:30:16,560 --> 00:30:21,005
tendrá los detalles sobre cómo se debe preparar un componente de lista.

409
00:30:21,005 --> 00:30:29,405
Ahora, ¿dónde obtenemos los detalles sobre cómo diseñamos un componente en angular?

410
00:30:29,405 --> 00:30:33,240
Acabamos de examinar un poco de eso y luego en este ejercicio,

411
00:30:33,240 --> 00:30:41,080
aprendimos cómo crear un nuevo componente y luego aplicarlo en nuestra aplicación angular.

412
00:30:41,080 --> 00:30:44,790
Por lo tanto, este es un buen punto para que hagas un

413
00:30:44,790 --> 00:30:48,905
get comment con los componentes del mensaje parte uno.

414
00:30:48,905 --> 00:30:50,540
En el próximo ejercicio,

415
00:30:50,540 --> 00:30:54,895
vamos a mejorar esto un poco más usando otro tipo

416
00:30:54,895 --> 00:31:00,920
de componente de material angular para diseñar el contenido en mi pantalla.