1
00:00:00,000 --> 00:00:08,745
Ahora que tenemos una comprensión de las aplicaciones de una sola página,

2
00:00:08,745 --> 00:00:10,660
continuaremos trabajando en

3
00:00:10,660 --> 00:00:14,490
nuestra aplicación angular que hemos estado trabajando en los ejercicios hasta

4
00:00:14,490 --> 00:00:16,980
hasta ahora y desarrollándola en

5
00:00:16,980 --> 00:00:21,535
la aplicación de una sola página usando el soporte del módulo de router angular.

6
00:00:21,535 --> 00:00:25,110
Ya hemos incluido múltiples componentes como parte de

7
00:00:25,110 --> 00:00:28,770
nuestra aplicación angular en el ejercicio anterior y ya tenemos

8
00:00:28,770 --> 00:00:32,625
configurado para que nuestra aplicación angular sea capaz de enrutar

9
00:00:32,625 --> 00:00:37,410
entre dos componentes diferentes.

10
00:00:37,410 --> 00:00:40,970
Ahora, integraremos más en nuestra aplicación angular y

11
00:00:40,970 --> 00:00:44,960
la desarrollaremos en la aplicación angular completa junto con

12
00:00:44,960 --> 00:00:49,040
la navegación entre las diversas vistas

13
00:00:49,040 --> 00:00:53,790
renderizadas por los diversos componentes de nuestra aplicación.

14
00:00:53,800 --> 00:00:58,275
Continuando con nuestra aplicación tal como está ahora,

15
00:00:58,275 --> 00:01:05,990
tenemos la casa siendo renderizada cuando navega a nuestra aplicación

16
00:01:05,990 --> 00:01:09,740
ahora mismo y luego la plantilla de Inicio se ha mostrado

17
00:01:09,740 --> 00:01:13,740
entre el encabezado y el pie de página y luego cuando vas al Menú,

18
00:01:13,740 --> 00:01:19,920
el menú se muestra entre el encabezado y el pie de página en la vista aquí.

19
00:01:19,920 --> 00:01:25,490
Ahora, obviamente, necesitamos integrar los otros componentes que

20
00:01:25,490 --> 00:01:28,700
incluimos en nuestra aplicación angular

21
00:01:28,700 --> 00:01:32,715
para desarrollar esto como una aplicación angular completa.

22
00:01:32,715 --> 00:01:36,135
En este ejercicio, vamos a integrar el ContactComponent,

23
00:01:36,135 --> 00:01:38,914
vamos a actualizar la plantilla para el ContactComponent,

24
00:01:38,914 --> 00:01:43,190
también vamos a actualizar la plantilla para el HomeComponent y dar este

25
00:01:43,190 --> 00:01:48,600
un paso adelante hacia nuestra aplicación angular de una sola página.

26
00:01:48,600 --> 00:01:52,585
Comencemos con el ContactComponent.

27
00:01:52,585 --> 00:01:56,630
Para empezar, primero copie la plantilla para

28
00:01:56,630 --> 00:02:01,070
el ContactComponent que le he dado en las instrucciones de ejercicio y luego

29
00:02:01,070 --> 00:02:06,660
péguela en el archivo contactcomponent.html para que descarguemos

30
00:02:06,660 --> 00:02:13,580
la vista real de nuestro ContactComponent con un poco más de detalle aquí.

31
00:02:13,580 --> 00:02:18,680
Ahora, puede ver que he cortado y pegado el código para

32
00:02:18,680 --> 00:02:24,550
el archivo de plantilla de las instrucciones en mi ContactComponent.

33
00:02:24,550 --> 00:02:27,650
Completaremos la integración de

34
00:02:27,650 --> 00:02:30,665
el ContactComponent en nuestra aplicación y luego veremos

35
00:02:30,665 --> 00:02:33,590
cómo se ve el ContactComponent y luego volveremos

36
00:02:33,590 --> 00:02:36,940
y rápidamente veremos este código un poco más tarde.

37
00:02:36,940 --> 00:02:41,660
Ahora, para integrar el ContactComponent en nuestra aplicación angular,

38
00:02:41,660 --> 00:02:46,910
necesitamos incluir una ruta al ContactComponent en nuestras rutas.

39
00:02:46,910 --> 00:02:52,270
Entonces, yendo al archivo routes.ts justo después del Menú,

40
00:02:52,270 --> 00:03:01,520
voy a incluir otra ruta para el ContactComponent usaré

41
00:03:01,520 --> 00:03:05,480
la URL como contacto con nosotros y

42
00:03:05,480 --> 00:03:15,375
el componente correspondiente es ContactComponent aquí.

43
00:03:15,375 --> 00:03:19,815
Así que, con esto, ahora hemos integrado nuestro ContactComponent

44
00:03:19,815 --> 00:03:24,725
en nuestra aplicación y vamos a guardar los cambios en

45
00:03:24,725 --> 00:03:30,935
esto y luego también tendremos que actualizar el componente de encabezado y actualizar

46
00:03:30,935 --> 00:03:37,540
el enlace en el componente de encabezado para ayudarnos a navegar hasta el ContactComponent.

47
00:03:37,540 --> 00:03:43,680
Entonces, solo voy a copiar esto desde el menú un enlace en

48
00:03:43,680 --> 00:03:48,710
la barra de herramientas de mi componente de encabezado allí y luego copiarlo en

49
00:03:48,710 --> 00:03:53,960
el ContactComponent y luego actualizarlo como contacto con nosotros.

