1
00:00:03,920 --> 00:00:10,619
Antes de seguir adelante con el resto de los ejercicios y las tareas en este curso,

2
00:00:10,619 --> 00:00:13,245
pensé que este sería un buen momento para mí

3
00:00:13,245 --> 00:00:16,450
darle a mi aplicación angular una buena estructura.

4
00:00:16,450 --> 00:00:19,660
Entonces, aquí es donde voy a agregar el encabezado y el pie de página

5
00:00:19,660 --> 00:00:22,875
para mi aplicación angular para que la forma

6
00:00:22,875 --> 00:00:29,635
se renderiza la interfaz de usuario sea mucho más atractiva de lo que ha sido hasta ahora.

7
00:00:29,635 --> 00:00:34,010
Por lo tanto, vamos a ver cómo podemos construir múltiples componentes para

8
00:00:34,010 --> 00:00:38,150
ocupar diferentes partes de la pantalla dentro de nuestra aplicación angular.

9
00:00:38,150 --> 00:00:43,445
Así que, aquí, verán que mi aplicación angular ahora va a consistir en un encabezado,

10
00:00:43,445 --> 00:00:46,830
que es un componente separado, el pie de página,

11
00:00:46,830 --> 00:00:48,400
que es otro componente,

12
00:00:48,400 --> 00:00:50,145
y luego entre los dos,

13
00:00:50,145 --> 00:00:54,860
tendré la parte de mi aplicación angular que va a

14
00:00:54,860 --> 00:01:00,080
ser controlada más adelante por usando el enrutador angular.

15
00:01:00,080 --> 00:01:06,740
Así que, verás, estoy preparando el escenario para lo que va a venir más adelante en este curso.

16
00:01:06,740 --> 00:01:08,840
Así que, en el camino,

17
00:01:08,840 --> 00:01:14,195
también haremos uso de Font Awesome Icons dentro de nuestra aplicación angular.

18
00:01:14,195 --> 00:01:16,540
Me encanta Font Awesome Icons,

19
00:01:16,540 --> 00:01:18,890
, así que pensé que este sería un buen lugar para

20
00:01:18,890 --> 00:01:23,005
introducir estos iconos en mi aplicación angular.

21
00:01:23,005 --> 00:01:28,715
Para continuar, vamos a instalar la fuente impresionante en nuestra aplicación angular.

22
00:01:28,715 --> 00:01:31,920
Entonces, para hacer eso, usaré NPM para ir,

23
00:01:31,920 --> 00:01:34,320
y buscar font-awesome para mí,

24
00:01:34,320 --> 00:01:41,475
para que NPM instale font-awesome 4.7.0 y guarde.

25
00:01:41,475 --> 00:01:44,055
Entonces, deje que font-awesome sea instalado.

26
00:01:44,055 --> 00:01:48,435
Así que, una vez que font-awesome entra en nuestra aplicación angular,

27
00:01:48,435 --> 00:01:50,570
y luego se convierte en parte de los módulos de nodo

28
00:01:50,570 --> 00:01:53,055
que se incluyen dentro de nuestra aplicación angular,

29
00:01:53,055 --> 00:01:58,465
el siguiente paso es ponerla a disposición para nuestra aplicación angular.

30
00:01:58,465 --> 00:02:03,355
Necesitamos integrar font-awesome en nuestra aplicación angular.

31
00:02:03,355 --> 00:02:04,710
Entonces, para hacer eso,

32
00:02:04,710 --> 00:02:06,510
vaya a la carpeta fuente,

33
00:02:06,510 --> 00:02:14,280
y luego cree un archivo llamado _Variables.scss en la carpeta fuente.

34
00:02:14,280 --> 00:02:18,400
En el archivo Variables.scss,

35
00:02:18,400 --> 00:02:27,860
agregue $fa-font-path: y

36
00:02:27,860 --> 00:02:33,810
luego entre comillas, ponga../node_modules/font-awesome/fonts.

37
00:02:38,510 --> 00:02:45,080
Por lo tanto, estamos especificando la ruta de fuente para nuestros archivos impresionantes de fuentes aquí.

38
00:02:45,330 --> 00:02:51,245
A continuación, abra el archivo Styles.scss,

39
00:02:51,245 --> 00:02:53,995
y luego en el archivo Styles.scss,

40
00:02:53,995 --> 00:02:56,720
vamos a añadir un par de líneas allí.

41
00:02:56,720 --> 00:03:05,335
Primero, importaremos las variables que acabamos de declarar diciendo @import,

42
00:03:05,335 --> 00:03:08,550
y dentro de comillas,

