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.