Angular 35: Fundamentos del Router de Angular
easy⏱ 5 mincourseangular
Routes: un arreglo simple que mapea rutas a componentes
Un arreglo Routes es simplemente datos — cada entrada es { path: 'about', component: AboutComponent }. Una ruta con cadena vacía (path: '') coincide con la URL raíz de la aplicación. No hay magia de enrutamiento basado en archivos aquí; el arreglo es la única fuente de verdad de qué se renderiza dónde.
export const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent },
];
provideRouter(routes): registrando el router en la app
En la configuración de arranque de una aplicación standalone, provideRouter(routes) se pasa a bootstrapApplication(AppComponent, { providers: [provideRouter(routes)] }) — es lo que convierte el arreglo simple de Routes en un servicio de router funcional que el resto de la app puede inyectar y al cual reaccionar.
// main.ts
bootstrapApplication(AppComponent, {
providers: [provideRouter(routes)],
});
RouterLink + router-outlet: navegación sin recargar la página
<a routerLink="/about">About</a> intercepta el click, actualiza la URL mediante la History API, e intercambia el componente que está actualmente renderizado dentro de <router-outlet /> por el que coincide con la nueva ruta — sin navegación de página completa, sin ida y vuelta al servidor.