Rutas de Angular

En las aplicaciones de Angular tendremos solamente una página que es el index.html que será el encargado de renderizar todos datos al usuario cambiando el componente que se requiere en cada momento.

Por esto motivo se necesita utilizar Routing, ya que será el encargado de mostrarnos en cada momento lo que queremos renderizar dependiendo la URL que visitemos.

Tenemos varias maneras de crear un fichero de rutas:

1. Al crear el proyecto agregándole –routing: ng new proyecto –routing, con este comando nos generará un Modulo llamado app-routing.module.ts que se encuentra en «proyecto/src/app», aquí podremos configurar nuestras rutas.
2. Si cuando creamos el proyecto no le decimos que queremos rutas, las podremos crear más delante de forma manual. Nos dirigimos a: «proyecto/src/app» y creamos un fichero que se llame «app.routing.ts».

Configurar rutas

Si al crear el proyecto le decimos que queremos el sistema de rutas, nos creará un modulo donde tendremos la estructura básica creada para empezar a agregar las rutas que nos sean necesarias.

En nuestro caso, vamos a crear el fichero desde cero y no será un Modulo.

• Lo primero que tendremos que hacer nada más crear el fichero será importar RouterModule y Routes desde @angular/router a nuestro fichero:
  • import { RouterModule, Routes } from '@angular/router';
• Creamos una constante que será un array donde guardaremos todas las rutas que necesitemos en nuestro proyecto. En nuestro caso vamos a llamarla routes que SIEMPRE será de tipo Routes:
  • const routes: Routes = [];
• Tendremos que exportar una variable pasándole como parámetro nuestro array de rutas:
  • export const routing = RouterModule.forRoot(routes);
• Ahora tendremos que dirigirnos al fichero «app.module.ts» para importar la variable que hemos exportado anteriormente, además tendremos que declararla en la sección de imports:
  • import { routing } from './app.routing';
  • Imports: [BrowserModule, routing],
• Por último, nos dirigimos a «app.component.html» y agregamos la directiva que será la encargada de renderizar el contenido que devuelvan cada una de las rutas:
  • <router-outlet></router-outlet>

Crear rutas

Todas las rutas que creemos serán objetos por lo que deberán ir entre { } y tendremos que definir ciertas propiedades en las mismas algunas de ellas son:

• Path: Será la URL que introducimos en el navegador.
• Component: El componente que usará para renderizar el contenido. Debemos importar el component en la parte superior del fichero.
• PathMatch: Le decimos que podremos tener la URL, tendremos dos opciones:
  • Full: Será la URL completa.
  • Prefix: Podremos tener partes adicionales en URL que no son parte del path.
• RedirectTo: Para redireccionar a otra URL diferente.
• Children: Para definir que vamos a tener rutas hijas.

Tenemos más propiedades que se pueden utilizar a la hora de crear la ruta.

Rutas estáticas

URLs que siempre van a ser fijas en la que solo especificamos que path nos va a llegar por URL y que componente vamos a utilizar:

• { path: 'enlace', component: EnlaceComponent },

Siempre deberemos tener una ruta que será el index o página principal como por ejemplo:

• { path: '', component: InicioComponent },

Rutas con parámetros

Es muy común necesitar URL que sean dinámicas en la que solo cambia el parámetro que recibe por URL, por ejemplo para pasar un ID:

• { path: 'parametros/:id', component: ParametrosComponent },

En este caso, le vamos a pasar un ID por la URL, si tuviéramos una base de datos, podríamos renderizar la información del usuario ya que tendríamos su ID recogida en la URL.

Para que funcione correctamente, tendríamos que seguir los siguientes pasos:

• Primero de todo en el Component que utiliza nuestro path tendremos que importar: ActivatedRoute de @angular/router
  • import { ActivatedRoute } from '@angular/router';
• En el constructor inyectamos el ActivatedRoute para recuperar el parámetro que nos llega por la URL:
  • constructor(activeRoute: ActivatedRoute) {
• En el propio constructor podemos capturar mediante subscribe que parámetro nos esta llegando:

activeRoute.params.subscribe((params) => {

            this.id = params['id'];

• De esta manera guardamos en una variable el parámetro que nos llega por la URL y ya podríamos hacer lo que necesitemos para mostrarlo en nuestro HTML.
• params[‘id], hace referencia a como hemos llamado el parámetro nuestro path ‘parametros/:id’.

Rutas anidadas/hijas

Estas rutas nos sirven para mostrar varios componentes con una sola ruta.

Esto funcionará teniendo un componente padre que tendrá una estructura HTML y al que tendremos que añadir la directiva <router-outlet></router-outlet> ya que será aquí, donde mostrará el contenido de las rutas hijas. Como cada ruta tiene su propio componente y su propio HTML es necesario hacer uso de dicha directiva, porque en caso contrario, no renderizaría el contenido de las hijas en ningún lado.

Para definirlas en nuestro fichero de rutas (app.routing.ts) lo haríamos de la siguiente manera:

    {

        path: 'anidadas',

        component: PrincipalComponent,

        children: [

            { path: ‘primerhijo', component: PrimerHijoComponent },

            { path: 'segundohijo', component: SegundoHijoComponent },

        ],

    },

A la ruta padre, le decimos con children que va a tener hijos, como puede tener tantos hijos como queramos tenemos que pasarle todos los parámetros dentro de un array.

En este caso, nuestra ruta padre será anidadas con su respectivo componente y sus dos hijas:

• primerhijo: Nos quedaría una URL de la siguiente manera: localhost:4200/anidadas/primerhijo
• segundohijo: Aquí nos encontraríamos el mismo tipo de ruta: localhost:4200/anidadas/segundohijo

Rutas WildCards

Debemos contemplar que el usuario pueda meter una URL manualmente o que por algún motivo tengamos una URL en la navegación que no esta definida en las rutas tendremos que mostrar una página de error para que el usuario sepa que está pasando en todo momento.

Esto lo podemos hacer mediante los WildCards, es un Path especial que mapea cualquier URL que no este definida en las rutas. La forma de especificarlo sería:

• { path: 'error', component: ErrorComponent },

• { path: '**', redirectTo: 'error' },

En este caso estamos haciendo que cuando reciba una URL que no esta registrada en nuestro app.routing.ts nos haga una dirección a  la URL: localhost:4200/error que nos mostrará una página de error definida en el componente ErrorComponent.

El WildCard debe ser la última URL que tengamos registrada en nuestro fichero de rutas ya que Angular lee las rutas de arriba hacia abajo, por lo que si pusiéramos la ruta de Wildcard la primera, cualquier ruta que introdujéramos en nuestro navegador nos llevaría a la página de error.

Autor: Víctor Ramón Pardo
Curso: Desarrollo Web Full Stack, MultiCloud y Multiplataforma
Centro: Tajamar
Año académico: 2021-2022
Código: https://github.com/VictorRamonPardo/AngularRutas