Implementación de Router Link en Angular para SPA eficiente
Resumen
¿Cómo utilizar Router Link para mejorar la experiencia en Angular?
Para optimizar la experiencia del usuario en aplicaciones Single Page Application (SPA), como es el caso de aplicaciones en Angular, es fundamental hacer uso de navegaciones internas sin que se recargue toda la página. Esto no solo mejora el rendimiento, sino que proporciona una transición más fluida. Aquí es donde entra Router Link. En lugar de usar el tradicional href, Angular nos ofrece una solución eficiente con Router Link.
¿Qué es Router Link y cómo implementarlo?
Router Link es una directiva de Angular que nos permite crear navegaciones internas sin realizar recargas completas de la página, aprovechando el enrutador interno de Angular. Para implementar Router Link:
Importar Router Link:
Debemos asegurarnos de importar la directiva en nuestro módulo desde el paquete de Angular Router.
import{RouterModule}from'@angular/router';
Usar Router Link en HTML:
Para cualquier enlace que desees redirigir internamente en tu aplicación Angular, en lugar de usar href, utiliza [routerLink].
<a[routerLink]="['/home']">Home</a>
Ajustar la configuración del módulo:
Asegúrate de tener tu módulo configurado correctamente para utilizarlas rutas adecuadas.
¿Cuál es el beneficio de usar Router Link en la barra de navegación?
Al implementar Router Link en la barra de navegación, no solo optimizamos la carga de nuestra página, sino que también mejoramos la cohesión de nuestro diseño y funcionalidad. Un ejemplo práctico:
Añadir Router Link a nuestra barra:
Supongamos que tenemos una barra con enlaces a Home, About, y Servicios. Para cada uno de estos:
Angular permite la reutilización sencilla de componentes, lo que es útil tanto para mantener un diseño uniforme como para facilitar el mantenimiento de código. Supongamos que queremos que nuestra página About contenga el mismo header que la página principal:
Copiar la estructura del main:
Puedes copiar la estructura del componente Header de la página principal y ajustarlo a la nueva página.
Importar el componente:
Asegúrate de importar los componentes necesarios en tu nuevo módulo, por ejemplo:
Añadir al HTML:
Incluir el componente en la estructura HTML de la nueva página.
<app-header></app-header>
¿Qué sucede si se enlaza a una página que no existe?
Cuando intentas enlazar a una ruta que no existe, es crucial tener una página 404 adecuada configurada. Angular permite redirigir automáticamente a una página de error personalizada, mejorando la experiencia del usuario al generar respuestas útiles en caso de errores.
Configuración de la ruta 404:
Asegúrate de configurar tu enrutamiento para manejar páginas no encontradas con una ruta comodín:
{path:'**',component:NotFoundComponent}
¡Sigue explorando y mejorando tus habilidades en Angular! La implementación correcta de Router Link y la reutilización de componentes cleves son fundamentos para crear aplicaciones SPA eficientes y escalables.
Lo ideal sería utilizar el componente Header solo 1 vez, ya que va en todo momento, en lugar de llamarlo en cada página. Una opción es mantener el app.component.html y colocar el header arriba del outlet, en caso tengas un footer sería lo mismo, colocarlo debajo
Ahora, siguiendo este esquema, iría algo así, recuerda que los nombres deben concordar con tus componentes:
<app-header/>
<router-outlet/>
<app-footer/>
Realmente sí, no se cuanto ha cambiando los cursos, pero en versiones antiguas eso se explica cuando trabajamos los modulos y el lazy loading
Segui tu indicacion porque la veo correcta y para agregar lo que hice fue:
app.component.ts
import{Component}from'@angular/core';import{RouterOutlet}from'@angular/router';import{HeaderComponent}from"./domains/shared/components/header/header.component";@Component({ selector:'app-root', standalone:true, imports:[RouterOutlet,HeaderComponent], template:` <div class="container mx-auto">
<app-header />
<router-outlet />
</div>
`,})exportclassAppComponent{}````list.component.html````html
<div class="grid grid-cols-4 gap-5 mt-5"><app-product
*ngFor="let product of products()"[product]="product"(addToCart)="addToCart($event)"/></div>```Y de esta manera tenemos el header en todas las paginas 
Tengo entendido que no es recomendable reutilizar el header en todos los componentes, si no directamente en el app.html
De esta manera se muestra en todas la paginas sin estar cargando el header de nuevo. Sin embargo en caso de tener un login, se necesita una condición para que esta no aparezca. Alguna recomendación?
Te recomiendo hacer un *ngIf algo similar a esto
<nav *ngIf="router.url !== '/login'">
En el trabajo acostumbramos a redirigir a la pagina principal y no a una pagina de 404, pero creo que en ciertos casos no esta de mas tener una pagina de not found.
pienso que se hace por la experiencia de usuario
Teniendo en cuenta que lo ideal es dejar el Header en app.component para así solo usarlo una vez, recomiendo hacer lo siguiente para la página del 404 dentro del app.routes.ts
Luego, en el navbar colocar la siguiente condición:
*ngIf="router.url !== '/404'"
Así no saldrá el Header para las rutas no encontradas!
Como otros han comentado, puse el header en el app component para no cargarlo por cada url que existe, pero ahora si no quiero mostrarlo en algunas páginas, como en la 404, tuve que agregar unas cosas, como volver a añadir el app.component.html y escribir lo siguiente
'''Este es el app.component.ts'''import{Component}from'@angular/core';import{CommonModule}from'@angular/common';import{RouterOutlet,Router}from'@angular/router';import{HeaderComponent}from'@shared/components/header/header.component';@Component({ selector:'app-root', imports:[RouterOutlet,HeaderComponent,CommonModule], templateUrl:'./app.component.html'})exportclassAppComponent{ title ='store'; hideHeader:boolean=false;constructor(private router:Router){this.router.events.subscribe(()=>{const current =this.router.url;// Lista de rutas donde NO quieres mostrar headerconst hiddenRoutes =['/404'];this.hideHeader= hiddenRoutes.includes(current);});}}'''Ahora esto es el app.component.html'''@if(!hideHeader){<div class="container mx-auto"><app-header /><router-outlet /></div>} @else{<router-outlet />}'''
Con un if/else estoy mostrando el header según la url actual.'''
'''Para la url 404 estoy redireccionando desde cualquier url inválida en el app.routes.ts, como vi en otro comentario'''import{Routes}from'@angular/router';import{ListComponent}from'@products/pages/list/list.component';import{AboutComponent}from'@info/pages/about/about.component';import{NotFoundComponent}from'@info/pages/not-found/not-found.component';exportconst routes:Routes=[{ path:'', component:ListComponent},{ path:'about', component:AboutComponent},{ path:'404', component:NotFoundComponent},{ path:'**', redirectTo:'404'}];
Qué diferencia hay entre importar "RouterLink" y "RouterLinkWithHref"?
La diferencia entre importar 'RouterLink' y 'RouterLinkWithHref' es que 'RouterLink' se utiliza para enlaces internos dentro de la aplicación, mientras que 'RouterLinkWithHref' se utiliza para enlaces externos o enlaces que requieren una URL completa.
Realmente no hay diferencía y el RouterLinkWithHref es un alias del RouterLink si usas standalone components.
Yo tengo una pregunta si la pagina no recarga y estoy usando una api construida en laravel. y si un admin agrega un producto y un usuario busca un producto, esta la muestra la instante, tipo realtime ?
Para asegurar que un producto se visualice simultáneamente mientras se añade en tu administrador de Laravel, sería recomendable implementar una estrategia en tiempo real. Al utilizar una API REST, se presentan los datos tal como estaban en el momento de su ejecución. En el contexto de un comercio electrónico, no es estrictamente necesario contar con una actualización en tiempo real, ya que una recarga simple podría mostrar el nuevo producto. Sin embargo, si requieres una funcionalidad de tiempo real, podrías considerar el uso de websockets o bases de datos que soporten esta característica, como Firestore o Supabase.
Debemos de acostumbrarnos a trabajar con las nuevas versiones de Angular, y sus nuevos componentes, no podemos implementar a versiones nuevas, prácticas viejas porque vamos a tener problemas con el proyecto más adelante, yo aprendí con versiones de angular más viejas, ahora me encuentro que en esta versión no existe el app.module.ts, pero tengo que acostumbrarme y aprender como se remplaza, dado que es un proyecto standalone, de la misma manera debemos utilizar el RouterLinkWithHref por qué es parte de las nuevas versiones.
Lo ideal sería colocar el header dentro del app component, ya que es un componente que aparece en todo momento
RouterLinkWithHref es nuevo? Antes importaba routerModule.
