Configurar rutas en Angular

Esta lección presenta el enrutamiento de Angular, una forma de navegar entre vistas y gestionar las URL de la aplicación.

¿Qué es el enrutamiento?

El enrutamiento le ayuda a navegar entre diferentes componentes o páginas de la aplicación de Angular según la URL.

Configurar el módulo de enrutamiento

Cree un módulo de enrutamiento al iniciar el proyecto o más adelante mediante Angular CLI:

ng generate module app-routing --flat --module=app

Definir rutas

Las rutas se definen como una matriz de rutas vinculadas a componentes:

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

Salida del enrutador

Use <router-outlet></router-outlet> para representar dinámicamente los componentes coincidentes según la ruta.

<router-outlet></router-outlet>

Navegar con routerLink

Navegue entre vistas mediante la directiva routerLink:

<a routerLink="/home">Home</a>

Navegar mediante programación

También puede navegar mediante programación usando el servicio Router:

this.router.navigate(['/home']);

Rutas comodín

Gestione las rutas no definidas mediante rutas comodín para mostrar una página 404 personalizada:

{ path: '**', component: PageNotFoundComponent }

Resumen

Ahora comprende los conceptos básicos del enrutamiento y puede configurar rutas eficazmente en aplicaciones de Angular. ¡Muy bien!