Angular 2 práctico: Sitio de consumo de videos

Administrar rutas de Angular 2

¡Prueba gratis durante 10 días

nuestros 1220 cursos !

Prueba gratis Mostrar modalidades de suscripción
Tal vez una de las propiedades más populares de Angular2 es su capacidad de crear aplicaciones completas en un solo documento y, aunque esto puede mejorar sustancialmente el rendimiento de tu sitio, puede tener problemas de indexación en motores de búsqueda. En esta lección aprenderemos a administrar las rutas, un componente que nos permite indexar contenidos al mismo tiempo que usamos aplicaciones de un solo documento.
09:06

Transcripción

Vamos a comenzar a implementar las rutas dentro de Angular 2. En Angular trabajamos, si bien es cierto, dentro de un solo documento, podemos hacer que nuestras aplicaciones tengan diferentes rutas. Lo que quiere decir que desde el lado del navegador, desde el lado del usuario, vamos a ver como si fueran diferentes páginas sin embargo, estamos trabajando en un solo documento. Esto nos va a ayudar a que aparezcamos mejor calificados dentro de los motores de búsqueda. Vamos a ver cómo se implementa eso dentro de una aplicación Angular. Vamos a buscar el módulo principal de la aplicación. En este caso, estoy trabajando dentro de una aplicación cuyo módulo es "app.module.ts" Dentro de este módulo principal, voy a importar un nuevo módulo que es el módulo de rutas. En este caso vamos a poner "import". Vamos a definir cuáles son los módulos que vamos a importar y vamos a importar "RoutetModule", y otro objeto que se llama "Routes". Vamos a decir que los importe desde Angular. Así que pongo "@Angular" y defino que sea específicamente del "módulo router" que es un módulo adicional de Angular. Me falta, acá tengo un error, vamos a corregirlo es "RouterModule". Ya estamos listos para comenzar a trabajar esto dentro de nuestra aplicación pero antes, necesito definir cuáles va a ser las rutas con la que vamos a trabajar. Para eso tengo que crear una variable que va a ser de tipo constante. Así que vamos a poner que sea una constante y le vamos a definir el nombre que sea "rutasApp" que sea igual a un arreglo. Esto va a ser un arreglo especial donde voy a incluir una serie de objetos. Lo objetos que voy a incluir van a tener dos parámetros básicos. El primero va a ser "path" donde voy a definir cuál va a ser la ruta y el segundo va a ser el componente que se va a cargar dentro de nuestra aplicación. Esta es la sintaxis básica que debemos utilizar. En todos los casos debemos ir separando todos estos valores por coma. Ahora vamos a definir cuáles son las rutas que vamos a trabajar. Voy a trabajar una ruta inicial que se va a llamar "lista-video" donde quiero que se muestre una lista de videos, que ya tengo predefinidas acá en componente. El componente que quiero que se muestre es precisamente ese y voy a decirle a Angular que cuando alguien entre a esa ruta despliegue el componente "ListaDeVideosComponent". Listo, ya está definida una ruta. Vamos a guardar. Qué pasa si queremos agregar más rutas. En este caso voy a hacerlo rápido y voy a copiar la ruta que tengo y nada más voy a poner si quiero que exista otra ruta por ejemplo, "otra-ruta", y defino el componente que quiero que se cargue que puede ser el mismo componente que teníamos o un nuevo componente. Ahora, importante, quiero que notes que en este caso me está dando un error. Me está dando un error porque siempre que invocamos un componente para desplegarse en una ruta tiene que ya estar importado dentro del módulo principal, si no vamos a tener un error dentro de nuestra aplicación. En este caso, estaba dándotelo como ejemplo, pero cada vez que agregues una nueva ruta asegúrate de que se encuentra registrado igual que en el caso de esta que estamos trabajando acá. Listo, vamos a borrar esta ruta ejemplo. Vamos a guardar nuestra aplicación y vamos a seguir registrando los componentes para las rutas. Nos faltan un par de detalles. Una vez que ya tenemos una ruta básica también tenemos que ir a la sección de "imports" y en "imports" tenemos que agregar un valor nuevo que en este caso va a ser "RouterModule" y vamos a llamar un método que se llama "forRoot", donde vamos a definir las rutas de nuestra aplicación. Nos falta, también, definir algunos elementos extra. Esta ruta, si bien es cierto ya está funcional, podemos hacerla mejor, por ejemplo ¿qué pasa cuando el usuario entra a la página inicial? Si en este momento entramos a nuestra dirección. Vamos a guardar y vamos a ver qué es lo que sucede en nuestra aplicación. Estamos acá, trabajando, y vemos que en este caso está trabajando un poco extraño mi aplicación. Vamos a mejorar un poquito. Quiero que veas ahí que se hace un "delay" y, además de eso, me está mostrando la página pero no me la está mostrando correctamente. Voy a agregar un par de detalles extra para que quede una página completa. Lo que voy a hacer es que necesito que existan otras rutas, por ejemplo, cuando entramos a la ruta inicial. Voy a poner que, en este caso, esta ruta solo se va a mostrar cuando el usuario entra específicamente acá y se va a mostrar este componente. ¿Pero qué pasa si entra a la raíz de nuestra aplicación? Vamos a generar un nuevo "path" que dice "path". Y en este caso voy a asignar una cadena de texto vacía. ¿Por qué estoy haciendo eso? Básicamente porque lo que quiero es que cuando entremos al inicio de la aplicación o sea, que no hayamos definido ninguna ruta entonces que se genere esta conducta. En este caso, voy a asignar un parámetro llamado "redirect" que va a redireccionar la aplicación a la ruta que ya tenemos acá definida, "lista-video". Cuando el usuario entra en mi aplicación, aunque no haya definido ninguna ruta, inmediatamente lo vamos a redirigir acá. Guardemos y vamos a revisar el resultado. Tenemos acá "lista-video". Quiero que notes que aún está dando un error. Si trato de entrar a "lista-video", que ya lo tengo definido, aún así está regresando al inicio. Tenemos que hacer algunos cambios extra. Vamos a seguir modificando nuestra constante y esta vez voy a agregar otra ruta. Necesito también que exista una ruta en el caso de que los usuarios entren a una dirección que no existe. Por ejemplo, si algún usuario se equivoca y en vez de "lista-video" entra a "ListadeVideo", ¿qué pasa en ese caso? Si no lo hacemos correctamente podemos hacer que nuestra aplicación falle. Así que vamos a agregar una ruta especial. En este caso va a ser una ruta que va a ser así. "path: **" Esto lo que va a hacer es que va a calzar con el patrón que se encuentra dentro de nuestra aplicación. En este caso, cuando utilizamos dos asteriscos significa lo que sea y nos va a cargar un módulo. En este caso voy a decir que cargue "ListaDeVideosComponent". Puede ser también que definamos otro nuevo componente como por ejemplo, un componente de "página no encontrada". Para ese caso podemos hacer que el usuario pueda ver una búsqueda o que le informe que lo que está buscando no se encuentra dentro de la aplicación. Tenemos ya las rutas básicas definidas vamos a volver a la aplicación. Sigue exactamente igual. Vamos a hacer el último cambio porque, hasta ahora, no importa lo que hagamos siempre vamos a ver este mismo contenido. ¿Por qué está sucediendo esto? Vamos a la aplicación y vemos que si entramos a la plantilla principal de la aplicación, en este caso "app.component.html", vemos que solamente estamos cargando un módulo y no importa lo que pase siempre se va a cargar exactamente el mismo módulo. Vamos a mejorar nuestra aplicación. Quiero que igual exista un módulo que se cargue todas las veces. El módulo que quiero que se cargue siempre sin importar la ruta va a ser un módulo que se llama "app-header", que ya tengo previamente definido, y que es el módulo de encabezado. Revisemos la aplicación y vemos que ya estamos cargando el encabezado. Para finalizar, vamos a poner una etiqueta especial que se llama "router-outlet". Guardamos y ya estamos listos, porque esta etiqueta lo que va a hacer es que va a cargar de forma dinámica —de acuerdo a la ruta que estemos— un componente. Entonces, en este caso, ahora sí está funcionando nuestra aplicación. Vemos que estamos en "lista-video" y se carga este componente. Si estuviéramos en otra dirección se cargaría un nuevo componente y si nos vamos a otra dirección que esté incorrecta también nuestra aplicación, en este caso, va a cargar "lista- video". y nos a mostrar un contenido en caso de que nos equivoquemos de ruta. Ya tenemos definidas correctamente las rutas dentro de Angular 2.

Angular 2 práctico: Sitio de consumo de videos

Aprende a crear un sitio web de consumo de vídeos con Angular 2, desarrollando el back-end y conectando con el servidor local, terminando por la personalización del reproductor.

2:41 horas (26 Videos)
Actualmente no hay comentarios.
 

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.