50
00:03:53,960 --> 00:03:57,680
Guardemos los cambios en todos los archivos y

51
00:03:57,680 --> 00:04:02,469
luego echemos un vistazo a la aplicación resultante.

52
00:04:02,469 --> 00:04:05,725
Ir a la aplicación en nuestro navegador,

53
00:04:05,725 --> 00:04:08,570
si ahora navegamos al ContactComponent,

54
00:04:08,570 --> 00:04:12,680
podemos ver que los detalles del ContactComponent se muestran

55
00:04:12,680 --> 00:04:16,790
aquí entre el encabezado y el pie de página como esperamos.

56
00:04:16,790 --> 00:04:18,590
Así que, dentro del ContactComponent,

57
00:04:18,590 --> 00:04:22,370
tenemos el título de Contacto

58
00:04:22,370 --> 00:04:26,390
allí y luego alguna información de ubicación donde he mostrado la dirección.

59
00:04:26,390 --> 00:04:28,490
Entonces, esto es similar a la dirección que tenemos

60
00:04:28,490 --> 00:04:30,740
en el pie de página, así que no voy a explicar que en

61
00:04:30,740 --> 00:04:36,050
detalle entonces tenemos otra parte aquí donde incluimos el Mapa de nuestra Ubicación.

62
00:04:36,050 --> 00:04:37,490
No vamos a hacer eso en este momento,

63
00:04:37,490 --> 00:04:41,990
vamos a dejarlo en blanco y luego también ves que tengo

64
00:04:41,990 --> 00:04:48,150
tres botones que he incluido aquí para Llamar, Skype y Correo Electrónico.

65
00:04:48,150 --> 00:04:52,354
Estos tres botones se activan en nuestra aplicación

66
00:04:52,354 --> 00:04:57,910
y estoy usando el botón tapete levantado para renderizar estos tres botones.

67
00:04:57,910 --> 00:05:00,980
Por lo tanto, puede ver que estos botones tienen un aspecto diferente de

68
00:05:00,980 --> 00:05:05,080
los otros botones que ha incluido en su aplicación allí.

69
00:05:05,080 --> 00:05:10,870
Entonces, este es un componente de botón elevado de nuestro material angular allí.

70
00:05:10,870 --> 00:05:14,195
Entonces, habiendo visto el ContactComponent y

71
00:05:14,195 --> 00:05:17,675
el hecho de que somos capaces de navegar hasta el ContactComponent.

72
00:05:17,675 --> 00:05:20,560
Ahora, desde los otros componentes,

73
00:05:20,560 --> 00:05:22,730
echemos un vistazo rápido a

74
00:05:22,730 --> 00:05:29,250
el código HTML que incluimos para la plantilla de nuestro ContactComponent.

75
00:05:29,250 --> 00:05:33,335
Ir a contactcomponent.html, verá que tenemos

76
00:05:33,335 --> 00:05:38,720
el título de esta página incluido mediante el uso de este div

77
00:05:38,720 --> 00:05:42,965
aquí y el segundo div dentro aquí con FXFlex

78
00:05:42,965 --> 00:05:48,020
incluye la información de ubicación y luego esto dentro de esta información de ubicación,

79
00:05:48,020 --> 00:05:51,260
estoy nuevamente definiendo otro div que me permitirá

80
00:05:51,260 --> 00:05:55,480
incluir múltiples vistas en este otro div aquí.

81
00:05:55,480 --> 00:05:57,290
Entonces, dentro de esto, estoy definiendo

82
00:05:57,290 --> 00:06:00,410
otro div con columna de diseño de efectos y fila de capa de efectos.

83
00:06:00,410 --> 00:06:09,675
Entonces, esta es una forma anidada de definir mis vistas CSS Flex aquí.

84
00:06:09,675 --> 00:06:11,270
Entonces, dentro de esto nuevamente,

85
00:06:11,270 --> 00:06:14,990
estoy usando una vista div Flex con FXFlex 50 por lo que

86
00:06:14,990 --> 00:06:18,900
ocupa la mitad y luego FXFlex offset 20 píxeles.

87
00:06:18,900 --> 00:06:26,300
Por lo tanto, esta vista CSS se desplazará a la derecha por 20 píxeles así que

88
00:06:26,300 --> 00:06:29,300
tengo algún margen allí y luego tenemos

89
00:06:29,300 --> 00:06:33,800
la dirección incluida aquí y luego abajo aquí,

90
00:06:33,800 --> 00:06:36,080
se puede ver que dentro de otro div,

91
00:06:36,080 --> 00:06:42,690
tengo una etiqueta con el botón de estera levantado asociado con él.

92
00:06:42,690 --> 00:06:45,740
Esto es lo que hace que los botones elevados que tenemos

93
00:06:45,740 --> 00:06:49,140
en la parte inferior de la página de Contacto allí.

94
00:06:49,140 --> 00:06:51,050
Así que, tres de ellos aquí.

95
00:06:51,050 --> 00:06:52,730
Uno para el número de teléfono.

96
00:06:52,730 --> 00:07:00,425
Uno para el Skype y uno para el correo electrónico aquí y también tenga en cuenta que estoy haciendo uso de

97
00:07:00,425 --> 00:07:04,010
los iconos de fuente impresionante para cada uno de ellos y luego el mapa

98
00:07:04,010 --> 00:07:08,350
de su ubicación en otro div aquí.

99
00:07:08,350 --> 00:07:13,690
Entonces, ambos encierran dentro de este div externo que está encerrado nuevamente dentro del div.

