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

Angular esencial

Habilitar y crear rutas en Angular

¡Prueba gratis durante 10 días

nuestros 1290 cursos !

Prueba gratis Mostrar modalidades de suscripción
Tal vez una de las propiedades más populares de Angular 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 incluir el soporte para rutas en una aplicación Angular.
09:52

Transcripción

Una de las características más populares que tiene Angular es su capacidad de generar aplicaciones dentro de un solo documento. Generalmente, cuando trabajamos una aplicación Angular, aunque nosotros tenemos que desarrollar una gran cantidad de plantillas, al final cuando se despliega la aplicación dentro del sistema del usuario lo que va a tener es básicamente un solo archivo. Dentro de ese archivo se van a ir cargando todos los demás componentes de manera asíncrona. Ahora, una vez que nosotros tenemos una página o una aplicación utilizando un solo documento, a pesar de que tenemos una eficiencia mejorada vamos a tener un problema con la indexación. Angular nos va a permitir a nosotros generar también indexación a través de rutas y, por ejemplo, a través de diferentes rutas acceder a los contenidos, a pesar de que se encuentran dentro de un solo documento, mostrar diferentes partes de este documento y a la vez indexarlos dentro de los diferentes motores de búsqueda, lo cual significa que nuestra aplicación no solo va a ser muy eficiente, sino que también se va a indexar correctamente en los diferentes navegadores. Ahora vamos a aprender cómo hacer esto. Por ahora yo estoy trabajando en una aplicación básica y lo que vamos a hacer es que vamos a habilitar las diferentes rutas. En este momento, si yo entrara, por ejemplo, a esta ruta que estoy mostrando ahora, me aparece'localhost: 4200/loremipsum'. Si hago clic no va a pasar nada, porque mi aplicación aún no tiene habilitada ninguna ruta. Así que básicamente me encuentro al inicio de la aplicación. Vamos a habilitar las diferentes rutas para que nuestra aplicación pueda desplegar diferentes contenidos. Acá yo ya he avanzado un poco en mi aplicación y tengo creados tres diferentes componentes: uno que se llama'acerca de', que contiene básicamente un texto de ejemplo o de muestra con contenido acerca de los otros. Luego tengo un encabezado, el cual voy a utilizar para desplegar la parte superior de mi documento. Y finalmente tengo una lista de libros, en la cual estoy utilizando la directiva'ngFor' para desplegar una lista de contenidos que se encuentran dentro de mi aplicación. Voy a habilitar las rutas abriendo directamente el módulo principal de mi aplicación, en este caso'app. model. ts'. Dentro de este archivo vamos a necesitar importar los módulos necesarios para habilitar la navegación. En este caso, vamos utilizar el comando'import'. Vamos a insertar llaves y vamos a llamar dos módulos. Va a ser 'router model', ponemos una coma y también llamamos a 'routes', y esto lo vamos a hacer desde el módulo'@angular' "slash" 'router'. Ahora que ya tenemos estos dos módulos que nos van a permitir a nosotros habilitar la navegación, necesitamos configurarlos. Para eso, yo voy a definir las rutas que va a tener mi aplicación. Esto lo hago a través de una constante, la cual en este caso voy a llamar 'rutasapp'. Y esta constante va a ser de tipo 'routes', donde vamos a definir las rutas. Y acá, básicamente, lo que vamos a incluir es un'array' y dentro de este'array'vamos a meter una serie de objetos. Esos objetos van a tener las diferentes propiedades que necesita nuestra aplicación para desplegar contenidos. Para entender en líneas generales cómo trabaja una aplicación Angular, te voy a mencionar que, por ejemplo, si yo defino una ruta, y en este caso lo hago con la propiedad'path' y ponemos'lista libros', esto va a generar una ruta que dentro de mi aplicación me va a permitir acá entrar a'lista libros'. Ahora, una vez que yo entre a esta dirección, voy a necesitar desplegar contenido. Esto lo voy a hacer a través de otra propiedad, en este caso llamada'component', donde voy a enlazar el contenido con un componente. En este caso yo quiero que cada vez que alguien entre a lista de libros despliegue los contenidos que están dentro de'lista de libros component', un componente que ya he creado previamente en mi aplicación. Así que voy a pegarlo. Y listo. Ahora cada vez que alguien entre a esta ruta, le vamos a mostrar este componente. Vamos a guardar y una vez que ya tengo configuradas las rutas, me falta un último paso, que es inyectarla dentro de'imports'. Para eso simplemente vamos a ir a la sección de'imports' y vamos a agregar una línea adicional, en este caso va a ser'router model' punto. Aquí vamos a agregar un método llamado'for route' y vamos a insertar acá las rutas que acabamos de configurar dentro de la constante'rutasapp'. Ahora nuestra aplicación va a tener acceso a las diferentes rutas y va a poder resolver la dirección cada vez que se invoque a través del navegador. Guardamos y vamos a ver como está funcionando esto en la aplicación. Si revisamos acá en'listalibros', le hago clic, todavía no se muestra ningún contenido. Esto es porque me falta modificar la plantilla principal. Vamos a ir a la plantilla principal de la aplicación, en este caso'app. component. htm'. Por ahora se está mostrando únicamente un mensaje, el cual voy a eliminar en este momento. Ahora hay dos detalles. Nosotros cuando trabajamos dentro de Angular, siempre vamos a trabajar a través de componentes. Así que yo puedo llamar componentes de manera estática, componentes que van a permanecer a lo largo de toda la aplicación. Por ejemplo, en este caso yo tengo un encabezado, así que yo voy a llamar a encabezado a través de una etiqueta llamada'appencabezado', que es el nombre del componente que he creado previamente. Esta etiqueta va a permanecer activa a lo largo de la vida útil de mi aplicación. Sin embargo, yo quiero que algunos elementos aparezcan dependiendo de la ruta en la que nos encontremos. Para eso, yo voy a incluir otra etiqueta donde voy a poner contenidos de forma dinámica. En este caso la etiqueta va a ser'router- outlet' y dentro de esta etiqueta vamos a desplegar todos los contenidos que estamos invocando a través de'import'. Eso quiere decir que cada vez que alguien entre a nuestra aplicación va a ver en todos los casos el encabezado, pero, según la ruta, le vamos a desplegar contenidos en'router-outlet'. ¿Cuáles van a ser los contenidos? Examinamos acá y vamos a ver que, en caso de que la ruta sea'listalibros', los contenidos van a ser los que se encuentran en el componente'lista de libros component'. Ahora sí, ya tengo guardado todo. Vamos a ver el resultado de mi aplicación. Vemos que acá se está desplegando el encabezado y como no tengo ninguna ruta definida, solamente me está mostrando la información del encabezado. Y acá, en algún punto, debe estarse mostrando la información del componente. Sin embargo, como no hay ningún componente definido, no me muestra nada. Entremos a la ruta que tenemos definida. En este caso era 'lista libros'. Vemos que, en este momento, me muestra los contenidos del componente que yo ya he definido antes. Así es como nosotros podemos crear rutas y desplegar contenidos dinámicos. Ahora, un último detalle: recordemos que cuando estamos trabajando en una aplicación, siempre vamos a tener contenido que va a ser estático y lo podemos definir dentro de la plantilla principal y también contenido dinámico. El contenido dinámico, que está definido a través del'router-outlet', se controla desde la información que nosotros tenemos, en este caso dentro de la constante que yo he definido como'rutasApp'. Si yo quisiera agregar nuevos elementos, simplemente agrego una línea extra. Por ejemplo, voy a copiar la línea que ya tenía con la ruta y voy a definir que dentro del'path'o ruta, utilicemos uno nuevo que se llama'acerca de' y voy a hacer que cuando el usuario entre a esta ruta se muestren los contenidos de un componente que ya tengo previamente definido, que se llama'AcercaDeComponent'. Un detalle importante es que siempre cuando defines acá la propiedad'component', debe ser de un componente que ya exista. Por ejemplo, vamos a poner acá –en este caso me aparece un error, porque estoy definiendo un valor de otro componente que no existe dentro de la aplicación y me va a dar un error porque no tiene cómo mostrar esa información–, pues, vamos ahora a la información correcta. En este caso, el componente'AcercaDe', que ya se encuentra definido en mi aplicación. Guardamos. Y ahora sí, vamos a ver el resultado final de este ejercicio, donde tenemos la información primero de la base de nuestra aplicación, donde no le tenemos definido que muestre ningún componente, así que no nos muestra ninguna información, únicamente el componente, que ya tenemos estático dentro de la plantilla principal. Tenemos también 'lista-libros', donde nos muestra la información del componente'lista-libros'. Y por último, 'Acerca De', donde tiene la información de la última ruta que yo he creado. Podemos insertar una cantidad indefinida de rutas y siempre va a manejar el mismo concepto. Cada vez que nosotros definamos la ruta, nos va a mostrar los contenidos que hayamos configurado dentro de nuestra aplicación. Así es como se manejan de forma básica las rutas en Angular 4.

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.