Angular- RouterModule: servicios de enrutamiento

RouterModule

El RouterModule en Angular es un módulo que proporciona servicios de enrutamiento en la aplicación. Permite la navegación entre diferentes vistas o componentes de la aplicación, define rutas y maneja la navegación del usuario. Facilita la creación de Single Page Applications (SPA), donde la aplicación carga una sola página HTML y actualiza dinámicamente el contenido según las interacciones del usuario.

Componentes de RouterModule en Angular v18

1. RouterModule: Módulo que contiene los servicios y directivas necesarios para la navegación y el enrutamiento en Angular.
2. Routes: Una interfaz que define un arreglo de rutas.
3. Router: Servicio que proporciona la navegación programática y permite manipular el estado de enrutamiento.
4. ActivatedRoute: Servicio que proporciona acceso a la información sobre una ruta asociada al componente que está cargado en el router outlet.
5. RouterLink: Directiva para enlazar rutas en las plantillas.
6. RouterOutlet: Directiva que actúa como un marcador de posición donde se cargarán los componentes asociados a las rutas.
7. Route Guards: Interfaces (CanActivate, CanDeactivate, Resolve, CanLoad, CanActivateChild) que proporcionan una manera de controlar el acceso a las rutas.

 Videotutoriales: 

1. Routing – Guard -  Angular (v18) https://youtu.be/oo5p4Q-zgh0
   
2. Rutas e Internacionalización (i18n): https://youtu.be/WldOyKV3p3Q
3. Guardianes y Almacenamiento Local y Sesión   https://youtu.be/Lumd-96Vba4
   
4. Angular Modules  https://youtu.be/VuEuc6guuxA?t=3485

 

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 rutas.

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: '', redirectTo: '/home', pathMatch: 'full' }
];

 

Router::

Servicio para navegación programática.

constructor(private router: Router) {}

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

 

ActivatedRoute::

• Proporciona 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.

 <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;
  }
}

 

Ejemplo de aplicación con RouterModule:

  Este ejemplo configura una aplicación básica con enrutamiento utilizando RouterModule. Incluye dos rutas (home y about) y usa el RouterOutlet para cargar los componentes correspondientes según la ruta activa. También demuestra el uso de RouterLink para la navegación entre las rutas.

Configuración del módulo::

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

 

Configuración de enrutamiento::

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

 

Componente Principal::

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

// home.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  template: ` <h1>Home Component</h1> `
})
export class HomeComponent {}

 

Componente About::

// about.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-about',
  template: ` <h1>About Component</h1> `
})
export class AboutComponent {}

------------------------------------

...