100
00:07:13,690 --> 00:07:20,555
Por lo tanto, forma anidada de definir los diseños flexibles para nuestras diferentes partes aquí.

101
00:07:20,555 --> 00:07:23,465
Entonces, eso es todo para el ContactComponent.

102
00:07:23,465 --> 00:07:29,329
Ahora lo hemos integrado en nuestra aplicación de una sola página.

103
00:07:29,329 --> 00:07:32,445
Ahora, yendo a la DishService.

104
00:07:32,445 --> 00:07:36,440
Ahora, en el DishService junto con el método GetDishS,

105
00:07:36,440 --> 00:07:39,005
voy a introducir dos métodos más.

106
00:07:39,005 --> 00:07:42,350
Un método llamado getDish,

107
00:07:42,350 --> 00:07:50,950
un plato específico y luego identificaré el plato con una identificación especificada aquí.

108
00:07:50,950 --> 00:07:52,460
Entonces, el id sería

109
00:07:52,460 --> 00:08:01,885
y eso especificaría me daría el plato con la id correspondiente a este número.

110
00:08:01,885 --> 00:08:04,640
Así que ese será un método más que voy a agregar

111
00:08:04,640 --> 00:08:09,870
y también agregar otro método llamado getFeaturedDish.

112
00:08:13,750 --> 00:08:17,495
Por lo tanto, este plato destacado usará

113
00:08:17,495 --> 00:08:22,460
la propiedad destacada que agregamos

114
00:08:22,460 --> 00:08:27,995
y luego devolverá el plato para el que la característica está establecida en true.

115
00:08:27,995 --> 00:08:33,330
Así que, esa es la forma en que puedes seleccionar un plato específico y luego hacerlo disponible.

116
00:08:33,330 --> 00:08:37,970
Ahora, la razón por la que tengo esa bandera destacada es que cuando la característica se establece en true,

117
00:08:37,970 --> 00:08:41,680
ese plato en particular se representará en HomeComponent.

118
00:08:41,680 --> 00:08:44,455
Ahora, ¿cómo seleccionamos estos platos?

119
00:08:44,455 --> 00:08:47,185
Entonces, agregemos el código para esto.

120
00:08:47,185 --> 00:08:49,050
Así que, para el getDish,

121
00:08:49,050 --> 00:08:57,650
necesito devolver algo de los platos constantes que ya tengo allí.

122
00:08:57,650 --> 00:08:59,600
Entonces, de la constante de platos,

123
00:08:59,600 --> 00:09:05,525
voy a usar la forma de JavaScript de hacer el filtrado de una matriz.

124
00:09:05,525 --> 00:09:09,470
Entonces, el filtrado de una matriz me ayudará a seleccionar

125
00:09:09,470 --> 00:09:13,565
solo aquellos elementos de la matriz que

126
00:09:13,565 --> 00:09:16,985
coincidan con un criterio particular que se especificará

127
00:09:16,985 --> 00:09:21,530
dentro del filtro aquí y luego entre ellos devolveré solo el primero.

128
00:09:21,530 --> 00:09:25,050
Ahora, sucede que cuando especifico un id,

129
00:09:25,050 --> 00:09:28,960
seleccionará solo un elemento, pero luego se convertirá en una matriz.

130
00:09:28,960 --> 00:09:33,150
Entonces, de esa matriz, necesito extraer ese elemento en esa matriz.

131
00:09:33,150 --> 00:09:37,320
Entonces, es por eso que estoy usando entre llaves cero allí.

132
00:09:37,320 --> 00:09:41,010
Entonces, eso me ayudará a identificar.

133
00:09:41,010 --> 00:09:43,005
Entonces, ¿cómo filtro mis platos?

134
00:09:43,005 --> 00:09:47,140
Entonces, para cada plato en mi lista de platos,

135
00:09:47,140 --> 00:09:49,729
así que aquí es donde voy a usar

136
00:09:49,729 --> 00:09:55,610
otra característica de mecanografía llamada como funciones de flecha.

137
00:09:55,610 --> 00:10:01,575
La función de flecha es una forma abreviada de escribir una función.

138
00:10:01,575 --> 00:10:04,090
Entonces, si estás acostumbrado a escribir funciones,

139
00:10:04,090 --> 00:10:06,100
en lugar de escribir la función elaboradamente diciendo

140
00:10:06,100 --> 00:10:09,850
función y luego entre corchetes plato y así sucesivamente,

141
00:10:09,850 --> 00:10:13,900
puedo simplemente escribirla en casos donde la función es muy simple,

142
00:10:13,900 --> 00:10:17,195
es muy fácil escribir esto como una función de flecha aquí.

143
00:10:17,195 --> 00:10:27,305
Entonces, aquí, especificaré diciendo que el id del plato es igual a la id.

144
00:10:27,305 --> 00:10:33,245
Entonces, lo que estoy especificando aquí es filtrar la matriz de platos y extraer

145
00:10:33,245 --> 00:10:40,360
solo aquellos elementos de la matriz para los que el id del plato.

146
00:10:40,360 --> 00:10:44,570
Entonces, cada elemento aquí está siendo identificado por este plato parámetro aquí.

147
00:10:44,570 --> 00:10:47,090
Entonces, para el cual el id del plato coincide con el id

148
00:10:47,090 --> 00:10:50,360
que se ha suministrado como un parámetro para el plato.

149
00:10:50,360 --> 00:10:53,810
Entonces, de esta manera extraerá ese plato específico de

150
00:10:53,810 --> 00:10:59,400
esta matriz y luego devolverá ese plato de este método getDish.