43
00:03:08,550 --> 00:03:14,025
luego importaremos los archivos font-awesome allí,

44
00:03:14,025 --> 00:03:15,790
luego diremos

45
00:03:16,040 --> 00:03:30,020
@import../node_modules/font-awesome/scss/font-awesome. Estamos importando la versión

46
00:03:30,020 --> 00:03:36,540
SCSS porque estamos usando SCSS en nuestra aplicación angular.

47
00:03:36,670 --> 00:03:41,850
Una vez que hayamos modificado los estilos para el archivo CSS,

48
00:03:41,850 --> 00:03:43,680
vamos a guardar los cambios.

49
00:03:43,680 --> 00:03:46,580
En este punto, es posible que necesitemos reiniciar

50
00:03:46,580 --> 00:03:50,840
nuestro servidor que estaba sirviendo nuestra aplicación angular.

51
00:03:50,840 --> 00:03:53,590
Así que, donde escribió NG serve,

52
00:03:53,590 --> 00:03:58,010
es posible que desee detener el servidor que está sirviendo su aplicación angular y

53
00:03:58,010 --> 00:04:03,135
reiniciarlo para que incluya estos nuevos cambios que se hicieron.

54
00:04:03,135 --> 00:04:05,280
Así que, yendo a mi terminal,

55
00:04:05,280 --> 00:04:09,110
voy a detener mi servidor,

56
00:04:09,110 --> 00:04:15,095
y luego reiniciar el servidor para que tenga en cuenta el cambio que he hecho.

57
00:04:15,095 --> 00:04:18,530
Usted vería el estado actual de

58
00:04:18,530 --> 00:04:21,770
nuestra aplicación angular mirándola en el navegador.

59
00:04:21,770 --> 00:04:25,040
Entonces, esto es lo que tenemos en nuestra aplicación angular.

60
00:04:25,040 --> 00:04:28,160
Quiero poder agregar un encabezado y un pie de página a

61
00:04:28,160 --> 00:04:33,320
esta vista para poder usar tanto el encabezado como el pie de página,

62
00:04:33,320 --> 00:04:36,680
y luego el contenido real entre el encabezado

63
00:04:36,680 --> 00:04:40,550
y el pie de página en la forma en que construyo mi aplicación angular.

64
00:04:40,550 --> 00:04:41,690
Así que, para hacer eso,

65
00:04:41,690 --> 00:04:46,135
voy a crear dos nuevos componentes llamados encabezado y pie de página,

66
00:04:46,135 --> 00:04:51,510
y permitirles administrar su parte de la pantalla que se les asigna.

67
00:04:51,510 --> 00:04:56,290
Al ir al símbolo del sistema, permítanme generar un nuevo componente de encabezado.

68
00:04:56,290 --> 00:04:58,950
Incluso puedo decir ng g,

69
00:04:58,950 --> 00:05:02,420
que es suficiente para angular CLI para

70
00:05:02,420 --> 00:05:06,190
reconocer que quiere generar un componente.

71
00:05:06,190 --> 00:05:11,310
Entonces, digo ng g encabezado de componente,

72
00:05:11,760 --> 00:05:17,370
y también ng g pie de página de componente.

73
00:05:17,370 --> 00:05:20,900
Así que, ahora, tengo dos componentes que están disponibles para mí

74
00:05:20,900 --> 00:05:25,030
para hacer uso dentro de mi aplicación angular.

75
00:05:25,030 --> 00:05:28,445
¿Cómo voy a hacer uso de estos dos componentes?

76
00:05:28,445 --> 00:05:31,665
Vayamos al archivo component.html de App,

77
00:05:31,665 --> 00:05:35,360
y luego hagamos uso de estos dos componentes en la forma en que

78
00:05:35,360 --> 00:05:40,340
componemos toda la pantalla para nuestra aplicación angular.

79
00:05:40,340 --> 00:05:43,185
Volviendo a nuestra aplicación,

80
00:05:43,185 --> 00:05:48,620
vemos que el archivo module.ts de la aplicación

81
00:05:48,620 --> 00:05:51,680
ya incluye el encabezado y el componente de pie de página

82
00:05:51,680 --> 00:05:54,965
y ya se han incluido en las declaraciones aquí.

83
00:05:54,965 --> 00:05:58,075
Así que esta es la ventaja de usar la CLI angular,

84
00:05:58,075 --> 00:06:01,610
se encarga de todo este trabajo preliminar para

85
00:06:01,610 --> 00:06:05,825
usted para que pueda concentrarse en simplemente construir su aplicación angular.

