6.Enrutamiento

Objetivo

Aprender a configurar el enrutamiento en Angular para navegar entre diferentes vistas.

Configurar el Enrutamiento

Abre src/app/app-routing.module.ts y agrega las rutas para tus componentes:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MyComponent } from './my-component/my-component.component';

const routes.Routes = [
  { path.'', redirectTo.'/my-component', pathMatch.'full' },
  { path.'my-component', component.MyComponent }
];

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

Usar el Enrutamiento en la Aplicación

Abre src/app/app.component.html y agrega los enlaces de navegación:

<nav>
  <a routerLink="/my-component">Mi Componente</a>
</nav>
<router-outlet></router-outlet>

Conceptos Básicos

El enrutamiento en Angular permite navegar entre diferentes vistas o componentes. Utiliza el módulo RouterModule para configurar las rutas y el componente router-outlet para mostrar la vista correspondiente.

Ejercicio

Configura el enrutamiento en tu proyecto Angular para navegar entre diferentes vistas. Verifica que la navegación funcione correctamente en el navegador.