151
00:10:59,710 --> 00:11:04,240
Las funciones de flecha me ayudaron a escribir código de una manera más simple.

152
00:11:04,240 --> 00:11:06,724
Si no te gustan las funciones de flecha

153
00:11:06,724 --> 00:11:09,710
, puedes escribirlo de la manera más convencional diciendo,

154
00:11:09,710 --> 00:11:16,870
«plato de función», y luego de esto, regresarás dish.id triple igual a id,

155
00:11:16,870 --> 00:11:19,005
por lo que esto devolverá un booleano.

156
00:11:19,005 --> 00:11:22,960
Cuando el filtro encuentre un verdadero dentro aquí,

157
00:11:22,960 --> 00:11:27,115
esos elementos de los platos serán seleccionados en la matriz.

158
00:11:27,115 --> 00:11:31,980
Por lo tanto, aquí es donde su conocimiento de JavaScript viene a su ventaja.

159
00:11:31,980 --> 00:11:34,060
Por lo tanto, necesita saber cómo funciona un filtro de JavaScript

160
00:11:34,060 --> 00:11:38,085
para ayudarle a entender cómo se hace esto.

161
00:11:38,085 --> 00:11:41,390
De acuerdo, ahora de manera similar para el plato destacado,

162
00:11:41,390 --> 00:11:47,365
voy a usar un método similar para extraer de mis platos

163
00:11:47,365 --> 00:11:51,620
matriz usando un filtro aquí, pero el filtro que

164
00:11:51,620 --> 00:11:57,000
voy a definir aquí sería de nuevo una función de flecha aquí.

165
00:11:58,410 --> 00:12:03,260
Se acostumbrará a las funciones de flecha y luego una vez que se acostumbre a ellas,

166
00:12:03,260 --> 00:12:06,370
entonces se dará cuenta de lo simples que son demasiado correctas.

167
00:12:06,370 --> 00:12:11,380
Entonces, aquí la forma de seleccionarme

168
00:12:11,380 --> 00:12:20,445
es la propiedad dish.featured porque este dish.feature ya es un booleano allí.

169
00:12:20,445 --> 00:12:25,720
Así que, eso me ayudará a devolver el plato destacado.

170
00:12:25,720 --> 00:12:27,355
Así que, para cualquiera que sea el plato,

171
00:12:27,355 --> 00:12:29,120
la característica del plato es verdadera.

172
00:12:29,120 --> 00:12:31,710
Ese plato en particular será filtrado de

173
00:12:31,710 --> 00:12:35,330
la matriz de platos y luego habrá sólo un día.

174
00:12:35,330 --> 00:12:38,280
De todos modos, debe asegurarse de que

175
00:12:38,280 --> 00:12:42,210
para que configure solo destacado en true para uno de esos,

176
00:12:42,210 --> 00:12:50,630
y luego uso esto porque este filtro devolverá una sub matriz de la matriz de platos,

177
00:12:50,630 --> 00:12:52,300
así que necesito seleccionar ese elemento.

178
00:12:52,300 --> 00:12:55,600
Habrá un solo elemento allí en el índice cero.

179
00:12:55,600 --> 00:12:59,150
Entonces, estoy usando el índice cero para seleccionar ese elemento y devolver

180
00:12:59,150 --> 00:13:03,680
que del método get featured dish aquí.

181
00:13:03,680 --> 00:13:09,985
Entonces, eso completa la actualización del servicio de platos.

182
00:13:09,985 --> 00:13:15,140
Para construir nuestra plantilla de hogar,

183
00:13:15,140 --> 00:13:21,195
vamos a presentar en la vista de casa un plato seleccionado,

184
00:13:21,195 --> 00:13:24,545
una promoción actual seleccionada por el restaurante,

185
00:13:24,545 --> 00:13:29,785
y un líder corporativo seleccionado de la lista de lectores.

186
00:13:29,785 --> 00:13:34,260
El líder corporativo que aparece en la primera página será

187
00:13:34,260 --> 00:13:38,550
parte de su tarea que sigue esta lección en particular.

188
00:13:38,550 --> 00:13:40,380
Pero ahora vamos a incluir,

189
00:13:40,380 --> 00:13:45,775
tenemos un plato destacado y la promoción destacada en la portada.

190
00:13:45,775 --> 00:13:50,170
Entonces, lo que significa que necesito un servicio de promoción que devuelva

191
00:13:50,170 --> 00:13:55,250
el conjunto de promociones que se están llevando a cabo por este restaurante en particular.

192
00:13:55,250 --> 00:14:01,095
Por lo tanto, permítanme añadir un servicio de promociones para mi aplicación.

193
00:14:01,095 --> 00:14:04,005
Entonces, para hacer eso, en la carpeta compartida,

194
00:14:04,005 --> 00:14:12,140
voy a crear un nuevo archivo llamado promotion.ts.

195
00:14:12,560 --> 00:14:18,410
En la promotion.ts, crearé una promoción de clase

196
00:14:18,870 --> 00:14:29,125
y devolveré esta promoción aquí.

197
00:14:29,125 --> 00:14:32,460
Entonces, ¿qué contiene esta clase de promoción?

198
00:14:32,460 --> 00:14:36,529
Contiene una propiedad de identificación,

199
00:14:36,529 --> 00:14:43,010
luego contiene el nombre para la promoción del restaurante.

200
00:14:43,010 --> 00:14:47,310
Así que, por ejemplo, la promoción podría ser como buffet de fin de semana.

201
00:14:47,310 --> 00:14:52,320
O 10% de cada día a la hora del almuerzo

