Enrutamiento (Angular Router)

El enrutamiento en Angular es un mecanismo que gestiona la navegación entre diferentes componentes dentro de tu aplicación. Permite mostrar diferentes vistas basadas en la URL en el navegador, creando la ilusión de múltiples páginas, pero sin realizar recargas completas del navegador, lo que mejora la experiencia del usuario.

Componentes clave del Enrutamiento en Angular:

1. RouterModule: Es el módulo principal que proporciona los servicios y directivas para el enrutamiento.
2. Routes: Es un array que define las rutas de tu aplicación. Cada ruta asocia una URL (path) con un componente.
3. routerLink: Es una directiva que se utiliza en los templates para crear enlaces de navegación.
4. router-outlet: Es una directiva que se utiliza en los templates para crear enlaces de navegación.

Configuración del Enrutamiento:

El enrutamiento se configura típicamente en un módulo separado llamado AppRoutingModule

TypeScript

        
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { IntroduccionComponent } from './introduccion/introduccion.component';
import { EntornoComponent } from './entorno/entorno.component';
import { ComponentesComponent } from './componentes/componentes.component';
// Importa todos los componentes que usarás en las rutas

const routes: Routes = [
{ path: 'introduccion', component: IntroduccionComponent }, // Ruta para la introducción
{ path: 'entorno', component: EntornoComponent }, // Ruta para el entorno
{ path: 'componentes', component: ComponentesComponent },
// ... define más rutas para otros componentes
{ path: '', redirectTo: '/introduccion', pathMatch: 'full' }, // Ruta por defecto (importante)
{ path: '**', redirectTo: '/introduccion' } // Ruta comodín (para rutas no encontradas)
];

@NgModule({
imports: [RouterModule.forRoot(routes)], // Importante: forRoot para el módulo principal
exports: [RouterModule]
})
export class AppRoutingModule { }
        
    

Uso de routerLink en los templates:

Para crear enlaces de navegación, se utiliza la directiva routerLink

HTML

        
        <nav>
            <a routerLink="/introduccion">Introducción</a>
            <a routerLink="/entorno">Entorno</a>
            <a routerLink="/componentes">Componentes</a>
        </nav>
        
    

El valor que se le pasa a routerLink debe coincidir con el path definido en el array routes

Uso de router-outlet:

La directiva <router-outlet> marca el lugar en el template donde se mostrará el componente correspondiente a la ruta actual:

HTML

        
        <div>
            <router-outlet></router-outlet>
        </div>
        
    

Importar AppRoutingModule en AppModule:

Finalmente, debes importar AppRoutingModule en el array imports de AppModule:

TypeScript

        
        // hijo.component.ts
        import { AppRoutingModule  } from './app-routing.module';

        @NgModule({
        imports: [
            // ... otros módulos
            AppRoutingModule // Importa el módulo de enrutamiento
        ],
        // ...
        })