Angular: Enrutado y navegación

El enrutado y la navegación en Angular 18 son aspectos fundamentales para el desarrollo de aplicaciones web dinámicas y bien estructuradas. En esta lección, exploraremos cómo configurar rutas, utilizar el RouterModule y optimizar la navegación en Angular 18.

Configuración de rutas

Para comenzar con el enrutado en Angular 18, es esencial definir las rutas en la aplicación. Esto se realiza en el archivo de configuración de rutas, generalmente app-routing.module.ts. A continuación, se muestra un ejemplo básico de configuración de rutas:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

En este ejemplo, hemos definido dos rutas: la ruta raíz ('') que carga el HomeComponent y una ruta adicional ('about') que carga el AboutComponent.

RouterModule: importación y configuración

El RouterModule es el módulo principal para el enrutado en Angular 18. Se importa y configura en el módulo principal de la aplicación (app.module.ts) o en módulos específicos si se está utilizando lazy loading. A continuación, se muestra cómo importar y configurar el RouterModule en app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Navegación entre rutas

La navegación entre rutas en Angular 18 se realiza utilizando el servicio Router. Este servicio permite programáticamente navegar entre las rutas definidas. A continuación se muestra un ejemplo de cómo utilizar el servicio Router para navegar a la ruta 'about' desde un componente:

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html'
})
export class HomeComponent {

  constructor(private router: Router) {}

  navigateToAbout() {
    this.router.navigate(['/about']);
  }
}

En el archivo de plantilla (home.component.html), se puede vincular esta navegación a un botón:

<button (click)="navigateToAbout()">Ir a About</button>

Lazy loading de módulos

El lazy loading es una técnica que permite cargar módulos bajo demanda, mejorando el rendimiento de la aplicación. En Angular 18, se puede configurar el lazy loading en el archivo de rutas. A continuación se muestra un ejemplo:

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', loadChildren: () => import('./about/about.module').then(m => m.AboutModule) }
];

En este ejemplo, el módulo AboutModule se carga solo cuando el usuario navega a la ruta 'about'.

Guardias de rutas

Las guardias de rutas permiten controlar el acceso a determinadas rutas en función de condiciones específicas. En Angular 18, se pueden definir guardias utilizando el CanActivate y otros interfaces. A continuación se muestra un ejemplo de cómo definir una guardia:

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(private router: Router) {}

  canActivate(): boolean {
    const isAuthenticated = // lógica de autenticación
    if (!isAuthenticated) {
      this.router.navigate(['/login']);
      return false;
    }
    return true;
  }
}

En el archivo de rutas, se puede aplicar esta guardia a una ruta específica:

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent, canActivate: [AuthGuard] }
];

Estas son algunas de las funcionalidades clave del enrutado y la navegación en Angular 18. Con una configuración adecuada, es posible crear aplicaciones web robustas y eficientes.