202
00:14:52,320 --> 00:14:57,845
y cosas así pueden aparecer en la primera página de sus restaurantes allí.

203
00:14:57,845 --> 00:15:01,280
Entonces, nombre entonces también incluiré una imagen,

204
00:15:01,280 --> 00:15:05,635
que será del tipo de cadena de la URL de la imagen,

205
00:15:05,635 --> 00:15:10,625
luego etiqueta que será una cadena.

206
00:15:10,625 --> 00:15:13,895
Precio también una cadena.

207
00:15:13,895 --> 00:15:15,330
Ahora, el trabajo implica,

208
00:15:15,330 --> 00:15:17,260
no me ves usándolos en este momento,

209
00:15:17,260 --> 00:15:25,780
vamos a ponerlos en uso en uno de los ejercicios posteriores presentados booleano.

210
00:15:25,780 --> 00:15:29,965
Por lo tanto, verá la bandera destacada que aparece de nuevo en la promoción,

211
00:15:29,965 --> 00:15:34,960
y luego la cadena de descripción.

212
00:15:34,960 --> 00:15:38,380
Así que, ves que la promoción estructurada es más o menos

213
00:15:38,380 --> 00:15:42,840
similar a la estructura del plato que hemos visto antes.

214
00:15:42,840 --> 00:15:46,010
Así que, esta es la clase de promoción aquí.

215
00:15:46,010 --> 00:15:48,090
Ahora, junto con la clase de promoción,

216
00:15:48,090 --> 00:15:50,980
necesito crear otra clase que

217
00:15:50,980 --> 00:16:00,615
exporta el conjunto de promoción decir constante con promociones aquí.

218
00:16:00,615 --> 00:16:04,240
Así que aquí, voy a importar

219
00:16:06,920 --> 00:16:11,024
la clase de promoción

220
00:16:11,024 --> 00:16:18,400
del archivo promotion.ts,

221
00:16:18,400 --> 00:16:25,290
y luego exportaría una constante llamada promoción.

222
00:16:25,290 --> 00:16:32,395
Así que, ves que estoy usando una estructura muy similar a los platos aquí.

223
00:16:32,395 --> 00:16:36,290
Así que, comienzas a ver que,

224
00:16:36,660 --> 00:16:40,790
esa estructura que usamos anteriormente para

225
00:16:40,790 --> 00:16:46,465
las promociones para los platos también es útil para declarar promociones.

226
00:16:46,465 --> 00:16:47,910
Si tiene una estructura diferente,

227
00:16:47,910 --> 00:16:50,990
verá que con los líderes la estructura será un poco

228
00:16:50,990 --> 00:16:55,315
diferente para el objeto JavaScript aquí. Las promociones.

229
00:16:55,315 --> 00:17:00,160
Ahora, los detalles de una promoción específica que he dado en las instrucciones,

230
00:17:00,160 --> 00:17:02,790
así que te sugiero que lo copie y pegue de

231
00:17:02,790 --> 00:17:05,550
allí en lugar de que yo escriba todo aquí.

232
00:17:05,550 --> 00:17:07,390
Entonces, déjame seguir adelante y copiar y pegar

233
00:17:07,390 --> 00:17:11,800
ese objeto JavaScript en esta matriz de objetos JavaScript aquí,

234
00:17:11,800 --> 00:17:13,510
así que ahí lo tienes.

235
00:17:13,510 --> 00:17:20,475
La promoción tiene un solo objeto en este momento.

236
00:17:20,475 --> 00:17:22,715
En el futuro, podemos añadir más.

237
00:17:22,715 --> 00:17:26,375
En este punto, solo tengo uno, así que lo agregué allí,

238
00:17:26,375 --> 00:17:31,265
y voy a usar eso y esa es la promoción destacada para mi restaurante allí.

239
00:17:31,265 --> 00:17:33,045
Esto es sólo promoción,

240
00:17:33,045 --> 00:17:35,820
así que déjame actualizar esas promociones,

241
00:17:35,820 --> 00:17:37,465
eso es lo que necesito.

242
00:17:37,465 --> 00:17:42,120
Entonces, solo voy a guardar los cambios en el archivo promotion.ts.

243
00:17:42,120 --> 00:17:46,820
A continuación, crearé otro servicio llamado servicio de promoción.

244
00:17:46,820 --> 00:17:53,285
Así que para hacer eso, vamos a la línea de comando en el símbolo del sistema tipo

245
00:17:53,285 --> 00:18:02,005
ng generar encuestas servicios/promoción.

246
00:18:02,005 --> 00:18:05,105
Por lo tanto, el servicio de promoción que se está creando allí.

247
00:18:05,105 --> 00:18:08,500
Por lo tanto, ahora el servicio de promoción está en su lugar.

248
00:18:08,500 --> 00:18:13,575
Por lo tanto, vamos a añadir las características para PromotionService.

249
00:18:13,575 --> 00:18:18,070
Así que, yendo a PromotionService,

250
00:18:18,070 --> 00:18:25,690
verá que el PromotionService ahora está incluido en su carpeta de servicios aquí,

251
00:18:25,690 --> 00:18:28,615
por lo que necesitamos preparar un PromotionService.

252
00:18:28,615 --> 00:18:30,715
Así que, en el PromotionService,

253
00:18:30,715 --> 00:18:33,170
voy a importar

254
00:18:37,170 --> 00:18:48,355
promoción de compartido/promoción,

255
00:18:48,355 --> 00:18:55,010
la promoción de la clase, y también importar