86
00:06:05,825 --> 00:06:09,340
Entonces, esa es la razón por la que me encanta la CLI angular

87
00:06:09,340 --> 00:06:13,490
como un enfoque para construir mi aplicación angular.

88
00:06:13,490 --> 00:06:20,640
Así que ahora, vamos al archivo HTML de componentes de la aplicación.

89
00:06:20,640 --> 00:06:24,530
Así que, aquí, verá que hemos incluido el menú de la aplicación allí abajo.

90
00:06:24,530 --> 00:06:29,430
Voy a eliminar esta barra de herramientas del archivo HTML de componentes de mi aplicación.

91
00:06:29,430 --> 00:06:37,650
Esa barra de herramientas se convertirá en parte de la plantilla de encabezado para mi componente de encabezado.

92
00:06:37,650 --> 00:06:45,500
Entonces, en su lugar, mi archivo

93
00:06:45,500 --> 00:06:54,310
de plantilla de componentes de la aplicación solo contendrá el encabezado y el pie de página en la parte inferior.

94
00:06:56,450 --> 00:06:59,065
Así que, ven que ahora,

95
00:06:59,065 --> 00:07:02,480
tenemos las opiniones de los tres componentes.

96
00:07:02,480 --> 00:07:04,370
El encabezado, el menú,

97
00:07:04,370 --> 00:07:07,160
y el pie de página ocupando toda la pantalla.

98
00:07:07,160 --> 00:07:10,940
Por lo tanto, estos tres componentes obtienen esa parte de la pantalla por sí mismos.

99
00:07:10,940 --> 00:07:16,970
Guardemos los cambios y echemos un vistazo rápido a nuestra aplicación en el navegador.

100
00:07:16,970 --> 00:07:19,855
Ir a la aplicación en el navegador,

101
00:07:19,855 --> 00:07:22,895
ahora ves que el encabezado ya ha ocupado es

102
00:07:22,895 --> 00:07:26,090
parte de la pantalla allí arriba, y obviamente,

103
00:07:26,090 --> 00:07:28,400
ya que acabamos de preparar el componente,

104
00:07:28,400 --> 00:07:30,245
sólo dice que el encabezado funciona,

105
00:07:30,245 --> 00:07:31,879
y luego abajo aquí,

106
00:07:31,879 --> 00:07:36,180
el pie de página también ha tomado su lugar en la página de pantalla.

107
00:07:36,180 --> 00:07:41,630
Ahora, vamos a seguir adelante y actualizar las plantillas tanto para el encabezado como para el pie de página

108
00:07:41,630 --> 00:07:47,625
para que podamos definir bien nuestra interfaz de usuario para nuestra aplicación angular.

109
00:07:47,625 --> 00:07:50,735
Comencemos el trabajo en nuestro pie de página.

110
00:07:50,735 --> 00:07:53,180
Así que, para empezar con el pie de página,

111
00:07:53,180 --> 00:07:55,780
vamos al archivo de plantilla del pie de página,

112
00:07:55,780 --> 00:08:02,355
y luego vamos a reemplazar esto con la plantilla recién diseñada del pie de página.

113
00:08:02,355 --> 00:08:03,920
Ahora, para su conveniencia,

114
00:08:03,920 --> 00:08:07,030
He proporcionado el código para usted en las instrucciones.

115
00:08:07,030 --> 00:08:10,690
Será prudente copiar todo el código desde allí,

116
00:08:10,690 --> 00:08:12,155
y luego pegarlo aquí.

117
00:08:12,155 --> 00:08:15,715
Luego, examine lo que hace este pie de página.

118
00:08:15,715 --> 00:08:20,830
Así que aquí, ves que he pegado en el código para mi plantilla de pie de página.

119
00:08:20,830 --> 00:08:24,130
Ahora, voy a volver a este código un poco más tarde.

120
00:08:24,130 --> 00:08:28,045
Si has hecho el curso anterior en Bootstrap,

121
00:08:28,045 --> 00:08:33,580
verías que esta es la forma material angular de implementar

122
00:08:33,580 --> 00:08:40,185
el mismo tipo de estructura para el pie de página que hemos hecho en el curso Bootstrap.

123
00:08:40,185 --> 00:08:43,965
Algunas de estas cosas serán reconocibles para usted ya,

124
00:08:43,965 --> 00:08:48,260
pero permítanme completar la actualización a la plantilla de pie de página,

125
00:08:48,260 --> 00:08:57,085
y luego también agregaremos algunos códigos SCSS en mi archivo component.scss pie de página,

126
00:08:57,085 --> 00:09:02,100
y luego echar un vistazo a cómo el pie de página ahora da forma.

