Antes de seguir adelante con el resto de los ejercicios y las tareas en este curso,
pensé que este sería un buen momento para mí
darle a mi aplicación angular una buena estructura.
Entonces, aquí es donde voy a agregar el encabezado y el pie de página
para mi aplicación angular para que la forma
se renderiza la interfaz de usuario sea mucho más atractiva de lo que ha sido hasta ahora.
Por lo tanto, vamos a ver cómo podemos construir múltiples componentes para
ocupar diferentes partes de la pantalla dentro de nuestra aplicación angular.
Así que, aquí, verán que mi aplicación angular ahora va a consistir en un encabezado,
que es un componente separado, el pie de página,
que es otro componente,
y luego entre los dos,
tendré la parte de mi aplicación angular que va a
ser controlada más adelante por usando el enrutador angular.
Así que, verás, estoy preparando el escenario para lo que va a venir más adelante en este curso.
Así que, en el camino,
también haremos uso de Font Awesome Icons dentro de nuestra aplicación angular.
Me encanta Font Awesome Icons,
, así que pensé que este sería un buen lugar para
introducir estos iconos en mi aplicación angular.
Para continuar, vamos a instalar la fuente impresionante en nuestra aplicación angular.
Entonces, para hacer eso, usaré NPM para ir,
y buscar font-awesome para mí,
para que NPM instale font-awesome 4.7.0 y guarde.
Entonces, deje que font-awesome sea instalado.
Así que, una vez que font-awesome entra en nuestra aplicación angular,
y luego se convierte en parte de los módulos de nodo
que se incluyen dentro de nuestra aplicación angular,
el siguiente paso es ponerla a disposición para nuestra aplicación angular.
Necesitamos integrar font-awesome en nuestra aplicación angular.
Entonces, para hacer eso,
vaya a la carpeta fuente,
y luego cree un archivo llamado _Variables.scss en la carpeta fuente.
En el archivo Variables.scss,
agregue $fa-font-path: y
luego entre comillas, ponga../node_modules/font-awesome/fonts.
Por lo tanto, estamos especificando la ruta de fuente para nuestros archivos impresionantes de fuentes aquí.
A continuación, abra el archivo Styles.scss,
y luego en el archivo Styles.scss,
vamos a añadir un par de líneas allí.
Primero, importaremos las variables que acabamos de declarar diciendo @import,
y dentro de comillas,
luego importaremos los archivos font-awesome allí,
luego diremos
@import../node_modules/font-awesome/scss/font-awesome. Estamos importando la versión
SCSS porque estamos usando SCSS en nuestra aplicación angular.
Una vez que hayamos modificado los estilos para el archivo CSS,
vamos a guardar los cambios.
En este punto, es posible que necesitemos reiniciar
nuestro servidor que estaba sirviendo nuestra aplicación angular.
Así que, donde escribió NG serve,
es posible que desee detener el servidor que está sirviendo su aplicación angular y
reiniciarlo para que incluya estos nuevos cambios que se hicieron.
Así que, yendo a mi terminal,
voy a detener mi servidor,
y luego reiniciar el servidor para que tenga en cuenta el cambio que he hecho.
Usted vería el estado actual de
nuestra aplicación angular mirándola en el navegador.
Entonces, esto es lo que tenemos en nuestra aplicación angular.
Quiero poder agregar un encabezado y un pie de página a
esta vista para poder usar tanto el encabezado como el pie de página,
y luego el contenido real entre el encabezado
y el pie de página en la forma en que construyo mi aplicación angular.
Así que, para hacer eso,
voy a crear dos nuevos componentes llamados encabezado y pie de página,
y permitirles administrar su parte de la pantalla que se les asigna.
Al ir al símbolo del sistema, permítanme generar un nuevo componente de encabezado.
Incluso puedo decir ng g,
que es suficiente para angular CLI para
reconocer que quiere generar un componente.
Entonces, digo ng g encabezado de componente,
y también ng g pie de página de componente.
Así que, ahora, tengo dos componentes que están disponibles para mí
para hacer uso dentro de mi aplicación angular.
¿Cómo voy a hacer uso de estos dos componentes?
Vayamos al archivo component.html de App,
y luego hagamos uso de estos dos componentes en la forma en que
componemos toda la pantalla para nuestra aplicación angular.
Volviendo a nuestra aplicación,
vemos que el archivo module.ts de la aplicación
ya incluye el encabezado y el componente de pie de página
y ya se han incluido en las declaraciones aquí.
Así que esta es la ventaja de usar la CLI angular,
se encarga de todo este trabajo preliminar para
usted para que pueda concentrarse en simplemente construir su aplicación angular.
Entonces, esa es la razón por la que me encanta la CLI angular
como un enfoque para construir mi aplicación angular.
Así que ahora, vamos al archivo HTML de componentes de la aplicación.
Así que, aquí, verá que hemos incluido el menú de la aplicación allí abajo.
Voy a eliminar esta barra de herramientas del archivo HTML de componentes de mi aplicación.
Esa barra de herramientas se convertirá en parte de la plantilla de encabezado para mi componente de encabezado.
Entonces, en su lugar, mi archivo
de plantilla de componentes de la aplicación solo contendrá el encabezado y el pie de página en la parte inferior.
Así que, ven que ahora,
tenemos las opiniones de los tres componentes.
El encabezado, el menú,
y el pie de página ocupando toda la pantalla.
Por lo tanto, estos tres componentes obtienen esa parte de la pantalla por sí mismos.
Guardemos los cambios y echemos un vistazo rápido a nuestra aplicación en el navegador.
Ir a la aplicación en el navegador,
ahora ves que el encabezado ya ha ocupado es
parte de la pantalla allí arriba, y obviamente,
ya que acabamos de preparar el componente,
sólo dice que el encabezado funciona,
y luego abajo aquí,
el pie de página también ha tomado su lugar en la página de pantalla.
Ahora, vamos a seguir adelante y actualizar las plantillas tanto para el encabezado como para el pie de página
para que podamos definir bien nuestra interfaz de usuario para nuestra aplicación angular.
Comencemos el trabajo en nuestro pie de página.
Así que, para empezar con el pie de página,
vamos al archivo de plantilla del pie de página,
y luego vamos a reemplazar esto con la plantilla recién diseñada del pie de página.
Ahora, para su conveniencia,
He proporcionado el código para usted en las instrucciones.
Será prudente copiar todo el código desde allí,
y luego pegarlo aquí.
Luego, examine lo que hace este pie de página.
Así que aquí, ves que he pegado en el código para mi plantilla de pie de página.
Ahora, voy a volver a este código un poco más tarde.
Si has hecho el curso anterior en Bootstrap,
verías que esta es la forma material angular de implementar
el mismo tipo de estructura para el pie de página que hemos hecho en el curso Bootstrap.
Algunas de estas cosas serán reconocibles para usted ya,
pero permítanme completar la actualización a la plantilla de pie de página,
y luego también agregaremos algunos códigos SCSS en mi archivo component.scss pie de página,
y luego echar un vistazo a cómo el pie de página ahora da forma.
Así que aquí, he pegado de nuevo en el código
de las instrucciones de ejercicio que siguen a este video,
para mostrar las diferentes clases de SCSS que he agregado a mi pie de página.
Entonces, tengo algunas clases que he definido aquí,
voy a hacer uso de ellas para definir una parte de mi pie de página,
y luego similar clase de pie de página aquí,
y tengo una mezcla SCSS aquí,
y algunas variables aquí que
definen varios colores que voy a usar en mi angular aplicación.
Así que, guardemos los cambios que hemos hecho.
Echemos un vistazo al pie de página en su encarnación actual,
y luego volveremos y haremos una visita rápida al código que he incluido tanto
en el archivo de plantilla de componentes del pie de página como en el código SCSS aquí.
Ir a nuestra aplicación angular en el navegador, wallah,
allí tienes el nuevo pie de página para nuestra aplicación angular.
Así que, se puede ver que tengo algunas cosas aquí.
Estos en el borde izquierdo son los varios enlaces
a varias páginas que van a formar parte de mi aplicación Angular.
Vamos a ver cómo lo hacemos como parte de los próximos ejercicios.
Ahora, aquí estoy haciendo uso del componente de botón que
es parte del material angular para definir estos enlaces aquí,
entonces tengo la dirección aquí,
y luego también uso de nuevo botones para definir esta secuencia
de botones para los diversos enlaces de redes sociales para mi restaurante aquí.
Por lo tanto, se puede ver que tengo todos estos.
Para crear estos, utilizo
el soporte de material angular para pequeños botones de acción flotante aquí,
y eso da una buena estructura para esto.
Si has visto la versión de Bootstrap de esto,
me gusta mucho más que la versión de Bootstrap que creé en el curso anterior.
Por lo tanto, nuestro pie de página está ahora bien en su lugar.
Echemos un vistazo rápidamente a parte del código en el pie de página.
Ahora, no voy a explicar eso con mucho detalle porque eso es
tratar más con el material Angular que Angular mismo,
pero en el camino con solo mirar la estructura del código,
comenzarás a ver cómo
estos componentes de Material Angular se pueden usar para definir algo como esto.
Al ir al componente de pie de página,
ves que tengo un div externo aquí para el cual he especificado un diseño angular,
atributos de diseño flex aquí,
así que digo que la fila FXLayout,
y luego FxLayout sm y xs para ser columna.
Entonces, para tamaños de pantalla pequeños y extra pequeños es
va a posicionar todo el contenido como columnas,
pero para los tamaños de pantalla más grandes,
los va a posicionar como fila.
Entonces, esto es lo que me da la buena estructura para mi pie de página.
Como ves en el div de la interfaz de usuario,
estoy posicionando todo el centro de contenido aquí,
y abajo aquí,
defino el primero.
Entonces, este giro matemático aquí que estoy usando define mis enlaces aquí.
Entonces, en esto estoy usando mat como componente de material angular,
y dentro de allí estoy usando el atributo a con
el componente de botón mat asignado a un para crear estos botones aquí.
Más tarde, voy a volver y añadir
el código real para estos enlaces en los ejercicios posteriores aquí.
Esto es lo que me ayuda a crear la lista de enlaces en el lado izquierdo.
Esta es la dirección que ves,
esto es bastante sencillo de mirar.
Entonces, este es un div para el que estoy usando FXFlex con 50,
y el otro con FXFlex con 40.
Entonces, 40 significa 40 por ciento y 50 significa 50 por ciento,
y aquí estoy usando FxFlex offset 20 píxeles.
Por lo tanto, mueve este contenido a la derecha en 20 píxeles.
Entonces, tengo un espacio de 20 píxeles en el lado izquierdo para
este div particular que contiene estos enlaces aquí.
Entonces finalmente abajo aquí,
tengo este conjunto de enlaces que estoy haciendo uso para
crear la barra con todos los enlaces de redes sociales allí.
Entonces, estoy usando un con el botón de icono de la estera aquí.
Entonces, eso es lo que crea los botones redondeados que ves en el pie de página allí.
Ahora, para cada uno de estos,
estoy aplicando la clase correspondiente aquí.
Por lo tanto, puede notar que el botón Google Plus, botón Facebook,
todas estas clases están definidas en mi archivo SCSS allí,
donde he especificado los colores para el fondo y así sucesivamente para esto,
para que coincida con el esquema de color típico que utilizan estos sitios de redes sociales.
Por lo tanto, pase un poco de tiempo mirando este código aquí,
y luego rápidamente obtendrá una idea de cómo se ha diseñado el pie de página.
Del mismo modo, yendo al pie de página de componentes código Sass aquí,
para que pueda ver que he definido varios colores aquí.
Estoy usando una mezcla con el margen configurado aquí,
y luego para mi pie de página,
defino el color de fondo apropiadamente,
y note las diversas clases que estoy definiendo aquí
un botón de Facebook para el cual el color y
el color de fondo que he definido para cada uno de ellos.
Entonces, que el color correspondiente de
ese sitio de redes sociales se está utilizando como color de fondo para cada uno de estos.
Ahora, en el curso de Bootstrap anterior,
había usado el Bootstrap Social para lograr lo mismo.
Eso no funciona muy bien con el material Angular,
, así que es por eso que acabo de crear mi propio conjunto de gafas Sass aquí,
y luego agregar el código que necesito para crear esos botones allí.
Si necesita agregar más botones,
entonces simplemente cree más clases como estas corresponde a
los botones que desea agregar a su aplicación.
Entonces, eso construye nuestro pie de página.
Ahora, el encabezado es la siguiente parte a la que vamos a apuntar.
Al ir al encabezado, se abrirá el encabezado
archivo de plantilla de componentes y verá lo que contiene.
Vamos a reemplazar esto con
la plantilla que te he dado en las instrucciones que siguen aquí.
Así que, solo adelante y corta y pega ese código aquí,
porque esto no tiene nada que ver específicamente con angular.
Entonces, es por eso que solo te estoy permitiendo cortar y pegar el código directamente desde allí,
ahorra algo de tiempo para nosotros.
Puede ver que ahora he reemplazado la plantilla de encabezados con algún código aquí.
Del mismo modo, mientras estamos en ello,
también agregaremos algún código SCSS para mi archivo header.components.scss aquí,
simplemente vaya y copie el código de las instrucciones.
Del mismo modo, mientras estamos en ello,
añadiremos algunas clases SCSS más a mi archivo Styles.scss principal.
Entonces, en este archivo principal Styles.scss,
agregaré subcolores y un par de clases más en esto.
Entonces, pegaremos el código de las instrucciones que te he dado.
Entonces, la actualización del archivo Styles.scss ahora está completa,
así que he agregado algunos colores aquí y mezclarlo allí,
y luego en la parte inferior he agregado algunas clases más aquí que
me ayudan cuando estoy diseñando mis plantillas para mi aplicación angular.
Entonces, todos estos cambios,
vamos a guardar los cambios,
echar un vistazo rápido a cómo se ve mi encabezado ahora en la aplicación,
y luego volveremos y volveremos rápidamente a visitar el código que acabamos de incluir aquí.
Volviendo a mi aplicación Angular en el navegador,
ahora ves que la barra de herramientas vuelve a aparecer en el encabezado aquí,
junto con algunos enlaces en
allí y luego una imagen que representa el logotipo de mi restaurante,
y luego aquí, tienes algo que usamos el archivo jumbotron en el anterior Por supuesto.
Voy a usar una clase llamada jumbotron para crear este
en la aplicación Angular también,
así que aquí en el lado izquierdo tengo la información de mi restaurante y
el logotipo del restaurante y me dejé un poco de espacio aquí para agregar algo en el futuro.
Entonces, aquí ves que mi aplicación ahora toma forma con un encabezado,
con algunos enlaces allí.
Ahora, vamos a hacer uso de estos enlaces en
los próximos ejercicios para configurar mi aplicación angular,
y luego el menú sentado en medio y luego abajo aquí mi pie de página.
Ir a mi archivo de plantilla de componentes de encabezado,
ahora puede ver cómo he creado la barra de herramientas con los botones adicionales aquí.
Entonces, recuerda que ya teníamos la barra de herramientas
en uso en el archivo de plantilla de componentes de la aplicación,
Lo he cortado desde allí y en su lugar uso la barra de herramientas en la plantilla de encabezados aquí.
Ahora, dentro de esta barra de herramientas,
he incluido algunos enlaces con la clase de botón aplicada a ella y esto es lo que
me permite crear esos enlaces en la barra de herramientas como menú para mi aplicación web.
Debajo de allí, he creado un div con el contenedor de clase y jumbotron.
Esa es la razón por la que agregué las clases contenedor y jumbotron en mi archivo SCSS,
para que pueda usarlas dentro de mis plantillas aquí.
Entonces, para lo cual nuevamente,
aplico y algunos atributos de diseño flex aquí para ayudarme a diseñar la pantalla allí.
Entonces puede ver cómo he usado un par de divs aquí con
el atributo fxFlex aplicado en consecuencia para crear la interfaz de usuario,
para mi aplicación aquí.
Por lo tanto, pase un poco de tiempo aquí para echar un vistazo rápido a este código aquí para
entender rápidamente cómo se ha creado mi diseño para mi plantilla de encabezado.
No es tan complicado,
una vez que hayas completado el curso de Bootstrap,
esto no es tan difícil de entender.
En el camino, también estás aprendiendo el diseño flexible angular y luego
también los componentes angulares del material aquí.
Al ir al archivo SCSS para el componente de encabezado,
se puede ver que he agregado en algunos colores aquí y luego una mezcla
y luego también se agregó en una clase jumbotron aquí.
Ahora, la clase contenedor no está aquí,
la clase contenedor está en el archivo de estilos principal.
Porque la clase contenedor es algo que voy a usar
para muchas de las plantillas allí.
Entonces, por eso, agregué en la clase contenedor al archivo Styles.scss
, que es el archivo común para toda mi aplicación angular.
Así que, allí he añadido en algunos colores adicionales aquí,
y también he creado una mezcla aquí,
y luego añadido en el contenedor,
el fondo primario, y los colores de acento de fondo,
y luego también estoy usando otra clase llamada flexiones espaciador,
que voy a hacer uso de en uno de los ejercicios posteriores.
Todos estos pasos están en preparación para lo que va a
vienen en los próximos ejercicios.
Mi aplicación Angular ahora ha tomado una buena forma en términos de la forma en que se presenta la interfaz de usuario,
para que ahora pueda comenzar a introducir muchas más características nuevas para angular.
Pagando una visita más a mi aplicación Angular en el navegador,
déjame ver cómo se ve esta aplicación en diferentes tamaños de pantalla.
Por lo tanto, este es el tamaño estándar de la pantalla de escritorio,
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.
Por lo tanto, este es un tamaño de pantalla iPhone 6 Plus,
para que pueda ver cómo el diseño es diferente para el tamaño de pantalla más pequeño.
Entonces, mi encabezado está ahí arriba y mi menú en la parte inferior y el pie de página aquí,
nota cómo las diferentes partes del pie de página se han distribuido
de manera diferente para el tamaño de pantalla extra pequeño.
Esta es la misma aplicación en el modo horizontal o en un iPhone 6 Plus,
para que puedas ver que mi encabezado está dispuesto así y el menú allí y el pie de página.
Entonces, eso te muestra que he aprovechado el diseño flexible angular
para poder crear diferentes diseños para diferentes tamaños de pantalla.
Así que, de nuevo, si has tomado el curso Bootstrap antes,
comenzarás a ver cómo el diseño sensible con
el diseño flexible angular también se puede usar para lograr resultados similares.
Así que, con esto, completamos este ejercicio.
En este ejercicio, hemos preparado nuestra aplicación angular y preparado
para el resto de los ejercicios de este curso.
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.