256
00:18:57,000 --> 00:19:09,985
promociones de compartido/promoción de la clase allí.

257
00:19:09,985 --> 00:19:11,885
Las promociones constantes desde allí.

258
00:19:11,885 --> 00:19:14,590
Ahora, al igual que tuvimos para el servicio de platos,

259
00:19:14,590 --> 00:19:19,840
necesitamos crear tres métodos dentro de PromotionsService.

260
00:19:19,840 --> 00:19:25,080
Así que, lo que voy a hacer es ahorrarme el problema,

261
00:19:25,080 --> 00:19:27,450
voy a entrar en el plato.service,

262
00:19:27,450 --> 00:19:29,750
y luego simplemente copiar estos tres,

263
00:19:29,750 --> 00:19:33,445
y luego pegarlo en mi servicio de promoción,

264
00:19:33,445 --> 00:19:35,570
luego simplemente editar el código.

265
00:19:35,570 --> 00:19:38,965
De acuerdo, así que desde el servicio de promoción,

266
00:19:38,965 --> 00:19:46,505
necesito volver getPromotions y

267
00:19:46,505 --> 00:19:54,340
este es del tipo de promoción y luego esto devolverá PROMOCIONES,

268
00:19:54,340 --> 00:20:00,670
y luego obtener el segundo sería promoción

269
00:20:00,670 --> 00:20:08,505
que de nuevo recibe el id de la promoción,

270
00:20:08,505 --> 00:20:10,615
así que voy a volver

271
00:20:10,615 --> 00:20:20,830
PROMOCIONES.filter promo.id es id.

272
00:20:20,830 --> 00:20:26,780
Luego GetFeatured promoción.

273
00:20:26,780 --> 00:20:31,860
Por lo tanto, se puede ver que la estructura del Promotionservice es muy similar a

274
00:20:31,860 --> 00:20:39,920
el dishservice y esto no sería el tipo de promoción,

275
00:20:39,920 --> 00:20:41,875
y esto devolverá

276
00:20:41,875 --> 00:20:52,145
promotions.Filter promo y esto será promo.featured y eso es todo.

277
00:20:52,145 --> 00:20:55,030
Mi PromotionService está listo.

278
00:20:55,030 --> 00:20:59,695
Ahora, voy a entrar en el componente de hogar, y prepararlo,

279
00:20:59,695 --> 00:21:02,115
para que en mi componente de hogar,

280
00:21:02,115 --> 00:21:07,560
voy a mostrar un plato destacado y una promoción destacada.

281
00:21:07,560 --> 00:21:10,820
El característica/plato y característica/promoción se mostrará en

282
00:21:10,820 --> 00:21:15,690
el componente de inicio utilizando el componente de tarjeta de material angular.

283
00:21:15,690 --> 00:21:19,675
Por lo tanto, primero necesitamos obtener los datos en nuestro componente de inicio,

284
00:21:19,675 --> 00:21:24,690
, así que eso es lo que haremos en el archivo de script de tipo de componentes domésticos allí.

285
00:21:24,690 --> 00:21:29,630
Entonces, yendo al archivo de script de tipo componentes domésticos, home component.ts.

286
00:21:29,630 --> 00:21:44,330
Aquí, necesito importar el plato

287
00:21:44,330 --> 00:21:52,060
de compartido/plato y también el

288
00:21:52,060 --> 00:22:07,430
correspondiente dish.service de services/dish.service.

289
00:22:12,330 --> 00:22:17,495
Vale, ahora voy a hacer lo mismo para promociones,

290
00:22:17,495 --> 00:22:21,465
así que voy a copiar eso y pegarlo aquí,

291
00:22:21,465 --> 00:22:23,120
y luego editar este,

292
00:22:23,120 --> 00:22:26,735
así que esto sería promoción,

293
00:22:26,735 --> 00:22:31,315
esto sería promotionService,

294
00:22:31,315 --> 00:22:42,350
y luego promoción, y entonces esto sería promotionService.

295
00:22:42,790 --> 00:22:46,800
Así que, con esto, tenemos tanto el plato y

296
00:22:46,800 --> 00:22:50,205
servicio de plato y promoción disponible para nosotros,

297
00:22:50,205 --> 00:22:52,485
dentro de nuestro componente doméstico.

298
00:22:52,485 --> 00:22:54,660
Viniendo ahora al constructor.

299
00:22:54,660 --> 00:23:01,180
Vamos ahora inyectar los dos servicios aquí,

300
00:23:02,280 --> 00:23:12,590
y ponerlos a disposición para nuestras aplicaciones o servicio de platos,

301
00:23:25,490 --> 00:23:30,240
y el servicio de promoción inyectado aquí.

302
00:23:30,240 --> 00:23:34,610
Así pues, con esto, tenemos acceso a ambos servicios.

303
00:23:34,610 --> 00:23:38,650
Así que ahora dentro del método ngOnInit,

304
00:23:38,650 --> 00:23:43,779
voy a buscar los dos platos destacados.

305
00:23:43,779 --> 00:23:51,770
Así que, yo diría esto.dishService.getFeaturedDish

306
00:23:51,770 --> 00:23:59,520
y también promoción,

307
00:24:03,690 --> 00:24:11,510
promotionService y getFeaturedPromotion.

308
00:24:14,400 --> 00:24:18,820
Sólo para estar completo,

309
00:24:18,820 --> 00:24:23,185
déjame declarar el plato aquí como de

310
00:24:23,185 --> 00:24:32,025
tipo Plato y la promoción como de tipo Promoción aquí.