127
00:09:02,100 --> 00:09:05,675
Así que aquí, he pegado de nuevo en el código

128
00:09:05,675 --> 00:09:09,585
de las instrucciones de ejercicio que siguen a este video,

129
00:09:09,585 --> 00:09:18,880
para mostrar las diferentes clases de SCSS que he agregado a mi pie de página.

130
00:09:18,880 --> 00:09:23,320
Entonces, tengo algunas clases que he definido aquí,

131
00:09:23,320 --> 00:09:27,380
voy a hacer uso de ellas para definir una parte de mi pie de página,

132
00:09:27,380 --> 00:09:29,570
y luego similar clase de pie de página aquí,

133
00:09:29,570 --> 00:09:32,765
y tengo una mezcla SCSS aquí,

134
00:09:32,765 --> 00:09:37,165
y algunas variables aquí que

135
00:09:37,165 --> 00:09:41,450
definen varios colores que voy a usar en mi angular aplicación.

136
00:09:41,450 --> 00:09:44,145
Así que, guardemos los cambios que hemos hecho.

137
00:09:44,145 --> 00:09:49,755
Echemos un vistazo al pie de página en su encarnación actual,

138
00:09:49,755 --> 00:09:55,740
y luego volveremos y haremos una visita rápida al código que he incluido tanto

139
00:09:55,740 --> 00:10:02,345
en el archivo de plantilla de componentes del pie de página como en el código SCSS aquí.

140
00:10:02,345 --> 00:10:06,835
Ir a nuestra aplicación angular en el navegador, wallah,

141
00:10:06,835 --> 00:10:11,545
allí tienes el nuevo pie de página para nuestra aplicación angular.

142
00:10:11,545 --> 00:10:14,295
Así que, se puede ver que tengo algunas cosas aquí.

143
00:10:14,295 --> 00:10:19,840
Estos en el borde izquierdo son los varios enlaces

144
00:10:19,840 --> 00:10:25,975
a varias páginas que van a formar parte de mi aplicación Angular.

145
00:10:25,975 --> 00:10:30,620
Vamos a ver cómo lo hacemos como parte de los próximos ejercicios.

146
00:10:30,620 --> 00:10:35,110
Ahora, aquí estoy haciendo uso del componente de botón que

147
00:10:35,110 --> 00:10:39,795
es parte del material angular para definir estos enlaces aquí,

148
00:10:39,795 --> 00:10:41,870
entonces tengo la dirección aquí,

149
00:10:41,870 --> 00:10:46,810
y luego también uso de nuevo botones para definir esta secuencia

150
00:10:46,810 --> 00:10:52,110
de botones para los diversos enlaces de redes sociales para mi restaurante aquí.

151
00:10:52,110 --> 00:10:55,515
Por lo tanto, se puede ver que tengo todos estos.

152
00:10:55,515 --> 00:10:57,470
Para crear estos, utilizo

153
00:10:57,470 --> 00:11:01,820
el soporte de material angular para pequeños botones de acción flotante aquí,

154
00:11:01,820 --> 00:11:05,155
y eso da una buena estructura para esto.

155
00:11:05,155 --> 00:11:07,860
Si has visto la versión de Bootstrap de esto,

156
00:11:07,860 --> 00:11:14,205
me gusta mucho más que la versión de Bootstrap que creé en el curso anterior.

157
00:11:14,205 --> 00:11:19,730
Por lo tanto, nuestro pie de página está ahora bien en su lugar.

158
00:11:19,730 --> 00:11:22,695
Echemos un vistazo rápidamente a parte del código en el pie de página.

159
00:11:22,695 --> 00:11:27,890
Ahora, no voy a explicar eso con mucho detalle porque eso es

160
00:11:27,890 --> 00:11:33,665
tratar más con el material Angular que Angular mismo,

161
00:11:33,665 --> 00:11:36,780
pero en el camino con solo mirar la estructura del código,

162
00:11:36,780 --> 00:11:39,045
comenzarás a ver cómo

163
00:11:39,045 --> 00:11:45,095
estos componentes de Material Angular se pueden usar para definir algo como esto.

164
00:11:45,095 --> 00:11:47,060
Al ir al componente de pie de página,

165
00:11:47,060 --> 00:11:55,795
ves que tengo un div externo aquí para el cual he especificado un diseño angular,

166
00:11:55,795 --> 00:11:59,280
atributos de diseño flex aquí,

167
00:11:59,280 --> 00:12:01,895
así que digo que la fila FXLayout,

