Enrutamiento en Angular

Resumen

El enrutamiento en Angular permite la navegación entre diferentes vistas o componentes en una aplicación de una sola página (SPA). Esto se logra mediante la configuración de rutas que mapean URLs específicas a componentes específicos.

Tabla de Enrutamiento en Angular

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

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

<router-outlet></router-outlet>

constructor(private router: Router) { } this.router.navigate(['/home']);

const routes: Routes = [ { path: 'detalle/:id', component: DetalleComponent } ];

const routes: Routes = [ { path: '', redirectTo: '/inicio', pathMatch: 'full' } ];

const routes: Routes = [ { path: 'padre', component: PadreComponent, children: [{ path: 'hijo', component: HijoComponent }] } ];

Rutas Básicas

Define rutas básicas que mapean URLs a componentes.

Sintaxis Básica:

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

Ejemplo Básico:

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

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

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

Router Module

Configura el módulo de enrutamiento para la aplicación.

Sintaxis Básica:

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

Ejemplo Básico:

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

Router Outlet

Define el punto de anclaje en el HTML donde las vistas se cargarán dinámicamente.

Sintaxis Básica:

<router-outlet></router-outlet>

Ejemplo Básico:

<router-outlet></router-outlet>

Navegación de Rutas

Permite la navegación programática a diferentes rutas.

Sintaxis Básica:

this.router.navigate(['/ruta']);

Ejemplo Básico:

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

@Component({
  selector: 'app-navegar',
  template: `<button (click)="irAHome()">Ir a Home</button>`
})
export class NavegarComponent {
  constructor(private router: Router) { }

  irAHome() {
    this.router.navigate(['/home']);
  }
}

Rutas con Parámetros

Define rutas que aceptan parámetros.

Sintaxis Básica:

{ path: 'detalle/:id', component: DetalleComponent }

Ejemplo Básico:

const routes: Routes = [
  { path: 'detalle/:id', component: DetalleComponent }
];

Redirección de Rutas

Redirige una URL a otra.

Sintaxis Básica:

{ path: '', redirectTo: '/inicio', pathMatch: 'full' }

Ejemplo Básico:

const routes: Routes = [
  { path: '', redirectTo: '/inicio', pathMatch: 'full' }
];

Rutas Anidadas

Define rutas dentro de otras rutas.

Sintaxis Básica:

{ path: 'padre', component: PadreComponent, children: [...] }

Ejemplo Básico:

const routes: Routes = [
  {
    path: 'padre',
    component: PadreComponent,
    children: [
      { path: 'hijo', component: HijoComponent }
    ]
  }
];