311
00:24:32,025 --> 00:24:38,830
Entonces, eso debería aclarar todos los valores que estamos usando dentro aquí.

312
00:24:38,830 --> 00:24:46,665
Así que, con esto, completamos la actualización de nuestro archivo mecanografiado de componentes domésticos.

313
00:24:46,665 --> 00:24:49,710
Pasemos ahora al archivo de plantilla,

314
00:24:49,710 --> 00:24:55,815
y luego añadamos las dos tarjetas para mostrar el plato destacado y la promoción destacada.

315
00:24:55,815 --> 00:25:00,310
Ahora, para esto, te he dado el código en las instrucciones.

316
00:25:00,310 --> 00:25:02,995
Entonces, solo voy a copiar ese código y pegarlo aquí.

317
00:25:02,995 --> 00:25:05,640
Ya sabes cómo crear tarjetas,

318
00:25:05,640 --> 00:25:10,590
para que puedas seguir fácilmente el código que pego aquí.

319
00:25:10,590 --> 00:25:17,095
Por lo tanto, la plantilla de componentes de inicio también se actualiza,

320
00:25:17,095 --> 00:25:20,830
para que pueda ver que tiene dos tarjetas aquí.

321
00:25:20,830 --> 00:25:26,550
Para uno, mostrando el plato y el otro mostrando la promoción aquí,

322
00:25:26,550 --> 00:25:33,030
y encerrado dentro de un div FXLayout aquí.

323
00:25:33,030 --> 00:25:38,175
Así que, guardemos los cambios y luego echemos un vistazo rápido a nuestra aplicación.

324
00:25:38,175 --> 00:25:41,095
Después de crear el servicio de promoción,

325
00:25:41,095 --> 00:25:45,470
también necesitamos incluir el servicio de promoción en AppModule,

326
00:25:45,470 --> 00:25:47,750
y hacerlo disponible para nuestra aplicación.

327
00:25:47,750 --> 00:25:49,840
Así que voy a entrar aquí,

328
00:25:49,840 --> 00:25:53,350
y luego importar

329
00:25:53,350 --> 00:26:00,950
el servicio de promoción aquí.

330
00:26:03,150 --> 00:26:07,915
Luego, declaró el servicio de promoción

331
00:26:07,915 --> 00:26:16,030
como uno de los proveedores

332
00:26:16,030 --> 00:26:19,720
en mi archivo AppModule.ts aquí.

333
00:26:19,720 --> 00:26:21,580
Entonces, en el archivo AppModule,

334
00:26:21,580 --> 00:26:23,415
estoy requiriendo ambos,

335
00:26:23,415 --> 00:26:25,480
y luego guardando cambios.

336
00:26:25,480 --> 00:26:27,055
Ir al navegador,

337
00:26:27,055 --> 00:26:29,455
ahora puedes ver que en el navegador,

338
00:26:29,455 --> 00:26:34,150
el componente de inicio ahora muestra las dos tarjetas,

339
00:26:34,150 --> 00:26:40,580
una para el plato destacado y otra para la promoción destacada aquí.

340
00:26:40,580 --> 00:26:43,850
Por lo tanto, se puede ver que los dos coches se muestran aquí.

341
00:26:43,850 --> 00:26:50,505
Ahora puedo navegar a la página de Menú,

342
00:26:50,505 --> 00:26:54,405
y luego también a la página de Contacto.

343
00:26:54,405 --> 00:26:56,690
La página Acerca de todavía no está ahí,

344
00:26:56,690 --> 00:27:02,070
vas a rellenar la página Acerca como parte de tu segunda tarea.

345
00:27:02,070 --> 00:27:07,490
Echando un vistazo a la misma aplicación en un tamaño de pantalla más pequeño,

346
00:27:07,490 --> 00:27:11,200
así que esta es una pantalla iPhone 6 Plus.

347
00:27:11,200 --> 00:27:16,225
Veamos el componente de inicio y una pantalla iPhone 6 Plus.

348
00:27:16,225 --> 00:27:24,490
Puedes ver ese plato destacado y la promoción destacada en la página de inicio allí.

349
00:27:24,490 --> 00:27:29,820
Entonces, el menú que hemos visto anteriormente,

350
00:27:29,820 --> 00:27:35,150
y también la página de Contacto que se muestra aquí.

351
00:27:35,150 --> 00:27:41,395
Por lo tanto, se puede ver que ahora nuestra aplicación de una sola página está mucho más configurada.

352
00:27:41,395 --> 00:27:43,120
Excepto por el Acerca de,

353
00:27:43,120 --> 00:27:46,875
que haremos en la segunda asignación.

354
00:27:46,875 --> 00:27:54,345
Un cambio menor más que puede hacer en su archivo HTML de componentes de encabezado,

355
00:27:54,345 --> 00:27:57,470
es que junto con la directiva de enlace del router,

356
00:27:57,470 --> 00:28:06,880
la ruta angular son también soporta una directiva más llamada RouteLinkActive.

357
00:28:06,880 --> 00:28:14,660
Esto nos permite aplicar algunas clases al elemento particular aquí.

358
00:28:14,660 --> 00:28:16,305
Entonces, en este caso,

359
00:28:16,305 --> 00:28:20,090
si este enlace se activa que lo que especifique aquí,

360
00:28:20,090 --> 00:28:24,980
se aplicará como clase a este elemento en particular allí.

361
00:28:24,980 --> 00:28:28,309
Entonces, voy a especificar una clase llamada activa.