168
00:12:01,895 --> 00:12:06,075
y luego FxLayout sm y xs para ser columna.

169
00:12:06,075 --> 00:12:10,160
Entonces, para tamaños de pantalla pequeños y extra pequeños es

170
00:12:10,160 --> 00:12:14,380
va a posicionar todo el contenido como columnas,

171
00:12:14,380 --> 00:12:16,990
pero para los tamaños de pantalla más grandes,

172
00:12:16,990 --> 00:12:18,300
los va a posicionar como fila.

173
00:12:18,300 --> 00:12:21,545
Entonces, esto es lo que me da la buena estructura para mi pie de página.

174
00:12:21,545 --> 00:12:24,790
Como ves en el div de la interfaz de usuario,

175
00:12:24,790 --> 00:12:28,810
estoy posicionando todo el centro de contenido aquí,

176
00:12:28,810 --> 00:12:31,495
y abajo aquí,

177
00:12:31,495 --> 00:12:33,380
defino el primero.

178
00:12:33,380 --> 00:12:40,415
Entonces, este giro matemático aquí que estoy usando define mis enlaces aquí.

179
00:12:40,415 --> 00:12:46,235
Entonces, en esto estoy usando mat como componente de material angular,

180
00:12:46,235 --> 00:12:49,425
y dentro de allí estoy usando el atributo a con

181
00:12:49,425 --> 00:12:58,990
el componente de botón mat asignado a un para crear estos botones aquí.

182
00:12:58,990 --> 00:13:02,255
Más tarde, voy a volver y añadir

183
00:13:02,255 --> 00:13:07,665
el código real para estos enlaces en los ejercicios posteriores aquí.

184
00:13:07,665 --> 00:13:12,940
Esto es lo que me ayuda a crear la lista de enlaces en el lado izquierdo.

185
00:13:12,940 --> 00:13:14,920
Esta es la dirección que ves,

186
00:13:14,920 --> 00:13:17,420
esto es bastante sencillo de mirar.

187
00:13:17,420 --> 00:13:22,080
Entonces, este es un div para el que estoy usando FXFlex con 50,

188
00:13:22,080 --> 00:13:24,490
y el otro con FXFlex con 40.

189
00:13:24,490 --> 00:13:29,230
Entonces, 40 significa 40 por ciento y 50 significa 50 por ciento,

190
00:13:29,230 --> 00:13:33,150
y aquí estoy usando FxFlex offset 20 píxeles.

191
00:13:33,150 --> 00:13:37,410
Por lo tanto, mueve este contenido a la derecha en 20 píxeles.

192
00:13:37,410 --> 00:13:41,830
Entonces, tengo un espacio de 20 píxeles en el lado izquierdo para

193
00:13:41,830 --> 00:13:47,660
este div particular que contiene estos enlaces aquí.

194
00:13:47,660 --> 00:13:49,400
Entonces finalmente abajo aquí,

195
00:13:49,400 --> 00:13:55,850
tengo este conjunto de enlaces que estoy haciendo uso para

196
00:13:55,850 --> 00:14:02,340
crear la barra con todos los enlaces de redes sociales allí.

197
00:14:02,340 --> 00:14:06,330
Entonces, estoy usando un con el botón de icono de la estera aquí.

198
00:14:06,330 --> 00:14:14,850
Entonces, eso es lo que crea los botones redondeados que ves en el pie de página allí.

199
00:14:14,850 --> 00:14:16,150
Ahora, para cada uno de estos,

200
00:14:16,150 --> 00:14:18,640
estoy aplicando la clase correspondiente aquí.

201
00:14:18,640 --> 00:14:21,745
Por lo tanto, puede notar que el botón Google Plus, botón Facebook,

202
00:14:21,745 --> 00:14:27,590
todas estas clases están definidas en mi archivo SCSS allí,

203
00:14:27,590 --> 00:14:31,540
donde he especificado los colores para el fondo y así sucesivamente para esto,

204
00:14:31,540 --> 00:14:38,025
para que coincida con el esquema de color típico que utilizan estos sitios de redes sociales.

205
00:14:38,025 --> 00:14:43,380
Por lo tanto, pase un poco de tiempo mirando este código aquí,

206
00:14:43,380 --> 00:14:49,435
y luego rápidamente obtendrá una idea de cómo se ha diseñado el pie de página.

207
00:14:49,435 --> 00:14:54,520
Del mismo modo, yendo al pie de página de componentes código Sass aquí,

208
00:14:54,520 --> 00:14:57,460
para que pueda ver que he definido varios colores aquí.

209
00:14:57,460 --> 00:15:00,970
Estoy usando una mezcla con el margen configurado aquí,

