Angular esencial

Preparación para usar servicios en Angular

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
En esta lección vamos a preparar una aplicación para interactuar con los servicios de Angular, vamos a crear elementos que van a desplegarse según los datos que se encuentran en un servicio y a conectar la información de dos diferentes componentes.
06:26

Transcripción

En esta lección, voy a preparar una aplicación para poder utilizar la información que se almacena dentro de un servicio de Angular. Acá yo estoy importando, efectivamente, un servicio creado previamente a través de la línea de comandos, en este caso'librosseleccionados. service'–estoy dentro del módulo principal de la aplicación– y también lo he incluido dentro del "array" de'providers' para que se encuentre disponible en mi aplicación. Ahora, yo quiero hacer, en este caso tengo una aplicación que tiene una lista de libros, yo voy a hacer que los libros que aparezcan seleccionados, cada vez que yo haga clic sobre algún libro, me aparezca dentro de una lista. Yo voy a implementar los elementos necesarios para desplegar esta lista. Así que voy a ir al código de mi aplicación y voy a comenzar buscando la plantilla relacionada con el encabezado de mi aplicación. Quiero que notes que dentro de mi aplicación yo tengo varios componentes y, específicamente, la lista de libros se encuentra en un componente llamado'lista-de-libros', pero el encabezado se encuentra dentro de otro componente, en este caso llamado'encabezado'. Voy a ir a este componente y voy a comenzar a modificarlo para agregar algunos elementos adicionales. Primero, voy a buscar una clase, en este caso que se llama'jumbotron', y voy a agregar acá un botón. Este botón, básicamente, me va a servir para desplegar la lista completa de libros que he seleccionado. Vamos a poner acá'libros'. Es que el usuario ha hecho clic, vamos a ver como se está mostrando y vemos que acá tengo este botón. Yo ya tengo algunos estilos previamente diseñados. Así que vamos a ir acá, a la sección de'encabezados. component. css' y yo voy a agregar los estilos que ya tengo listos para trabajar mi aplicación. Una vez que ya los tenga preparados –y los puedes encontrar dentro del repositorio de este curso, para que puedas ver los detalles específicos de los estilos que he hecho–, básicamente lo que voy a hacer es que voy a incluir algunas clases adicionales dentro de este componente. Específicamente, dentro de este botón yo voy a agregar una clase que me va a mostrar un ícono de libros y voy a eliminar este texto de libros. Vamos a ver el resultado y vemos que ahora el botón que acabo de agregar me aparece con un ícono y me aparece en la parte superior derecha del encabezado. Ahora, yo voy a hacer que al hacer clic acá me muestre un texto, específicamente una lista con mis libros. También voy a hacer uso de algunos componentes que ya tengo previamente diseñados. En este caso, voy a comenzar incluyendo un'div' que va a tener una clase que ya tengo lista dentro de mi código, que se va a llamar'mis Libros'. Y dentro de este'div' voy a incluir por ahora un texto estático que va a ser un'h2' y una lista donde me muestra los libros que he seleccionado. Por ahora, estos libros también están en un formato estático. Revisemos mi aplicación y vemos que según los estilos que ya tengo previamente definidos, todos estos elementos se están mostrando en la parte superior derecha de la aplicación, y todavía el botón no se está relacionando con este componente. Vamos a incluir también un evento 'click'. Y en este caso, el evento'click' se incluye dentro de Angular a través de la sintaxis de paréntesis y definimos el nombre del evento, en este caso'click'. Y cuando el usuario presione este botón, nosotros vamos a activar un código. En este punto, nosotros podemos llamar un método específico de Angular. Pero para mantener el ejemplo simple, lo que voy a hacer es que voy a utilizar una variable local que se va a llamar en este caso 'mostrarLista' y voy a igualar este valor de'mostrarLista'a lo opuesto de'mostrarLista'. ¿Qué significa esto que acabo de poner? Básicamente, 'mostrarLista'–cuando se carga mi aplicación, ya que no la he definido en ninguna otra parte– va a dar un valor de'false'. Al hacer clic vamos a convertir ese valor'false'en el opuesto, o sea, 'true'. Pero si el usuario vuelve a hacer clic, lo que vamos a hacer es que 'mostrarLista', que ahora es'true', va a ser su opuesto, que va a ser'false'. O sea, básicamente, estoy haciendo un "switch" donde cada vez que el usuario haga clic en este botón 'mostrarLista', va a tener un valor de'true' o de'false'. Ahora, ¿cómo voy a utilizar esto? Lo que voy a aprovechar es también la propiedad'ngIf'. Y voy a venir acá a esta clase'libros' y voy a agregarle la directiva 'ngIf'; y'ngIf'lo que me permite a mí es ocultar o mostrar un elemento dependiendo del valor que se encuentre evaluando. En este caso, 'ngIf' va a evaluar 'mostrarLista'. Así que 'mostrarLista', como por defecto va a tener un valor de'false', esta sección va a estar oculta. Cuando el usuario presione el botón, vamos a tener el valor opuesto, que va a ser'true'. Y esto significa que se va a mostrar el componente. Si vuelvo a hacer clic, se va a ocultar el componente. Guardamos y vamos a ver cómo se ve el resultado final. Y tenemos oculto la lista, porque en este caso'mostrarLista'se encuentra con un valor de'false', que es el valor por defecto. Vamos a hacer clic y vamos a asignar valor de'true' y esto me muestra mi lista. Presiono y la oculta. Ahora ya tenemos una opción en este punto estática para mostrar los libros que el usuario ha seleccionado dentro de esta aplicación.

Angular esencial

Aprende a crear aplicaciones con Angular y avanza poco a poco en su uso, empezando por la instalación, configuración y arquitectura hasta la publicación final de una aplicación.

4:27 horas (35 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:29/06/2017

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.