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

Angular esencial

Activar rutas dinámicas

¡Prueba gratis durante 10 días

nuestros 1291 cursos !

Prueba gratis Mostrar modalidades de suscripción
Las rutas dinámicas de Angular permiten enviar información a través del URL, información que cambia según las condiciones y flujo de una aplicación. En esta lección vamos a implementar rutas dinámicas en una aplicación Angular.
09:47

Transcripción

Te voy a mostrar cómo activar enlaces dinámicos dentro de una aplicación Angular. Acá yo estoy trabajando una lista, que en este caso me está mostrando diferentes libros. Cada uno de estos elementos está desplegando un enlace. Si vamos, por ejemplo, en el código, vamos a ver que acá donde estoy generando la ruta que despliega estos elementos, cada uno de ellos está mostrando un enlace hacia un nuevo componente. Regresemos a la aplicación y vemos que acá, al hacer clic sobre cualquiera de estos ítems, me va a enviar a la ruta definida, que en este caso es'detalles'. Sin embargo, en este caso, el componente'detalles' no sabe y no puede saber cuál es el enlace en el que yo hice clic. Si me vuelvo otra vez a Lista de libros, no importa en cualquiera que yo haga clic, siempre me va a mostrar la misma ruta, y además de eso siempre me va a mostrar la misma información, porque en componente no sabe en dónde hice clic. Nosotros vamos a habilitar las rutas dinámicas que nos van a permitir dos cosas: la primera es indexar mejor nuestra aplicación. Por ejemplo, acá nosotros podríamos asignar de diferentes formas el valor de cada uno de estos libros. Por ejemplo, una aproximación que podríamos tener es almacenar dentro de una variable local nuestra aplicación. En este caso, por ejemplo, el libro Drácula, y que cuando entremos a este nuevo componente la aplicación sepa en dónde estamos y que me muestre los datos. Sin embargo, en ese caso nosotros no tendríamos una indexación correcta y además si quisiéramos enviarle, por ejemplo, el enlace a otra persona donde se muestran los detalles de ese libro, copiaríamos únicamente el enlace detalles y cuando esa persona lo abra no va a tener esa variable local guardada y le va a mostrar la lista de libros. No va a ser la información específica que está buscando, que en este caso es sobre el libro de Drácula. Vamos a hacer que esta indexación se active y que también podamos desplegar los datos en una ruta específica. Esto lo vamos a hacer primero modificando el módulo principal de la aplicación. Esto lo vamos a lograr a través de modificar el archivo'app. model. ts' donde ya se encuentran definidas las rutas. Específicamente la ruta en la que estaba trabajando hace unos minutos es la ruta'detalles'. Para habilitar una ruta dinámica, nosotros la vamos a definir a través de la sintaxis de dos puntos. Por ejemplo, primero yo necesito definir que dentro de'detalles'existan otros elementos, así que para definir esas subcarpetas o subrutas, voy a incluir acá un "slash". Ahora, dentro de'detalles', cuando el usuario entre a detalles va encontrar contenido adentro de esta sección llamada Detalles. De paso, estamos generando un "keyword" que va a ser más fácil y va a mejorar la indexación de nuestra aplicación. Ahora yo voy a definir una variable. Las variables las voy a definir con dos puntos. En este caso, la variable se va a llamar'libroId'. Voy a crear la variable de esta forma. Teniendo esta variable, yo puedo incluso definir otras secciones. Esto no lo voy a habilitar en este ejemplo, pero, para que sepas, por ejemplo, yo puedo definir rutas de esta forma. Ahora, ¿qué pasaría acá? Yo puedo definir una ruta estática, como'detalles', con una variable como en este caso'libroId', que va a ser una sección que puede estar cambiando, y de nuevo volver a una sección estática donde me muestre más información. Puedo mezclar estos componentes según las capacidades o según la forma en que diseñes tu aplicación. Volvemos otra vez a la ruta que vamos a hacer en nuestro ejemplo y en este caso yo la voy a dejar más simple, que va a ser nada más'detalles' "slash" y una identificación propia de cada libro. Voy a guardar y vamos a ver qué está pasando en este momento en mi aplicación. Si yo entro de nuevo, vamos a ver que la lista sigue funcionando correctamente y al hacer clic sobre cada uno de los elementos que se encuentran en ella voy a entrar acá a un error. ¿Por qué me está mostrando un error? Porque cada uno de los enlaces de esta lista me está enviando a la ruta, en este caso'detalles'. Pero ahora'detalles', si recordamos, dentro de las rutas, 'detalles'ya no se encuentra definido por sí mismo. Ahora la ruta –y recordemos que las rutas son exactas–, en este caso la ruta es simplemente'detalles' "slash" identificación. Ya no existe'detalles'. En el caso de que quisieras mostrar información específicamente cuando el usuario entra a la raíz de esta sección, por ejemplo, si entra a'detalles'que le muestre una lista de libros, vamos a hacer esto acá, puedes hacerlo así. Entonces, cuando el usuario entra a'detalles'específicamente, lo podemos hacer que haga un'redirect', por ejemplo, a'lista de libros'. Y si entra a'detalles', "slash", una identificación, le podemos mostrar los detalles de'libro'. Vamos a ver otra vez cómo está funcionando la aplicación y vemos que, en este caso, si entramos a cualquiera de estos enlaces, que me va a enviar directamente a'detalles'. Vamos a ir al inicio para que se perciba un poco más. Si entramos acá a 'detalles', sin ninguna propiedad, me va a mostrará acá la lista de libros. Pero si yo entro a'detalles', "slash", y en este caso vamos a poner un 1, por ejemplo, me va a mostrar, ahora sí, la sección de'detalles', donde estamos activando un componente. El componente tiene la capacidad de leer la ruta y desplegar información específica. Así nosotros estamos matando dos pájaros de un solo tiro. Estamos desplegando información dinámica. Estamos habilitando, en este caso, una ruta por defecto. Por ahora, cada vez que yo haga clic sobre cada uno de los enlaces, me va a devolver exactamente a la misma sección, y esto sucede tan rápido que parece que no estoy haciendo clic, pero sabemos que al entrar a'detalles' siempre me va a devolver a una sección. Esto lo estoy haciendo simplemente para que puedas ver cuál es la capacidad de flexibilidad que nosotros tenemos dentro de las rutas. Como última parte dentro de este ejercicio, lo que voy a hacer es yo voy a habilitar la opción de enviar información dentro de una ruta y esto lo voy a hacer desde la lista de libros. Así que busquemos el componente que está generando esta lista y por ahora lo único que tengo es la información de'detalles'. Para habilitar la información dinámica yo voy a aprovechar que la directiva'routerLink' utiliza un'array'. Como puedes notar, acá estoy utilizando paréntesis cuadrados, así que lo que voy a hacer es que voy a enviar información. Para hacer eso, simplemente agrego una coma y puedo utilizar, por ejemplo, valores estáticos. En este caso, si yo quisiera mostrar un valor, quiero que notes que lo estoy poniendo entre comillas. Voy a guardar y vamos a ver que dentro de la lista de libros, al hacer clic sobre cualquiera de ellos vamos a entrar a'detalles', un valor. Y como ya teníamos definido que nuestra ruta, cada vez que alguien entra a detalles, con cualquier valor que se encuentre después de él, me va a enviar al componente'detalles'. Recordemos que si lo elimino me envía a la lista de libros para mostrar un contenido y que la aplicación no entre en error. Ahora, lo que voy a hacer es que, como vemos, todos los elementos de esta lista me está mostrando siempre el mismo valor estático. Vamos a utilizar un valor dinámico. Dentro de este componente, yo estoy utilizando una propiedad llamada'libro'. Dentro de'libro'tengo varias propiedades y en este caso, por ejemplo, estoy mostrando el título. Voy a copiar este valor acá y para incluir un valor dinámico voy a eliminar las comillas y en vez de'libro. titulo' voy a utilizar otra propiedad que se encuentra dentro de este módulo, que va a ser'libro. id'. Si revisamos dentro de este componente, yo ya tengo un'array' donde estoy extrayendo la propiedad'título', pero también tenía otra propiedad llamada'Id'. En este caso va a ser 1, 2, 3, 4, 5, etc., etc. Vamos a volver acá y vemos que, entonces, estoy utilizando la directiva'routerLink' donde envió a la sección estática detalles y también inyecto un valor dinámico, que va a ser el'Id'correspondiente a cada uno de los libros. Vemos el resultado final de nuestra aplicación, donde tenemos diferentes enlaces. Cada uno de ellos me está mostrando una ruta dinámica donde estoy llegando con el'Id'específico de cada uno de estos libros. Y así es que nosotros podemos generar rutas dinámicas dentro de Angular.

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:
Formadores:
Fecha de publicación:29/06/2017
Duración:4:27 horas (35 Videos)

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.