Vamos a actualizar nuestra Política de privacidad próximamente. Te recomendamos consultar el avance.

Angular esencial

Desplegar diálogos de precarga

¡Prueba gratis durante 10 días

nuestros 1290 cursos !

Prueba gratis Mostrar modalidades de suscripción
Al conectar una aplicación con archivos externos, estamos expuestos a todos los posibles errores que pueda tener la red en la que se conecta el usuario. Posiblemente el problema más común es una conexión lenta a internet. En esta lección vamos a preparar nuestra aplicación para que despliegue información de carga.
07:56

Transcripción

Te voy a mostrar ahora cómo generar las precargas dentro de una aplicación Angular. En este caso, yo estoy trabajando con una aplicación que muestra los contenidos de esta lista a partir de información que se encuentra dentro de un archivo externo, en este caso en formato JSON. Lo que vamos a hacer es que vamos a desplegar información que nos diga que aún no se ha cargado el archivo externo. Vamos a modificar algunos elementos de esta aplicación. En este caso, yo estoy trabajando en un componente llamado'lista-de-libros. component' que está cargando un archivo externo llamado 'lista-de-libros. json'. Cuando este archivo se carga, la información se envía a la aplicación y despliega la lista. En caso de que no se cargue correctamente, también me va a mostrar un mensaje de error. Vamos a ir a la plantilla de este componente, en este caso'lista-de-libros . component. html'. Acá, lo que estoy utilizando es una lista donde se muestra la información que llega desde el archivo externo, y también un'div' donde muestra la información, en caso de que, por alguna razón, yo no pueda desplegar los datos que me llegan desde ese archivo externo. Ahora, lo que voy a hacer primero para desplegar este diálogo de precarga es que voy a comenzar incluyendo acá un'div', donde voy a mostrar la información de precarga. En este caso, yo voy a utilizar unas clases que ya tengo previamente definidas dentro de mi aplicación, y quiero que notes que voy a incluir acá un'div'dentro de otro'div', o sea, tengo un'div' al cual no le he asignado ninguna clase y tengo otro'div' al cual estoy asignando una clase, en este caso que tengo previamente definida, que va a desplegar un pequeño reloj de arena para saber que está cargando la información. También voy a poner un texto que diga que estamos cargando datos. Veamos el resultado de la aplicación y, por ahora, vemos que acá está la clase que yo acabo de generar, que ya había yo incluido este pequeño ícono, y también estoy desplegando la información que dice que está cargando. Obviamente, por ahora no tengo ninguna lógica en mi aplicación y, pues, me está mostrando la información y al mismo tiempo el diálogo de carga. Vamos a modificar el flujo de los datos para que pueda mostrar la información de carga únicamente cuando estamos en el proceso de carga y que la oculte cuando tengamos la información lista para desplegar. Vamos, entonces, a ir al componente. Comenzamos creando un valor booleano. Este valor nos va a decir si está lista o no la carga. Así que vamos a crear una variable llamada 'cargando' que, básicamente, nos va a decir si estamos en este proceso de carga de archivos externos. Esto va a ser de tipo 'boolean'o booleano, así que va a almacenar solamente un valor de cierto o falso. Una vez que ya hemos creado este elemento, vamos a ir a definirlo dentro de el'ngOnInit' y, antes de realizar el proceso de carga, vamos a definir que'this'punto'cargando' tiene un valor de'true'. O sea, cuando se carga este componente, nosotros entramos en modo de carga y llamamos el proceso que va a ejecutar esta carga. Vamos a guardar. Ahora, si revisamos nuestra aplicación, todavía no tiene ninguna modificación. Vamos a hacer, entonces, que este proceso de carga se muestre únicamente cuando estamos con esta variable en modalidad'true'. Así que volvemos a nuestra aplicación y vamos a tomar la variable'cargando', vamos a venir a la plantilla y vamos a utilizar la directiva 'ngIf'. Y vamos a decir que esta sección que dice'cargando'se muestre únicamente si la variable'cargando'está activa. Por ahora, se va a estar mostrando, porque siempre que entre nuestro componente, estamos diciéndole que'cargando' es igual a'true'y esto va a mostrar este diálogo de carga. Por ejemplo, voy a comentar esto y ahora vamos a deshabilitar esa parte, y vamos a ver que ya no se muestra el diálogo de carga, mientras que si lo descomento y lo vuelvo a activar, vamos a ver que la carga se vuelve a mostrar. Ahora ya tenemos el flujo básico, por lo menos el inicio de nuestra aplicación. Ahora tenemos que decir que cuando'cargando'ha terminado de, efectivamente, cargar nosotros tenemos que desaparecer ese diálogo de carga. Esto lo vamos a hacer buscando dentro de nuestras llamadas de'http', específicamente en la primera sección, que es la que se va a ejecutar en caso de que tengamos correctamente cargada la información. Así que yo acá voy a habilitar, pongo acá punto y coma, 'this' punto'cargando' es igual a 'false'. O sea, que cuando ya la carga ha terminado, ya no estamos en un proceso de'cargando', sino que ya lo cargamos y vamos a ocultar la información de este diálogo. Ahora, si revisamos nuestra aplicación, vamos a ver que no se muestra el diálogo de carga. ¿Cómo vamos a probar esto? Y, por ejemplo, cuando estamos trabajando con muy pocos datos, como en este caso, prácticamente la carga va a ser inmediata, pero vamos a modificar y realmente un poco nuestros archivos y lo que yo voy a hacer es que voy a buscar el archivo JSON y voy a modificar la información para que, primero, cargue el doble y el triple de datos, que primero vamos a agrandar un poco este archivo JSON y, segundo, te voy a mostrar un tip que funciona muy bien para realizar depuración de datos. En este caso, como vemos, la lista ahora es un poco más extensa. Y también voy a hacer clic derecho, voy a hacer clic en Inspect o inspeccionar, de acuerdo al lenguaje de tu navegador, voy a ir a la sección Network, y acá yo tengo la opción, en caso de Chrome, de hacer un "throttling", o sea, simular la velocidad de mi carga. Entonces, yo voy a poner acá, primero voy a ir al inicio de mi aplicación, listo. Entonces, vamos a ir acá, Acerca de, ahora estoy en otra sección de mi aplicación, voy a activar el "throttling" y voy a decir que me trabaje como una conexión lenta GPRS donde me baje apenas a 50 KB por segundo. Ahora, la conexión se va a poner increíblemente lenta y yo voy a aprovechar eso para simular una carga. Así que vamos a ir a lista de libros, vemos donde se está mostrando acá la información de carga y cuando se carga, efectivamente, se oculta la sección de precarga y ya podemos ver nuestra aplicación. Esto nos va a servir mucho para cuando nosotros estemos cargando principalmente datos bastante pesados, pero también, en general, es una buena práctica cuando estamos haciendo cualquier tipo de carga mostrar esta información para que el usuario no piense que, de alguna forma, nuestra aplicación se quedó bloqueada en el tiempo entre que se muestra la información y que carga los datos que nosotros necesitamos. Así, el usuario va a tener una aplicación mucho más fluida, mucho más funcional y también mucho más intuitiva de utilizar.

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.