¡Bienvenidos a este tutorial sobre rutas en Angular! 🌍 Si alguna vez has creado una aplicación web, seguramente sabes lo importante que es la navegación. En Angular, las rutas nos permiten navegar de una página a otra sin tener que recargar toda la página, lo que hace que la experiencia del usuario sea mucho más fluida. Hoy, vamos a explorar cómo funcionan las rutas en Angular y cómo podemos usarlas para navegar entre diferentes componentes, tanto con parámetros básicos como avanzados. ¡Vamos allá! 🚀

¿Qué son las Rutas en Angular? 🤔

Las rutas en Angular permiten definir las distintas "páginas" o "vistas" dentro de una aplicación de una sola página (SPA). En lugar de recargar toda la página cada vez que el usuario navega, Angular solo cambia el componente que se debe mostrar en función de la URL.

Configurar Rutas Básicas 🛣️

Para empezar, vamos a configurar algunas rutas básicas en nuestra aplicación Angular. Vamos a ver cómo hacerlo paso a paso.

Paso 1: Definir las rutas en app-routing.module.ts

Este es el archivo donde configuramos todas nuestras rutas. Cada ruta debe tener un path (la URL a la que queremos acceder) y un component (el componente que se debe mostrar cuando el usuario navega a esa URL).

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: '', component: HomeComponent }, // Página de inicio
  { path: 'about', component: AboutComponent } // Página de "Sobre nosotros"
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

En este ejemplo, hemos creado dos rutas:

  1. path: '' — La página de inicio, que es lo que se muestra cuando visitamos la raíz de la aplicación.
  2. path: 'about' — La página de "Sobre nosotros", que se accede con /about.

Paso 2: Usar el router-outlet

El siguiente paso es asegurarnos de que tenemos un lugar donde las rutas se rendericen en el DOM. Esto se hace usando la directiva router-outlet.

En nuestro app.component.html, agregamos lo siguiente:

Este es el espacio donde los componentes se mostrarán según la ruta seleccionada.

Navegación entre Rutas 🧭

Ahora que tenemos nuestras rutas configuradas, ¿cómo navegamos entre ellas? Angular tiene una directiva llamada routerLink, que nos permite crear enlaces para navegar entre las páginas.

routerLink="/">Inicio
 routerLink="/about">Sobre nosotros

Cada vez que el usuario haga clic en uno de estos enlaces, Angular cambiará la vista sin recargar la página.

Rutas con Parámetros 🔑

A veces necesitamos pasar información de una ruta a otra. Esto se puede hacer fácilmente con los parámetros de ruta.

Parámetros Básicos

Supongamos que tenemos una página de detalle de un producto. Queremos que la URL incluya el ID del producto para que podamos cargar los datos del producto correspondiente.

Paso 1: Definir la ruta con un parámetro 
const routes: Routes = [
  { path: 'product/:id', component: ProductDetailComponent }
];

Aquí, :id es un parámetro que representará el ID del producto en la URL. Por ejemplo, product/123 cargará el detalle del producto con el ID 123.

Paso 2: Acceder al parámetro en el componente

Dentro de ProductDetailComponent, podemos acceder al parámetro id de la siguiente manera:

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

@Component({
  selector: 'app-product-detail',
  templateUrl: './product-detail.component.html',
  styleUrls: ['./product-detail.component.css']
})
export class ProductDetailComponent implements OnInit {
  productId: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.productId = this.route.snapshot.paramMap.get('id');
  }
}

En este caso, this.route.snapshot.paramMap.get('id') nos da el valor del parámetro id que se pasa en la URL.

Rutas Avanzadas con Query Parameters 🔍

Los Query Parameters nos permiten pasar información adicional en la URL de una manera más flexible. A diferencia de los parámetros de ruta, estos no forman parte de la estructura principal de la URL.

Paso 1: Definir la ruta con query parameters

Supongamos que queremos pasar un filtro de búsqueda como parámetro. La URL podría verse así: products?category=electronics.

const routes: Routes = [
  { path: 'products', component: ProductListComponent }
];

Paso 2: Acceder a los query parameters

Para acceder a los query parameters, usamos el ActivatedRoute de manera similar a como accedemos a los parámetros de ruta, pero en este caso, debemos usar queryParamMap:

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

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css']
})
export class ProductListComponent implements OnInit {
  category: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.route.queryParamMap.subscribe(params => {
      this.category = params.get('category');
    });
  }
}

Redirección y Rutas Protegidas 🚨

Las rutas también pueden redirigir automáticamente a los usuarios si no tienen acceso a ciertas páginas o si no están autenticados. Para ello, usamos las guardias de ruta (CanActivate, CanLoad).

Por ejemplo, si queremos proteger una página de administrador:

const routes: Routes = [
  { path: 'admin', component: AdminComponent, canActivate: [AuthGuard] }
];

El AuthGuard verifica si el usuario está autenticado. Si no lo está, lo redirige a la página de inicio de sesión.

Conclusión 🎉

Las rutas son un componente clave para cualquier aplicación web moderna. Nos permiten navegar entre diferentes vistas sin recargar toda la página, hacer aplicaciones más rápidas y crear experiencias más fluidas. Y ahora, con los parámetros de ruta y los query parameters, puedes hacer que tus rutas sean aún más dinámicas y flexibles. ¡Ahora es tu turno de experimentar y crear aplicaciones con rutas en Angular!