210
00:15:00,970 --> 00:15:02,045
y luego para mi pie de página,

211
00:15:02,045 --> 00:15:04,695
defino el color de fondo apropiadamente,

212
00:15:04,695 --> 00:15:10,150
y note las diversas clases que estoy definiendo aquí

213
00:15:10,150 --> 00:15:12,910
un botón de Facebook para el cual el color y

214
00:15:12,910 --> 00:15:15,910
el color de fondo que he definido para cada uno de ellos.

215
00:15:15,910 --> 00:15:18,300
Entonces, que el color correspondiente de

216
00:15:18,300 --> 00:15:22,835
ese sitio de redes sociales se está utilizando como color de fondo para cada uno de estos.

217
00:15:22,835 --> 00:15:25,255
Ahora, en el curso de Bootstrap anterior,

218
00:15:25,255 --> 00:15:31,200
había usado el Bootstrap Social para lograr lo mismo.

219
00:15:31,200 --> 00:15:34,920
Eso no funciona muy bien con el material Angular,

220
00:15:34,920 --> 00:15:41,170
, así que es por eso que acabo de crear mi propio conjunto de gafas Sass aquí,

221
00:15:41,170 --> 00:15:46,380
y luego agregar el código que necesito para crear esos botones allí.

222
00:15:46,380 --> 00:15:48,840
Si necesita agregar más botones,

223
00:15:48,840 --> 00:15:51,490
entonces simplemente cree más clases como estas corresponde a

224
00:15:51,490 --> 00:15:54,695
los botones que desea agregar a su aplicación.

225
00:15:54,695 --> 00:15:57,355
Entonces, eso construye nuestro pie de página.

226
00:15:57,355 --> 00:16:01,995
Ahora, el encabezado es la siguiente parte a la que vamos a apuntar.

227
00:16:01,995 --> 00:16:04,770
Al ir al encabezado, se abrirá el encabezado

228
00:16:04,770 --> 00:16:09,320
archivo de plantilla de componentes y verá lo que contiene.

229
00:16:09,320 --> 00:16:11,565
Vamos a reemplazar esto con

230
00:16:11,565 --> 00:16:16,115
la plantilla que te he dado en las instrucciones que siguen aquí.

231
00:16:16,115 --> 00:16:19,495
Así que, solo adelante y corta y pega ese código aquí,

232
00:16:19,495 --> 00:16:22,730
porque esto no tiene nada que ver específicamente con angular.

233
00:16:22,730 --> 00:16:26,620
Entonces, es por eso que solo te estoy permitiendo cortar y pegar el código directamente desde allí,

234
00:16:26,620 --> 00:16:29,060
ahorra algo de tiempo para nosotros.

235
00:16:29,060 --> 00:16:35,300
Puede ver que ahora he reemplazado la plantilla de encabezados con algún código aquí.

236
00:16:35,300 --> 00:16:37,230
Del mismo modo, mientras estamos en ello,

237
00:16:37,230 --> 00:16:43,100
también agregaremos algún código SCSS para mi archivo header.components.scss aquí,

238
00:16:43,100 --> 00:16:46,550
simplemente vaya y copie el código de las instrucciones.

239
00:16:46,550 --> 00:16:48,845
Del mismo modo, mientras estamos en ello,

240
00:16:48,845 --> 00:16:55,810
añadiremos algunas clases SCSS más a mi archivo Styles.scss principal.

241
00:16:55,810 --> 00:16:58,480
Entonces, en este archivo principal Styles.scss,

242
00:16:58,480 --> 00:17:03,850
agregaré subcolores y un par de clases más en esto.

243
00:17:03,850 --> 00:17:09,650
Entonces, pegaremos el código de las instrucciones que te he dado.

244
00:17:09,650 --> 00:17:14,425
Entonces, la actualización del archivo Styles.scss ahora está completa,

245
00:17:14,425 --> 00:17:18,165
así que he agregado algunos colores aquí y mezclarlo allí,

246
00:17:18,165 --> 00:17:23,230
y luego en la parte inferior he agregado algunas clases más aquí que

247
00:17:23,230 --> 00:17:28,975
me ayudan cuando estoy diseñando mis plantillas para mi aplicación angular.

248
00:17:28,975 --> 00:17:30,680
Entonces, todos estos cambios,

249
00:17:30,680 --> 00:17:32,120
vamos a guardar los cambios,

250
00:17:32,120 --> 00:17:36,435
echar un vistazo rápido a cómo se ve mi encabezado ahora en la aplicación,

