Implementación de Router Link en Angular para SPA eficiente

Clase 58 de 71 • Curso de Angular: Creación de Aplicaciones Web

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.
```
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
```

¿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:

<nav>
  <ul>
    <li><a [routerLink]="['/home']">Home</a></li>
    <li><a [routerLink]="['/about']">About</a></li>
    <li><a [routerLink]="['/servicios']">Servicios</a></li>
  </ul>
</nav>

¿Cómo reutilizar componentes como el header?

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:
```
import { HeaderComponent } from './shared/header/header.component';
```
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.

Javier Vargas

student•

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/>

Juan Fonseca

student•

Realmente sí, no se cuanto ha cambiando los cursos, pero en versiones antiguas eso se explica cuando trabajamos los modulos y el lazy loading

Emilio Nicolás Mendoza Patti

student•

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>
  `,
})
export class AppComponent {}


````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&#x20;

Michelle Patiño Campos

student•

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?

Stiven Arboleda

student•

Te recomiendo hacer un *ngIf algo similar a esto <nav *ngIf="router.url !== '/login'">

Omar Ramirez Sanchez

student•

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.

Kengya Moncada

student•

pienso que se hace por la experiencia de usuario

Stiven Arboleda

student•

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!

Alfonso Espinoza

student•

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'
})
export class AppComponent {
  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 header
      const 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';

export const routes: Routes = [
    {
        path: '',
        component: ListComponent
    },
    {
        path: 'about',
        component: AboutComponent
    },
    {
        path: '404',
        component: NotFoundComponent
    },
    {
        path: '**',
        redirectTo: '404'
    }
];

Sebastian Alexander Diaz Paz

student•

Qué diferencia hay entre importar "RouterLink" y "RouterLinkWithHref"?

Platzi

student•

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.

Nicolas Molina

teacher•

Realmente no hay diferencía y el RouterLinkWithHref es un alias del RouterLink si usas standalone components.

Harold German Granados Guerrero

student•

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 ?

Nicolas Molina

teacher•

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.

Lehder Harold Hernandez

student•

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.

Javier Vargas

student•

Lo ideal sería colocar el header dentro del app component, ya que es un componente que aparece en todo momento

Juan Carlos López Carrasco

student•

RouterLinkWithHref es nuevo? Antes importaba routerModule.

ANDRES ALFONSO MIRA MEJIA

student•

✅