Ejemplo de cómo realizar el enrutado en una aplicación Angular

Una vez ya tienes los Componentes de Angular creados, el siguiente punto a programar en tu proyecto son las rutas que permita al usuario navegar y obtener la información que contienen los diferentes objetos. El proyecto https://github.com/al118345/Ejemplo_routing_angular contiene un ejemplo de angular web con todas los implementaciones analizadas en este artículo o el siguiente video explicativo:

1. Añade Angular routing al proyecto

Al crear tu proyecto, Angular pregunta

? Would you like to add Angular routing? (y/N)

Contesta y. Automáticamente, Angular ha creado un fichero llamado app-routing.module.ts con contenido similar a este:

Además, ha añadido una referencia al fichero en el documento app-module.ts. En el caso que no lo tengas, lo puedes crear manualmente y añadirlo a tu proyecto.

2. Explicación de cómo funciona

Básicamente es un fichero json donde las keys marcan las diferentes funcionalidades.

La primera funcionalidad es el path que contiene la cadena con la dirección que se debe introducir para invocar el componente. El siguiente campo es el component y básicamente identifica el objeto que necesitamos para la dirección indicada.

A continuación mostramos el siguiente ejemplo extraído del proyecto https://github.com/al118345/Ejemplo_routing_angular

Realmente tenemos un fichero pequeño con muchas funcionalidades que voy a detallar a continuación línea a línea. Importante: el orden de las líneas es importante.

{path: 'home', component: HomeComponent} Considero que HomeComponent es la vista inicial del programa y, por lo tanto, será la primera en mostrarse al usuario. Cuando la ruta del proyecto sea /home abriremos HomeComponent.

{path: '', component: HomeComponent} En caso de únicamente escribir el dominio mostraremos HomeComponent, la pantalla de inicio del proyecto. Esta linea la recomendamos situar en la penúltima posición.

{path: '**', component: HomeComponent} En caso de escribir cualquier dirección que no este contemplada en el fichero por las líneas anteriores, mostraremos HomeComponent. Importante, esta linea debe estar la última del fichero. Es la última opción.

{path: 'vista1', component: VistaSecundariaComponent} En caso de escribir la dirección vista1 en la ruta del dominio automáticamente mostraremos VistaSecundariaComponent.

{path: 'vista1/:id', component: VistaSecundariaComponent} En caso de escribir la dirección vista1/:id mostraremos VistaSecundariaComponent aunque con una diferencia notable.
Cómo os habréis dado cuenta, se trata de una ruta compuesta por una parte fija y una parte definida cómo id. Esta parte id puede ser cualquier valor y, además, sera proporcionado como parámetro get al componente.
A continuación, os mostraremos cómo podéis obtener este valor desde este objeto:
Simplemente con ActivatedRoute nos permite obtener el parámetro id cómo si fuera un parámetro get de forma muy sencilla. Si quieres ver en acción este componente visita el proyecto https://github.com/al118345/Ejemplo_routing_angular.

{path: 'vista2', component: VistaTerceariaComponent, canActivate: [UsersGuard]} Este caso es el más complejo ya que usamos canActivate: [UsersGuard]. Esta funcionalidad sirve para activar un sistema de seguridad sobre la ruta, es decir, cada vez que tecleamos una ruta vista2 en el proyecto comprobará si se cumple una condición. La implementación viene marcada por la función UsersGuard que explicaremos en el siguiente punto del artículo.

3. Implementar UsersGuard

Hay proyectos que, para acceder a ciertas vistas, tienes que tener ciertos permisos. Para implementar este sistema de seguridad podemos utilizar guard a través del siguiente comando:

ng g guard guard/user

La parte guard/user corresponde al nombre y localización del objeto que vamos a crear, es decir, la puedes modificar. Una vez ejecutado os aparecerán 4 opciones, seleccionad la primera CanActivate.

Al final, con este comando hemos creado el fichero users.guard.ts y lo hemos modificado obteniendo el siguiente resultado:

En este caso, simplemente comprobamos que se ha almacenado la palabra currentUser con valor test. En caso afirmativo se devuelve true y, en caso negativo, devolvemos false y se redirecciona a otra vista.

Post data: Para almacenar información puedes utilizar localStorage de la siguiente forma localStorage.setItem('currentUser', 'test');

4. Cómo cambia esto en Angular moderno

En proyectos Angular actuales, sobre todo si usan componentes standalone, el fichero de rutas suele ser app.routes.ts en lugar de app-routing.module.ts. La idea es la misma: cada ruta conecta un fragmento de URL con el componente que debe mostrarse.

La ventaja práctica es que las rutas pueden cargar componentes standalone con loadComponent. Así el bundle inicial pesa menos y el componente solo se descarga cuando el usuario abre esa página.

5. Carga diferida de un componente standalone

El siguiente ejemplo carga el componente del artículo únicamente cuando el usuario visita blog/angular-routing. Este patrón es perfecto para blogs, documentación y zonas de administración con muchas pantallas independientes.

6. Guards funcionales

Angular moderno también permite guards funcionales. Son más breves que los guards basados en clases y funcionan bien con inject(), lo que facilita mantener redirecciones y comprobaciones de autenticación cerca de la ruta.

Lista práctica para revisar rutas

Coloca las rutas específicas antes que las genéricas.
Deja la ruta wildcard al final.
Usa redirects para URLs antiguas en lugar de borrarlas.
Prefiere loadComponent para páginas que no hacen falta en la primera pantalla.
Añade canonical y alternate URLs cuando la ruta tenga valor SEO.