Routing básico con Angular

Buenas! Hoy traigo un POST sobre la gestión básica del routing de Angular.

¿Qué es el Routing en Angular y cómo configurarlo paso a paso?

El routing en Angular es la forma que tiene el framework para gestionar las rutas de acceso a los recursos que se le ofrecen al usuario. Por ejemplo:

http://localhost:4200/ -> ruta raíz

http://127.0.0.1:4200/OptimizingImagesComponent -> Esta sería otra ruta.

¿Para qué nos sirve el routing en Angular?

Angular puede usarse para hacer SPA Simple Page Applications, en estas SPA, lo que hace Angular es primero cargar un Componente. Para permitir que el usuario pueda acceder a otros grupos de componentes o llamados de forma coloquial: páginas, Angular usa el routing.

¿Cómo configuro el routing en Angular?

Para configurar el routing en Angular, a nivel «general», se necesitan 3 archivos:

• app.routes.ts
• app.config.ts
• app.component.html

Vamos paso a paso:

1. Definir las rutas.
   • Para definir las rutas, lo que debemos hacer es editar el archivo app.routes.ts y añadir en él, las rutas a las que queremos acceder utilizando el Routes que nos proporciona Angular:

app.routes.ts

import {Routes} from '@angular/router';

export const routes: Routes = [     { path: 'optimizingImages', component: OptimizingImagesComponent}];

app.config.ts, en este archivo debemos establecer la configuración de las rutas a través del provideRouter que Angular nos proporciona.

import {provideRouter} from '@angular/router';
import {routes} from './app.routes'
export const appConfig: ApplicationConfig = {   providers: [provideRouter(routes)],
};

app.component.html

<router-outlet />

Con esto, ya podemos acceder a la ruta de optimizingImages, que carga el componente OptimizingImagesComponent. Espero que os haya servido el tutorial.