Href vs router link: navegación angular

Contenido del curso

Inicio del curso

1
Angular 4: configuración a despliegue profesional
02:13 min

Introducción a Angular 4

Setup del Ambiente de Trabajo

Conceptos Básicos

Directivas

Angular UI

Ruteo

Servicios

Conexión Remota (Http y Sockets)

Pipes

Animaciones en Angular

Testing en Angular

Autenticación y Protección de Rutas

RxJS

Publicando nuestro proyecto

72
Publicando en Firebase Hosting
07:39 min

Fin del curso

73
Conclusión ¿Qué aprendimos en el curso?
01:20 min
74
Reto final del curso - realiza un nuevo modulo de PlatziSquare de acuerdo con las historias de usuario
01:25 min

Sesiones en vivo

Contenido Bonus

80
Actualización de angular, versión 6.0
04:25 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:002:27

Href vs router link: navegación angular

Curso de Angular 4

Clase 26 de 80

Clase 26 / 80

Recursos

Cambiar de Href a router link en Angular marca la diferencia entre una navegación lenta y una experiencia fluida. Al evitar la redirección del browser y delegar el control al router de Angular, la respuesta es inmediata y la interfaz se siente profesional y consistente.

¿Cómo se configuró la navegación entre “Lugares” y “Detalle”?

En el archivo app.component.html, se preparó la barra de navegación con hipervínculos. Se reemplazó temporalmente “Contacto” por “Detalle” y se asignaron destinos: “Inicio” → “Lugares” y “Detalle” → “Detalle”. Con esto, la URL permite moverse entre vistas de forma sencilla.

Archivo modificado: app.component.html.
Enlaces configurados: Inicio → Lugares. Detalle → Detalle.
Objetivo: navegar entre vistas desde la barra, usando la URL.

¿Qué se observó al probar los enlaces con Href?

Al hacer clic en “Detalle” o “Inicio”, la interfaz tardaba alrededor de un segundo en cambiar. Ese “tiempo de carga” se debe a una redirección del browser, algo que no debe ocurrir en Angular ni en una single page application.

Problema: Href produce una recarga completa de la página.
Efecto visible: retardo de ~1 segundo al cambiar de vista.
Contexto frecuente: error común cuando se viene de un background de HTML.

¿Por qué Href es un problema en una single page application?

En una single page application, el enrutamiento debe ocurrir dentro de la misma página. Usar Href fuerza al navegador a recargar el documento, rompiendo el comportamiento esperado: transiciones inmediatas y sin parpadeos.

Mala práctica: usar Href para rutas internas en Angular.
Consecuencia: recarga del documento y pérdida de fluidez.
Expectativa en Angular: navegación sin redirecciones y con cambios instantáneos.

¿Qué hace diferente a router link?

Sustituir Href por router link en los enlaces permite que el router de Angular gestione el cambio de vista internamente. El router selecciona el componente correcto y lo inyecta en index.html, sin recargar la página.

Acción clave: cambiar Href por router link en ambos enlaces.
Resultado: navegación inmediata, sin tiempos de carga visibles.
Mecanismo: el router resuelve la ruta y muestra el componente correspondiente.

¿Qué mejoras quedan pendientes en la interfaz?

La navegación ya es funcional y rápida. Sin embargo, al ingresar a “Detalle”, el estado visual de la barra no refleja la ruta activa: “Inicio” permanece en blanco y “Detalle” no aparece como seleccionado. Esto se abordará después para resaltar dinámicamente la opción activa según la ruta.

Estado actual: navegación completa y sin redirecciones.
Detalle de UX: falta resaltar la opción activa en la barra.
Próximo paso: adaptar estilos según la ruta seleccionada.

¿Te surgieron dudas sobre el cambio de Href a router link o sobre el comportamiento del router de Angular? Comparte tus preguntas y casos prácticos para profundizar juntos.