La configuración de rutas en Angular permite definir cómo los usuarios navegan entre diferentes vistas o componentes en una aplicación. Esto se realiza mediante la definición de rutas que asocian URLs con componentes específicos. La configuración de rutas es crucial para crear aplicaciones SPA (Single Page Applications) que cargan una sola página HTML y actualizan dinámicamente el contenido sin recargar la página completa.
Componentes de Configuración de Rutas en Angular v18
- RouterModule: Proporciona los servicios de enrutamiento necesarios para la navegación en la aplicación.
- Routes: Define un arreglo de objetos de ruta, cada uno especificando una asociación entre una URL y un componente.
- Router: Servicio que permite la navegación programática y el manejo del estado de enrutamiento.
- ActivatedRoute: Proporciona acceso a la información sobre una ruta asociada al componente cargado en el
RouterOutlet. - RouterLink: Directiva para enlazar rutas en las plantillas.
- RouterOutlet: Directiva que actúa como un marcador de posición para los componentes cargados.
- Route Guards: Proporcionan una manera de controlar el acceso a las rutas (por ejemplo,
CanActivate,CanDeactivate,Resolve,CanLoad,CanActivateChild).
lazy-loaded route: https://angular.dev/guide/ngmodules/lazy-loading
Videotutoriales:
- Curso Angular 2023 #8 Rutas En Angular: https://youtu.be/jKabdJTNe4I
- Routing – Guard - Angular (v18) https://youtu.be/oo5p4Q-zgh0
- Enrutamiento https://youtu.be/DiZ08Tzihq8 (Coders Free)
- Parámetros por rutas https://youtu.be/fCFsE4nL6Z0 (Coders Free)
- Rutas hijas (Atributo children) https://youtu.be/JZMHsXdIZC4 (Coders Free)
- Creating a Route Module File https://youtu.be/4fP8YR_BG4Q
- Rutas e Internacionalización (i18n): https://youtu.be/WldOyKV3p3Q
- Guardianes y Almacenamiento Local y Sesión https://youtu.be/Lumd-96Vba4
- Angular Basics - Enrutamiento (Routing) https://youtu.be/nC-do8ceLWY
- Routing I https://youtu.be/BhRpBIhRWbY (Píldoras informáticas)
- Routing II - https://youtu.be/nDsyhYQQssk
- Routing III- https://youtu.be/kME1QydQ9CA
- Routing IV- https://youtu.be/23EX5-e2rjs
- Firebase https://youtu.be/VKWLM70o5Nc (Píldoras informáticas)
Interpretación de cada componente
RouterModule:
- Importa y configura el enrutamiento en la aplicación.
import { RouterModule } from '@angular/router';
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
Routes:
- Define un arreglo de objetos de ruta.
const routes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: '', redirectTo: '/home', pathMatch: 'full' }
];
Router:
- Servicio para la navegación programática.
constructor(private router: Router) {}
navigateToAbout() {
this.router.navigate(['/about']);
}
ActivatedRoute:
- Proporciona acceso a la información sobre la ruta actual.
constructor(private route: ActivatedRoute) {}
ngOnInit() {
this.route.params.subscribe(params => {
console.log(params['id']);
});
}
RouterLink:
- Directiva para enlazar rutas en las plantillas.
<a routerLink="/home">Home</a>
RouterOutlet:
- Directiva que actúa como marcador de posición para los componentes cargados.
<router-outlet></router-outlet>
...
Route Guards:
- Controlan el acceso a las rutas.
import { CanActivate } from '@angular/router';
@Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate {
canActivate(): boolean {
// Lógica de autenticación
return true;
}
}
Configuración de Rutas
Este conjunto de pasos y ejemplos proporciona una configuración completa de enrutamiento en Angular v18
Configuración del Módulo
- Crea y configura el módulo de enrutamiento en la aplicación
// app-routing.module.ts
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: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: '', redirectTo: '/home', pathMatch: 'full' }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
Configuración del Módulo Principal
- Importa el módulo de enrutamiento en el módulo principal de la aplicación.
// 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';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
@NgModule({
declarations: [AppComponent, HomeComponent, AboutComponent],
imports: [BrowserModule, AppRoutingModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
Componente Principal
- Configura el componente principal para usar el RouterOutlet y RouterLink para la navegación.
// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<nav>
<a routerLink="/home">Home</a>
<a routerLink="/about">About</a>
</nav>
<router-outlet></router-outlet>
`
})
export class AppComponent {}
Componente Home
- Define el componente HomeComponent.
// home.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-home',
template: `<h1>Home Component</h1>`
})
export class HomeComponent {}
Componente About
- Define el componente
AboutComponent.
// about.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-about',
template: `About Component
`
})
export class AboutComponent {}
...
Configuración de Rutas con Parámetros y Guardias
Rutas con Parámetros
- Define rutas que aceptan parámetros.
// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ItemDetailComponent } from './item-detail/item-detail.component';
const routes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: 'item/:id', component: ItemDetailComponent },
{ path: '', redirectTo: '/home', pathMatch: 'full' }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
Componente con Parámetros
- Define un componente que utilice parámetros de ruta.
// item-detail.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-item-detail',
template: `<h1>Item Detail: {{ id }}</h1>`
})
export class ItemDetailComponent implements OnInit {
id: string;
constructor(private route: ActivatedRoute) {}
ngOnInit() {
this.route.params.subscribe(params => {
this.id = params['id'];
});
}
}
Uso de Guardia de Ruta
- Define una guardia para proteger rutas específicas.
// auth.guard.ts
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 = false; // Lógica de autenticación
if (!isAuthenticated) {
this.router.navigate(['/home']);
return false;
}
return true;
}
}
// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ItemDetailComponent } from './item-detail/item-detail.component';
import { AuthGuard } from './auth.guard';
const routes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent, canActivate: [AuthGuard] },
{ path: 'item/:id', component: ItemDetailComponent },
{ path: '', redirectTo: '/home', pathMatch: 'full' }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
--------------
mmmm