Introducción al Routing
Angular nos permite construir single page applications (SPAs, por sus siglas en inglés). Lo hace usando una herramienta que trae por defecto, el Angular Router. Con el Router podremos crear varias páginas con distintas URLs, tipo /user, /register, etc, sin necesidad de crear otro documento HTML a parte del que ya viene con Angular, el index.html.
Estado inicial de nuestra demo
Para explicar cómo funciona el Routing, vamos a construir una pequeña demo-app. El objetivo de esta app sería gestionar servidores y usuarios.
Utilizaremos Bootstrap para tener una UI decente a la velocidad del rayo.
1. Puedes descargar la app (desde el botón "Code", con la opción "Download ZIP") en su estado inicial desde aquí.
2. Descomprime el ZIP en la carpeta de tu pc que elijas.
3. Navega con tu terminal hasta la carpeta de tu proyecto y usa el comando npm install para instalar todas las dependencias.
4. Lanza el proyecto con ng serve -o, que te lo abrirá en tu servidor local (en inglés, local host o local server). El aspecto inicial de la app debería ser este:
En la parte superior tenemos 3 pestañas (en inglés, tabs), que reaccionan al pasar el ratón por encima, pero que no tienen configurada ninguna funcionalidad. Vamos, que no hacen nada .
Todo el contenido que se ve en esa página es el contenido que vamos a distribuir a lo largo de las 3 pestañas, generando así 3 "páginas".
Esto significará también que en la barra de navegación veremos, en lugar de http://localhost:4200, rutas como http://localhost:4200/users, http://localhost:4200/servers, etc.
EN INGLÉS rutas = routes
CONTENIDO RESTRINGIDO
El resto del contenido es sólo para miembros del Club ACTech. Puedes unirte aquí o iniciar sesión si ya eres miembro.
THE END!
¡Y con esto terminamos la 1ª parte de esta Guía completa sobre Routing! Aún nos queda mucho por aprender, como otras formas de usar los relative paths. Veremos eso y mucho más en la parte #2. Por lo pronto, espero que hayas aprendido algo nuevo . Si te queda alguna duda, ¡nos vemos en los comentarios!
Más recursos de aprendizaje
En mi experiencia, la manera más eficaz para aprender Angular es combinando varias vías de aprendizaje. Uno de mis métodos favoritos son los vídeo-cursos y mi plataforma predilecta para eso es Udemy. He hecho varios cursos pero sólo recomiendo aquellos que verdaderamente me han sido útiles. Aquí van:
Si necesitas apoyo en forma de libro, puede que éstos te sirvan de ayuda:
La programación es un mundo que evoluciona a una velocidad de vértigo. Los autores de estos libros lo saben, por eso suelen encargarse de actualizar su contenido regularmente. Asegúrate de que así sea antes de adquirirlos .
Participo en el programa de afiliados de Udemy y Amazon, lo que significa que, si compras alguno de estos cursos y/o libros, yo me llevaré una pequeña comisión y a ti no costará nada extra. Vamos, lo que se dice un win-win .
Sobre la autora de este post
Soy Rocío, una abogada reconvertida en programadora. Soy una apasionada de aprender cosas nuevas y ferviente defensora de que la única manera de ser feliz es alcanzando un equilibrio entre lo que te encanta hacer y lo que te saque de pobre. Mi historia completa, aquí.
Otros artículos que pueden interesarte