Angular esencial

Desplegar rutas por defecto

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Una vez que habilitas las rutas de Angular notarás que por sí mismas son bastante estáticas y solo pueden enlazar un componente con una ruta especificado que significa que, si el usuario entra a cualquier otra combinación por error, la aplicación puede fallar. En esta lección vamos a adaptar las rutas de una aplicación para desplegar contenido en cualquier condición.
07:36

Transcripción

En esta lección, vamos a aprender cómo generar las rutas por defecto y el manejo de errores dentro del'router'de Angular. Acá estoy trabajando en una aplicación que ya tiene definidas dos rutas. La primera ruta que ya tiene definida es 'AcercaDe'. Y cuando yo entro a esta ruta me muestra el contenido de un componente. Tengo una segunda ruta llamada'lista-libros' donde me muestra el contenido correspondiente a un componente que también tengo almacenado en mi aplicación. El asunto es que ahora mi aplicación solamente muestra dos rutas. Si yo me salgo de cualquiera de esas rutas y pongo cualquier otra cosa, me va a dar un error. Por ejemplo, si yo entro al inicio de mi aplicación, me va a mostrar contenido vacío. O si, por ejemplo, entro a una ruta que no existe, también me va a mostrar contenido vacío. ¿Esto por qué? Porque según la arquitectura de Angular, cuando nosotros estamos desarrollando una aplicación –y te voy a mostrar cómo está funcionando esta plantilla–, cuando nosotros trabajamos en una aplicación, en este caso dentro de la plantilla principal, me muestra el encabezado, porque es un componente que ya tengo previamente definido y que lo estoy insertando de manera estática. Pero en este caso, donde tengo esta etiqueta'router-outlet', me muestra contenido dinámico. Y este contenido se muestra únicamente a partir de la configuración que yo tengo dentro del módulo principal. En este caso'app . model. ts. ' Si revisamos la configuración que tengo acá, solamente le estoy definiendo dos rutas y ya que no le tengo definido ninguna capacidad especial. Cuando la navegación se sale de estas dos rutas, el componente no sabe qué hacer y así solamente muestra dentro de'router-outlet' contenido vacío. Vamos a definir dos elementos muy importantes dentro del 'router'de Angular y para manejar la navegación de nuestros documentos, que va ser primero definir cuál va a ser la ruta base y cuál va a ser el manejo de errores que vamos a tener en nuestra aplicación. Para definir la ruta básica, yo voy a insertar una nueva línea dentro de este'array', que ya tengo previamente definido, que básicamente está configurando la ruta de mi aplicación. Voy a copiar una ruta que ya tengo definida y vamos a hacerle algunas modificaciones. Primero, en este caso, en vez de definir específicamente la ruta a través de la propia'path', voy a insertar un valor pasivo. Luego voy a definir cuál va a ser el componente que se va a cargar en el momento en que el usuario entre a la raíz de mi aplicación. En este caso, yo ya he creado un componente llamado'inicio', que tengo definido dentro de mi aplicación como'InicioComponent', así que lo voy a copiar acá y lo voy a definir dentro de mi aplicación. Y ya tenemos'InicioComponent'. Ahora, para asegurarnos de que se va a desplegar correctamente la información cuando el usuario entre a la raíz, le vamos a agregar una propiedad adicional. En este caso la propiedad se llama 'pathMatch' y vamos a insertarle el valor'full'. Esto significa que esta ruta se va activar en el momento en que el usuario entre directamente a la raíz del documento. Cuando entremos a la raíz de la aplicación, vamos a mostrar'InicioComponent'. Vamos a guardar la aplicación y vamos a ver cómo está funcionando esto. Recuerda que hasta hace unos segundos, cuando entrábamos al inicio, me mostraba contenido vacío. Ahora estamos al inicio de la aplicación y ya me está mostrando la información que está dentro del componente'inicio'. Y en este caso le da la bienvenida al usuario a mi club de libros. Si yo entro a cualquiera de las otras rutas que también estaban definidas, como, por ejemplo, 'lista-libros' o'acerca-de', me siguen funcionando de manera normal. Ahora, la etiqueta'router-outlet' tiene definidos qué contenidos mostrar en tres diferentes situaciones, en especial cuando entremos a la raíz de la aplicación. Tenemos un último caso: ¿qué pasa cuando el usuario está insertando incorrectamente una ruta? Por ejemplo, si nosotros tenemos la ruta'lista-libros', pero el usuario se equivoca y pone'lista-libro', en este momento me da un error y vemos que la etiqueta 'router-outlet'muestra lo que debería ser contenido vacío. Vamos a decirle qué hacer a esta etiqueta cuando el usuario se equivoca de ruta. Vamos a ir a nuestro'router' y vamos a definir cuál va a ser la ruta en el caso de que el usuario se equivoque. Yo voy a copiar la ruta que se encuentra acá para la raíz de mi aplicación, voy a insertar acá una coma y voy a modificar las propiedades. Primero voy a eliminar la propiedad 'pathMatch' y vamos a definir acá que en el caso de que'path' sea –y vamos utilizar acá la sintaxis de dos asteriscos. Esto me va a permitir a mí utilizar un comodín, o sea, cualquier ruta que no sea ninguna de las tres definidas acá–, va a calzar con esta sintaxis. Y en este caso vamos a utilizar el comando 'redirect To' para redirigir al usuario a otra ruta. Acá no defino un componente, sino que defino una ruta. Tal vez una de las prácticas más comunes es redirigir al usuario a la raíz en este caso definiéndolo como una ruta con una cadena de texto vacía. O también podemos incluir acá un "slash". En ambos casos va a definir la raíz del documento. Lo que va a suceder es que –y vamos a ver el resultado final– cuando el usuario entra a nuestra aplicación, acá me muestra la raíz. Y si entramos a una ruta incorrecta, por ejemplo, 'lista' guion'l', presionamos Enter y me va a enviar a la raíz de la aplicación. Ya no muestra contenido vacío. Tal vez una forma un poco más sólida de hacerlo, –y mi recomendación personal– es que incluyamos una ruta de error. Yo ya he definido acá previamente un componente llamado'error 404' y lo que voy a hacer es que voy a crear una nueva ruta. Voy a copiar una de las rutas que ya tenía definida. Vamos a ponerle nombre, '404'. Puede tener cualquier nombre, simplemente utilizo este para que sea más fácil de entender qué es lo que estoy haciendo. Y voy a invocar el componente 'error 404'. Ahora, cuando el usuario inserte una ruta que no esté definida, yo lo puedo redirigir a la ruta'404' y me va a mostrar un mensaje de error. Veamos, ahora sí, cómo queda nuestra aplicación. Si entramos a la raíz o si entramos a una ruta incorrecta, en este caso nos va a enviar a la dirección'404', donde dice que el documento no fue encontrado y insertamos también una opción de búsqueda para que el usuario pueda encontrar qué es lo que realmente estaba buscando. Y no hacemos nada más como que se devuelve al inicio de a la aplicación y que parezca que no pasó nada. Así nosotros nos aseguramos de que el usuario está consciente de que la ruta a la que entró no funcionaba, pero también le damos una opción para que pueda buscar dentro de nuestra aplicación y continúe navegando dentro de ella.

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.