Ahora que tenemos una comprensión de las aplicaciones de una sola página,
continuaremos trabajando en
nuestra aplicación angular que hemos estado trabajando en los ejercicios hasta
hasta ahora y desarrollándola en
la aplicación de una sola página usando el soporte del módulo de router angular.
Ya hemos incluido múltiples componentes como parte de
nuestra aplicación angular en el ejercicio anterior y ya tenemos
configurado para que nuestra aplicación angular sea capaz de enrutar
entre dos componentes diferentes.
Ahora, integraremos más en nuestra aplicación angular y
la desarrollaremos en la aplicación angular completa junto con
la navegación entre las diversas vistas
renderizadas por los diversos componentes de nuestra aplicación.
Continuando con nuestra aplicación tal como está ahora,
tenemos la casa siendo renderizada cuando navega a nuestra aplicación
ahora mismo y luego la plantilla de Inicio se ha mostrado
entre el encabezado y el pie de página y luego cuando vas al Menú,
el menú se muestra entre el encabezado y el pie de página en la vista aquí.
Ahora, obviamente, necesitamos integrar los otros componentes que
incluimos en nuestra aplicación angular
para desarrollar esto como una aplicación angular completa.
En este ejercicio, vamos a integrar el ContactComponent,
vamos a actualizar la plantilla para el ContactComponent,
también vamos a actualizar la plantilla para el HomeComponent y dar este
un paso adelante hacia nuestra aplicación angular de una sola página.
Comencemos con el ContactComponent.
Para empezar, primero copie la plantilla para
el ContactComponent que le he dado en las instrucciones de ejercicio y luego
péguela en el archivo contactcomponent.html para que descarguemos
la vista real de nuestro ContactComponent con un poco más de detalle aquí.
Ahora, puede ver que he cortado y pegado el código para
el archivo de plantilla de las instrucciones en mi ContactComponent.
Completaremos la integración de
el ContactComponent en nuestra aplicación y luego veremos
cómo se ve el ContactComponent y luego volveremos
y rápidamente veremos este código un poco más tarde.
Ahora, para integrar el ContactComponent en nuestra aplicación angular,
necesitamos incluir una ruta al ContactComponent en nuestras rutas.
Entonces, yendo al archivo routes.ts justo después del Menú,
voy a incluir otra ruta para el ContactComponent usaré
la URL como contacto con nosotros y
el componente correspondiente es ContactComponent aquí.
Así que, con esto, ahora hemos integrado nuestro ContactComponent
en nuestra aplicación y vamos a guardar los cambios en
esto y luego también tendremos que actualizar el componente de encabezado y actualizar
el enlace en el componente de encabezado para ayudarnos a navegar hasta el ContactComponent.
Entonces, solo voy a copiar esto desde el menú un enlace en
la barra de herramientas de mi componente de encabezado allí y luego copiarlo en
el ContactComponent y luego actualizarlo como contacto con nosotros.
Guardemos los cambios en todos los archivos y
luego echemos un vistazo a la aplicación resultante.
Ir a la aplicación en nuestro navegador,
si ahora navegamos al ContactComponent,
podemos ver que los detalles del ContactComponent se muestran
aquí entre el encabezado y el pie de página como esperamos.
Así que, dentro del ContactComponent,
tenemos el título de Contacto
allí y luego alguna información de ubicación donde he mostrado la dirección.
Entonces, esto es similar a la dirección que tenemos
en el pie de página, así que no voy a explicar que en
detalle entonces tenemos otra parte aquí donde incluimos el Mapa de nuestra Ubicación.
No vamos a hacer eso en este momento,
vamos a dejarlo en blanco y luego también ves que tengo
tres botones que he incluido aquí para Llamar, Skype y Correo Electrónico.
Estos tres botones se activan en nuestra aplicación
y estoy usando el botón tapete levantado para renderizar estos tres botones.
Por lo tanto, puede ver que estos botones tienen un aspecto diferente de
los otros botones que ha incluido en su aplicación allí.
Entonces, este es un componente de botón elevado de nuestro material angular allí.
Entonces, habiendo visto el ContactComponent y
el hecho de que somos capaces de navegar hasta el ContactComponent.
Ahora, desde los otros componentes,
echemos un vistazo rápido a
el código HTML que incluimos para la plantilla de nuestro ContactComponent.
Ir a contactcomponent.html, verá que tenemos
el título de esta página incluido mediante el uso de este div
aquí y el segundo div dentro aquí con FXFlex
incluye la información de ubicación y luego esto dentro de esta información de ubicación,
estoy nuevamente definiendo otro div que me permitirá
incluir múltiples vistas en este otro div aquí.
Entonces, dentro de esto, estoy definiendo
otro div con columna de diseño de efectos y fila de capa de efectos.
Entonces, esta es una forma anidada de definir mis vistas CSS Flex aquí.
Entonces, dentro de esto nuevamente,
estoy usando una vista div Flex con FXFlex 50 por lo que
ocupa la mitad y luego FXFlex offset 20 píxeles.
Por lo tanto, esta vista CSS se desplazará a la derecha por 20 píxeles así que
tengo algún margen allí y luego tenemos
la dirección incluida aquí y luego abajo aquí,
se puede ver que dentro de otro div,
tengo una etiqueta con el botón de estera levantado asociado con él.
Esto es lo que hace que los botones elevados que tenemos
en la parte inferior de la página de Contacto allí.
Así que, tres de ellos aquí.
Uno para el número de teléfono.
Uno para el Skype y uno para el correo electrónico aquí y también tenga en cuenta que estoy haciendo uso de
los iconos de fuente impresionante para cada uno de ellos y luego el mapa
de su ubicación en otro div aquí.
Entonces, ambos encierran dentro de este div externo que está encerrado nuevamente dentro del div.
Por lo tanto, forma anidada de definir los diseños flexibles para nuestras diferentes partes aquí.
Entonces, eso es todo para el ContactComponent.
Ahora lo hemos integrado en nuestra aplicación de una sola página.
Ahora, yendo a la DishService.
Ahora, en el DishService junto con el método GetDishS,
voy a introducir dos métodos más.
Un método llamado getDish,
un plato específico y luego identificaré el plato con una identificación especificada aquí.
Entonces, el id sería
y eso especificaría me daría el plato con la id correspondiente a este número.
Así que ese será un método más que voy a agregar
y también agregar otro método llamado getFeaturedDish.
Por lo tanto, este plato destacado usará
la propiedad destacada que agregamos
y luego devolverá el plato para el que la característica está establecida en true.
Así que, esa es la forma en que puedes seleccionar un plato específico y luego hacerlo disponible.
Ahora, la razón por la que tengo esa bandera destacada es que cuando la característica se establece en true,
ese plato en particular se representará en HomeComponent.
Ahora, ¿cómo seleccionamos estos platos?
Entonces, agregemos el código para esto.
Así que, para el getDish,
necesito devolver algo de los platos constantes que ya tengo allí.
Entonces, de la constante de platos,
voy a usar la forma de JavaScript de hacer el filtrado de una matriz.
Entonces, el filtrado de una matriz me ayudará a seleccionar
solo aquellos elementos de la matriz que
coincidan con un criterio particular que se especificará
dentro del filtro aquí y luego entre ellos devolveré solo el primero.
Ahora, sucede que cuando especifico un id,
seleccionará solo un elemento, pero luego se convertirá en una matriz.
Entonces, de esa matriz, necesito extraer ese elemento en esa matriz.
Entonces, es por eso que estoy usando entre llaves cero allí.
Entonces, eso me ayudará a identificar.
Entonces, ¿cómo filtro mis platos?
Entonces, para cada plato en mi lista de platos,
así que aquí es donde voy a usar
otra característica de mecanografía llamada como funciones de flecha.
La función de flecha es una forma abreviada de escribir una función.
Entonces, si estás acostumbrado a escribir funciones,
en lugar de escribir la función elaboradamente diciendo
función y luego entre corchetes plato y así sucesivamente,
puedo simplemente escribirla en casos donde la función es muy simple,
es muy fácil escribir esto como una función de flecha aquí.
Entonces, aquí, especificaré diciendo que el id del plato es igual a la id.
Entonces, lo que estoy especificando aquí es filtrar la matriz de platos y extraer
solo aquellos elementos de la matriz para los que el id del plato.
Entonces, cada elemento aquí está siendo identificado por este plato parámetro aquí.
Entonces, para el cual el id del plato coincide con el id
que se ha suministrado como un parámetro para el plato.
Entonces, de esta manera extraerá ese plato específico de
esta matriz y luego devolverá ese plato de este método getDish.
Las funciones de flecha me ayudaron a escribir código de una manera más simple.
Si no te gustan las funciones de flecha
, puedes escribirlo de la manera más convencional diciendo,
«plato de función», y luego de esto, regresarás dish.id triple igual a id,
por lo que esto devolverá un booleano.
Cuando el filtro encuentre un verdadero dentro aquí,
esos elementos de los platos serán seleccionados en la matriz.
Por lo tanto, aquí es donde su conocimiento de JavaScript viene a su ventaja.
Por lo tanto, necesita saber cómo funciona un filtro de JavaScript
para ayudarle a entender cómo se hace esto.
De acuerdo, ahora de manera similar para el plato destacado,
voy a usar un método similar para extraer de mis platos
matriz usando un filtro aquí, pero el filtro que
voy a definir aquí sería de nuevo una función de flecha aquí.
Se acostumbrará a las funciones de flecha y luego una vez que se acostumbre a ellas,
entonces se dará cuenta de lo simples que son demasiado correctas.
Entonces, aquí la forma de seleccionarme
es la propiedad dish.featured porque este dish.feature ya es un booleano allí.
Así que, eso me ayudará a devolver el plato destacado.
Así que, para cualquiera que sea el plato,
la característica del plato es verdadera.
Ese plato en particular será filtrado de
la matriz de platos y luego habrá sólo un día.
De todos modos, debe asegurarse de que
para que configure solo destacado en true para uno de esos,
y luego uso esto porque este filtro devolverá una sub matriz de la matriz de platos,
así que necesito seleccionar ese elemento.
Habrá un solo elemento allí en el índice cero.
Entonces, estoy usando el índice cero para seleccionar ese elemento y devolver
que del método get featured dish aquí.
Entonces, eso completa la actualización del servicio de platos.
Para construir nuestra plantilla de hogar,
vamos a presentar en la vista de casa un plato seleccionado,
una promoción actual seleccionada por el restaurante,
y un líder corporativo seleccionado de la lista de lectores.
El líder corporativo que aparece en la primera página será
parte de su tarea que sigue esta lección en particular.
Pero ahora vamos a incluir,
tenemos un plato destacado y la promoción destacada en la portada.
Entonces, lo que significa que necesito un servicio de promoción que devuelva
el conjunto de promociones que se están llevando a cabo por este restaurante en particular.
Por lo tanto, permítanme añadir un servicio de promociones para mi aplicación.
Entonces, para hacer eso, en la carpeta compartida,
voy a crear un nuevo archivo llamado promotion.ts.
En la promotion.ts, crearé una promoción de clase
y devolveré esta promoción aquí.
Entonces, ¿qué contiene esta clase de promoción?
Contiene una propiedad de identificación,
luego contiene el nombre para la promoción del restaurante.
Así que, por ejemplo, la promoción podría ser como buffet de fin de semana.
O 10% de cada día a la hora del almuerzo
y cosas así pueden aparecer en la primera página de sus restaurantes allí.
Entonces, nombre entonces también incluiré una imagen,
que será del tipo de cadena de la URL de la imagen,
luego etiqueta que será una cadena.
Precio también una cadena.
Ahora, el trabajo implica,
no me ves usándolos en este momento,
vamos a ponerlos en uso en uno de los ejercicios posteriores presentados booleano.
Por lo tanto, verá la bandera destacada que aparece de nuevo en la promoción,
y luego la cadena de descripción.
Así que, ves que la promoción estructurada es más o menos
similar a la estructura del plato que hemos visto antes.
Así que, esta es la clase de promoción aquí.
Ahora, junto con la clase de promoción,
necesito crear otra clase que
exporta el conjunto de promoción decir constante con promociones aquí.
Así que aquí, voy a importar
la clase de promoción
del archivo promotion.ts,
y luego exportaría una constante llamada promoción.
Así que, ves que estoy usando una estructura muy similar a los platos aquí.
Así que, comienzas a ver que,
esa estructura que usamos anteriormente para
las promociones para los platos también es útil para declarar promociones.
Si tiene una estructura diferente,
verá que con los líderes la estructura será un poco
diferente para el objeto JavaScript aquí. Las promociones.
Ahora, los detalles de una promoción específica que he dado en las instrucciones,
así que te sugiero que lo copie y pegue de
allí en lugar de que yo escriba todo aquí.
Entonces, déjame seguir adelante y copiar y pegar
ese objeto JavaScript en esta matriz de objetos JavaScript aquí,
así que ahí lo tienes.
La promoción tiene un solo objeto en este momento.
En el futuro, podemos añadir más.
En este punto, solo tengo uno, así que lo agregué allí,
y voy a usar eso y esa es la promoción destacada para mi restaurante allí.
Esto es sólo promoción,
así que déjame actualizar esas promociones,
eso es lo que necesito.
Entonces, solo voy a guardar los cambios en el archivo promotion.ts.
A continuación, crearé otro servicio llamado servicio de promoción.
Así que para hacer eso, vamos a la línea de comando en el símbolo del sistema tipo
ng generar encuestas servicios/promoción.
Por lo tanto, el servicio de promoción que se está creando allí.
Por lo tanto, ahora el servicio de promoción está en su lugar.
Por lo tanto, vamos a añadir las características para PromotionService.
Así que, yendo a PromotionService,
verá que el PromotionService ahora está incluido en su carpeta de servicios aquí,
por lo que necesitamos preparar un PromotionService.
Así que, en el PromotionService,
voy a importar
promoción de compartido/promoción,
la promoción de la clase, y también importar
promociones de compartido/promoción de la clase allí.
Las promociones constantes desde allí.
Ahora, al igual que tuvimos para el servicio de platos,
necesitamos crear tres métodos dentro de PromotionsService.
Así que, lo que voy a hacer es ahorrarme el problema,
voy a entrar en el plato.service,
y luego simplemente copiar estos tres,
y luego pegarlo en mi servicio de promoción,
luego simplemente editar el código.
De acuerdo, así que desde el servicio de promoción,
necesito volver getPromotions y
este es del tipo de promoción y luego esto devolverá PROMOCIONES,
y luego obtener el segundo sería promoción
que de nuevo recibe el id de la promoción,
así que voy a volver
PROMOCIONES.filter promo.id es id.
Luego GetFeatured promoción.
Por lo tanto, se puede ver que la estructura del Promotionservice es muy similar a
el dishservice y esto no sería el tipo de promoción,
y esto devolverá
promotions.Filter promo y esto será promo.featured y eso es todo.
Mi PromotionService está listo.
Ahora, voy a entrar en el componente de hogar, y prepararlo,
para que en mi componente de hogar,
voy a mostrar un plato destacado y una promoción destacada.
El característica/plato y característica/promoción se mostrará en
el componente de inicio utilizando el componente de tarjeta de material angular.
Por lo tanto, primero necesitamos obtener los datos en nuestro componente de inicio,
, así que eso es lo que haremos en el archivo de script de tipo de componentes domésticos allí.
Entonces, yendo al archivo de script de tipo componentes domésticos, home component.ts.
Aquí, necesito importar el plato
de compartido/plato y también el
correspondiente dish.service de services/dish.service.
Vale, ahora voy a hacer lo mismo para promociones,
así que voy a copiar eso y pegarlo aquí,
y luego editar este,
así que esto sería promoción,
esto sería promotionService,
y luego promoción, y entonces esto sería promotionService.
Así que, con esto, tenemos tanto el plato y
servicio de plato y promoción disponible para nosotros,
dentro de nuestro componente doméstico.
Viniendo ahora al constructor.
Vamos ahora inyectar los dos servicios aquí,
y ponerlos a disposición para nuestras aplicaciones o servicio de platos,
y el servicio de promoción inyectado aquí.
Así pues, con esto, tenemos acceso a ambos servicios.
Así que ahora dentro del método ngOnInit,
voy a buscar los dos platos destacados.
Así que, yo diría esto.dishService.getFeaturedDish
y también promoción,
promotionService y getFeaturedPromotion.
Sólo para estar completo,
déjame declarar el plato aquí como de
tipo Plato y la promoción como de tipo Promoción aquí.
Entonces, eso debería aclarar todos los valores que estamos usando dentro aquí.
Así que, con esto, completamos la actualización de nuestro archivo mecanografiado de componentes domésticos.
Pasemos ahora al archivo de plantilla,
y luego añadamos las dos tarjetas para mostrar el plato destacado y la promoción destacada.
Ahora, para esto, te he dado el código en las instrucciones.
Entonces, solo voy a copiar ese código y pegarlo aquí.
Ya sabes cómo crear tarjetas,
para que puedas seguir fácilmente el código que pego aquí.
Por lo tanto, la plantilla de componentes de inicio también se actualiza,
para que pueda ver que tiene dos tarjetas aquí.
Para uno, mostrando el plato y el otro mostrando la promoción aquí,
y encerrado dentro de un div FXLayout aquí.
Así que, guardemos los cambios y luego echemos un vistazo rápido a nuestra aplicación.
Después de crear el servicio de promoción,
también necesitamos incluir el servicio de promoción en AppModule,
y hacerlo disponible para nuestra aplicación.
Así que voy a entrar aquí,
y luego importar
el servicio de promoción aquí.
Luego, declaró el servicio de promoción
como uno de los proveedores
en mi archivo AppModule.ts aquí.
Entonces, en el archivo AppModule,
estoy requiriendo ambos,
y luego guardando cambios.
Ir al navegador,
ahora puedes ver que en el navegador,
el componente de inicio ahora muestra las dos tarjetas,
una para el plato destacado y otra para la promoción destacada aquí.
Por lo tanto, se puede ver que los dos coches se muestran aquí.
Ahora puedo navegar a la página de Menú,
y luego también a la página de Contacto.
La página Acerca de todavía no está ahí,
vas a rellenar la página Acerca como parte de tu segunda tarea.
Echando un vistazo a la misma aplicación en un tamaño de pantalla más pequeño,
así que esta es una pantalla iPhone 6 Plus.
Veamos el componente de inicio y una pantalla iPhone 6 Plus.
Puedes ver ese plato destacado y la promoción destacada en la página de inicio allí.
Entonces, el menú que hemos visto anteriormente,
y también la página de Contacto que se muestra aquí.
Por lo tanto, se puede ver que ahora nuestra aplicación de una sola página está mucho más configurada.
Excepto por el Acerca de,
que haremos en la segunda asignación.
Un cambio menor más que puede hacer en su archivo HTML de componentes de encabezado,
es que junto con la directiva de enlace del router,
la ruta angular son también soporta una directiva más llamada RouteLinkActive.
Esto nos permite aplicar algunas clases al elemento particular aquí.
Entonces, en este caso,
si este enlace se activa que lo que especifique aquí,
se aplicará como clase a este elemento en particular allí.
Entonces, voy a especificar una clase llamada activa.
Así que aquí, estoy especificando RouterLinkActive con activo.
Entonces, si defino una clase CSS llamada activa,
entonces la clase se aplicará a este enlace,
siempre que esta vista en particular se muestre en la página de aplicaciones aquí.
Voy a copiar lo mismo y aplicarlo a todos los botones restantes,
donde ya he definido el enlace del router.
Por lo tanto, voy a aplicar la clase RouterLinkActive,
al Inicio, el Menú y el Contacto.
Ahora, esto también significa que debería definir una clase CSS activa.
Entonces, para hacer eso, voy a entrar en el archivo SESS de componentes de encabezado,
y luego definir una clase activa aquí,
, así que definiré la clase activa allí.
Para definir la clase activa,
voy a añadir una variable de color más aquí llamada background-moredark.
Entonces, el color correspondiente es 4527A0,
esta es una versión más oscura de este color oscuro de fondo, 4527A0.
Entonces, para mi activo,
lo que voy a hacer es, desde la clase activa,
voy a dejar que la clase defina un fondo,
establecer el fondo de
ese elemento al fondo-moredark color.
Entonces, cuando esa vista en particular es seleccionada y mostrada en la página,
entonces esta clase activa se aplicará a
esa etiqueta A
en particular por la directiva activa de enlace del router que hemos aplicado aquí.
Ahora, ¿qué cambio causa esto en nuestra página web?
Ahora, yendo a nuestra página web,
veremos lo que esto introduce en nuestra página web.
Ir a nuestra aplicación,
ahora ves que cuando estamos en
la vista de inicio en el componente de inicio se muestra aquí, su vista correspondiente.
Entonces, el botón Inicio aquí tiene un color de fondo diferente que se aplica
porque la clase activa se ha agregado porque
definimos el routerLinkActive para activo aquí.
Entonces, esa clase se aplica.
Del mismo modo, al seleccionar el menú,
verá que el menú está resaltado en el encabezado,
y la vista de menús se muestra aquí,
y de manera similar para el contenido.
Ahora, esto nos permite ver de un vistazo en qué pagar vista particular VR,
en nuestra aplicación de una sola página.
Por lo tanto, esta es una pequeña mejora adicional de la oferta de bit a la interfaz de usuario,
que nos permite ver algunas características interesantes.
Aunque, no agrega mucho a la funcionalidad de la aplicación,
, solo agrega alguna pequeña característica que será una adición útil a tu aplicación.
Así que, con esto, completamos este ejercicio.
En este ejercicio, hemos trabajado para integrar
el componente de contacto en nuestra aplicación de una sola página.
También diseñamos un par de tarjetas que incluimos en el componente de hogar,
y agregamos algunas nuevas características a nuestra aplicación.
Este es un buen momento para que guarde los cambios en su repositorio de Git con el mensaje
Aplicación de una sola página Parte 1.