251
00:17:36,435 --> 00:17:41,735
y luego volveremos y volveremos rápidamente a visitar el código que acabamos de incluir aquí.

252
00:17:41,735 --> 00:17:45,775
Volviendo a mi aplicación Angular en el navegador,

253
00:17:45,775 --> 00:17:51,820
ahora ves que la barra de herramientas vuelve a aparecer en el encabezado aquí,

254
00:17:51,820 --> 00:17:56,980
junto con algunos enlaces en

255
00:17:56,980 --> 00:18:03,260
allí y luego una imagen que representa el logotipo de mi restaurante,

256
00:18:03,260 --> 00:18:12,095
y luego aquí, tienes algo que usamos el archivo jumbotron en el anterior Por supuesto.

257
00:18:12,095 --> 00:18:15,890
Voy a usar una clase llamada jumbotron para crear este

258
00:18:15,890 --> 00:18:20,015
en la aplicación Angular también,

259
00:18:20,015 --> 00:18:24,545
así que aquí en el lado izquierdo tengo la información de mi restaurante y

260
00:18:24,545 --> 00:18:30,280
el logotipo del restaurante y me dejé un poco de espacio aquí para agregar algo en el futuro.

261
00:18:30,280 --> 00:18:36,610
Entonces, aquí ves que mi aplicación ahora toma forma con un encabezado,

262
00:18:36,610 --> 00:18:38,745
con algunos enlaces allí.

263
00:18:38,745 --> 00:18:41,070
Ahora, vamos a hacer uso de estos enlaces en

264
00:18:41,070 --> 00:18:46,145
los próximos ejercicios para configurar mi aplicación angular,

265
00:18:46,145 --> 00:18:52,220
y luego el menú sentado en medio y luego abajo aquí mi pie de página.

266
00:18:52,220 --> 00:18:55,100
Ir a mi archivo de plantilla de componentes de encabezado,

267
00:18:55,100 --> 00:19:00,830
ahora puede ver cómo he creado la barra de herramientas con los botones adicionales aquí.

268
00:19:00,830 --> 00:19:03,740
Entonces, recuerda que ya teníamos la barra de herramientas

269
00:19:03,740 --> 00:19:08,035
en uso en el archivo de plantilla de componentes de la aplicación,

270
00:19:08,035 --> 00:19:16,845
Lo he cortado desde allí y en su lugar uso la barra de herramientas en la plantilla de encabezados aquí.

271
00:19:16,845 --> 00:19:18,915
Ahora, dentro de esta barra de herramientas,

272
00:19:18,915 --> 00:19:26,260
he incluido algunos enlaces con la clase de botón aplicada a ella y esto es lo que

273
00:19:26,260 --> 00:19:34,745
me permite crear esos enlaces en la barra de herramientas como menú para mi aplicación web.

274
00:19:34,745 --> 00:19:40,855
Debajo de allí, he creado un div con el contenedor de clase y jumbotron.

275
00:19:40,855 --> 00:19:46,650
Esa es la razón por la que agregué las clases contenedor y jumbotron en mi archivo SCSS,

276
00:19:46,650 --> 00:19:50,480
para que pueda usarlas dentro de mis plantillas aquí.

277
00:19:50,480 --> 00:19:51,910
Entonces, para lo cual nuevamente,

278
00:19:51,910 --> 00:20:01,025
aplico y algunos atributos de diseño flex aquí para ayudarme a diseñar la pantalla allí.

279
00:20:01,025 --> 00:20:06,500
Entonces puede ver cómo he usado un par de divs aquí con

280
00:20:06,500 --> 00:20:13,815
el atributo fxFlex aplicado en consecuencia para crear la interfaz de usuario,

281
00:20:13,815 --> 00:20:16,385
para mi aplicación aquí.

282
00:20:16,385 --> 00:20:22,400
Por lo tanto, pase un poco de tiempo aquí para echar un vistazo rápido a este código aquí para

283
00:20:22,400 --> 00:20:29,130
entender rápidamente cómo se ha creado mi diseño para mi plantilla de encabezado.

284
00:20:29,130 --> 00:20:30,620
No es tan complicado,

285
00:20:30,620 --> 00:20:32,825
una vez que hayas completado el curso de Bootstrap,

286
00:20:32,825 --> 00:20:35,619
esto no es tan difícil de entender.

287
00:20:35,619 --> 00:20:39,520
En el camino, también estás aprendiendo el diseño flexible angular y luego

288
00:20:39,520 --> 00:20:44,105
también los componentes angulares del material aquí.

289
00:20:44,105 --> 00:20:48,619
Al ir al archivo SCSS para el componente de encabezado,