362
00:28:28,309 --> 00:28:32,280
Así que aquí, estoy especificando RouterLinkActive con activo.

363
00:28:32,280 --> 00:28:35,265
Entonces, si defino una clase CSS llamada activa,

364
00:28:35,265 --> 00:28:39,300
entonces la clase se aplicará a este enlace,

365
00:28:39,300 --> 00:28:46,975
siempre que esta vista en particular se muestre en la página de aplicaciones aquí.

366
00:28:46,975 --> 00:28:53,250
Voy a copiar lo mismo y aplicarlo a todos los botones restantes,

367
00:28:53,250 --> 00:28:56,735
donde ya he definido el enlace del router.

368
00:28:56,735 --> 00:28:59,600
Por lo tanto, voy a aplicar la clase RouterLinkActive,

369
00:28:59,600 --> 00:29:04,195
al Inicio, el Menú y el Contacto.

370
00:29:04,195 --> 00:29:08,535
Ahora, esto también significa que debería definir una clase CSS activa.

371
00:29:08,535 --> 00:29:14,360
Entonces, para hacer eso, voy a entrar en el archivo SESS de componentes de encabezado,

372
00:29:14,360 --> 00:29:16,590
y luego definir una clase activa aquí,

373
00:29:16,590 --> 00:29:21,400
, así que definiré la clase activa allí.

374
00:29:21,400 --> 00:29:22,870
Para definir la clase activa,

375
00:29:22,870 --> 00:29:31,220
voy a añadir una variable de color más aquí llamada background-moredark.

376
00:29:33,030 --> 00:29:39,080
Entonces, el color correspondiente es 4527A0,

377
00:29:39,900 --> 00:29:47,480
esta es una versión más oscura de este color oscuro de fondo, 4527A0.

378
00:29:47,480 --> 00:29:50,055
Entonces, para mi activo,

379
00:29:50,055 --> 00:29:52,720
lo que voy a hacer es, desde la clase activa,

380
00:29:52,720 --> 00:29:57,725
voy a dejar que la clase defina un fondo,

381
00:29:57,725 --> 00:29:59,560
establecer el fondo de

382
00:29:59,560 --> 00:30:09,410
ese elemento al fondo-moredark color.

383
00:30:10,170 --> 00:30:18,270
Entonces, cuando esa vista en particular es seleccionada y mostrada en la página,

384
00:30:18,270 --> 00:30:21,630
entonces esta clase activa se aplicará a

385
00:30:21,630 --> 00:30:24,670
esa etiqueta A

386
00:30:24,670 --> 00:30:30,340
en particular por la directiva activa de enlace del router que hemos aplicado aquí.

387
00:30:30,340 --> 00:30:34,750
Ahora, ¿qué cambio causa esto en nuestra página web?

388
00:30:34,750 --> 00:30:36,460
Ahora, yendo a nuestra página web,

389
00:30:36,460 --> 00:30:40,685
veremos lo que esto introduce en nuestra página web.

390
00:30:40,685 --> 00:30:43,390
Ir a nuestra aplicación,

391
00:30:43,390 --> 00:30:45,360
ahora ves que cuando estamos en

392
00:30:45,360 --> 00:30:52,125
la vista de inicio en el componente de inicio se muestra aquí, su vista correspondiente.

393
00:30:52,125 --> 00:30:59,870
Entonces, el botón Inicio aquí tiene un color de fondo diferente que se aplica

394
00:30:59,870 --> 00:31:03,670
porque la clase activa se ha agregado porque

395
00:31:03,670 --> 00:31:08,150
definimos el routerLinkActive para activo aquí.

396
00:31:08,150 --> 00:31:09,510
Entonces, esa clase se aplica.

397
00:31:09,510 --> 00:31:11,985
Del mismo modo, al seleccionar el menú,

398
00:31:11,985 --> 00:31:17,205
verá que el menú está resaltado en el encabezado,

399
00:31:17,205 --> 00:31:20,025
y la vista de menús se muestra aquí,

400
00:31:20,025 --> 00:31:21,795
y de manera similar para el contenido.

401
00:31:21,795 --> 00:31:29,035
Ahora, esto nos permite ver de un vistazo en qué pagar vista particular VR,

402
00:31:29,035 --> 00:31:31,760
en nuestra aplicación de una sola página.

403
00:31:31,760 --> 00:31:38,145
Por lo tanto, esta es una pequeña mejora adicional de la oferta de bit a la interfaz de usuario,

404
00:31:38,145 --> 00:31:42,255
que nos permite ver algunas características interesantes.

405
00:31:42,255 --> 00:31:46,004
Aunque, no agrega mucho a la funcionalidad de la aplicación,

406
00:31:46,004 --> 00:31:54,370
, solo agrega alguna pequeña característica que será una adición útil a tu aplicación.

407
00:31:54,370 --> 00:31:58,615
Así que, con esto, completamos este ejercicio.

408
00:31:58,615 --> 00:32:02,275
En este ejercicio, hemos trabajado para integrar

409
00:32:02,275 --> 00:32:07,495
el componente de contacto en nuestra aplicación de una sola página.

410
00:32:07,495 --> 00:32:15,800
También diseñamos un par de tarjetas que incluimos en el componente de hogar,

411
00:32:15,800 --> 00:32:20,180
y agregamos algunas nuevas características a nuestra aplicación.

412
00:32:20,180 --> 00:32:28,310
Este es un buen momento para que guarde los cambios en su repositorio de Git con el mensaje

413
00:32:28,310 --> 00:32:31,520
Aplicación de una sola página Parte 1.