290
00:20:48,619 --> 00:20:52,300
se puede ver que he agregado en algunos colores aquí y luego una mezcla

291
00:20:52,300 --> 00:20:56,100
y luego también se agregó en una clase jumbotron aquí.

292
00:20:56,100 --> 00:20:58,275
Ahora, la clase contenedor no está aquí,

293
00:20:58,275 --> 00:21:01,315
la clase contenedor está en el archivo de estilos principal.

294
00:21:01,315 --> 00:21:03,600
Porque la clase contenedor es algo que voy a usar

295
00:21:03,600 --> 00:21:06,010
para muchas de las plantillas allí.

296
00:21:06,010 --> 00:21:11,800
Entonces, por eso, agregué en la clase contenedor al archivo Styles.scss

297
00:21:11,800 --> 00:21:18,020
, que es el archivo común para toda mi aplicación angular.

298
00:21:18,020 --> 00:21:21,375
Así que, allí he añadido en algunos colores adicionales aquí,

299
00:21:21,375 --> 00:21:24,670
y también he creado una mezcla aquí,

300
00:21:24,670 --> 00:21:26,759
y luego añadido en el contenedor,

301
00:21:26,759 --> 00:21:29,980
el fondo primario, y los colores de acento de fondo,

302
00:21:29,980 --> 00:21:33,640
y luego también estoy usando otra clase llamada flexiones espaciador,

303
00:21:33,640 --> 00:21:37,575
que voy a hacer uso de en uno de los ejercicios posteriores.

304
00:21:37,575 --> 00:21:41,400
Todos estos pasos están en preparación para lo que va a

305
00:21:41,400 --> 00:21:45,150
vienen en los próximos ejercicios.

306
00:21:45,150 --> 00:21:51,920
Mi aplicación Angular ahora ha tomado una buena forma en términos de la forma en que se presenta la interfaz de usuario,

307
00:21:51,920 --> 00:21:58,155
para que ahora pueda comenzar a introducir muchas más características nuevas para angular.

308
00:21:58,155 --> 00:22:02,005
Pagando una visita más a mi aplicación Angular en el navegador,

309
00:22:02,005 --> 00:22:08,450
déjame ver cómo se ve esta aplicación en diferentes tamaños de pantalla.

310
00:22:08,450 --> 00:22:11,430
Por lo tanto, este es el tamaño estándar de la pantalla de escritorio,

311
00:22:11,430 --> 00:22:17,020
así que vamos a pasar a un tamaño de pantalla más pequeño y luego ver cómo se ve la aplicación.

312
00:22:17,020 --> 00:22:21,690
Por lo tanto, este es un tamaño de pantalla iPhone 6 Plus,

313
00:22:21,690 --> 00:22:28,865
para que pueda ver cómo el diseño es diferente para el tamaño de pantalla más pequeño.

314
00:22:28,865 --> 00:22:35,115
Entonces, mi encabezado está ahí arriba y mi menú en la parte inferior y el pie de página aquí,

315
00:22:35,115 --> 00:22:38,955
nota cómo las diferentes partes del pie de página se han distribuido

316
00:22:38,955 --> 00:22:43,485
de manera diferente para el tamaño de pantalla extra pequeño.

317
00:22:43,485 --> 00:22:49,950
Esta es la misma aplicación en el modo horizontal o en un iPhone 6 Plus,

318
00:22:49,950 --> 00:22:58,205
para que puedas ver que mi encabezado está dispuesto así y el menú allí y el pie de página.

319
00:22:58,205 --> 00:23:04,230
Entonces, eso te muestra que he aprovechado el diseño flexible angular

320
00:23:04,230 --> 00:23:10,510
para poder crear diferentes diseños para diferentes tamaños de pantalla.

321
00:23:10,510 --> 00:23:14,395
Así que, de nuevo, si has tomado el curso Bootstrap antes,

322
00:23:14,395 --> 00:23:19,420
comenzarás a ver cómo el diseño sensible con

323
00:23:19,420 --> 00:23:25,950
el diseño flexible angular también se puede usar para lograr resultados similares.

324
00:23:25,950 --> 00:23:29,790
Así que, con esto, completamos este ejercicio.

325
00:23:29,790 --> 00:23:35,140
En este ejercicio, hemos preparado nuestra aplicación angular y preparado

326
00:23:35,140 --> 00:23:40,645
para el resto de los ejercicios de este curso.

327
00:23:40,645 --> 00:23:47,300
Este también es un buen momento para que hagas una confirmación de git con el encabezado y pies de página del mensaje.