TypeScript / Angular – Route

Bienvenidos sean a este post, hoy veremos un concepto muy difundido en lenguajes web.

Pero que es route? El route, ruteo, enrutamiento, routing o como lo puedan conocer es la habilidad de navegar de un componente a otro en la aplicacion. En Aplicaciones de Pagina Simple (SPA por sus siglas en ingles) solo algunas partes de la pagina son actualizadas en las solicitudes del usuario. El router de Angular nos da la posibilidad de que los usuarios puedan declarar rutas y especificar cuales componentes pueden ser mostrados en pantalla si las rutas son solicitadas por la aplicacion. Para poder ver como aplicarr el ruteo usaremos el proyecto que creamos, sino lo poseen les dejo un link para descargarlo:

Extraigan el directorio en el PC y ya esta listo para ser utilizado. Nuestro primero paso sera ingresar en el directorio y aqui ejecutaremos el siguiente comando:

$ ng generate component detalles --inline-template --skip-tests

Este nuevo componente sera para los detalles de cada hogar. Nuestro siguiente paso sera ir a main.ts en el directorio src, al inicio agregaremos estas dos lineas:

import { provideRouter }  from '@angular/router';
import configRuta from './app/rutas';

Primero importaremos el proveedor de ruteo, esto lo haremos desde la libreria encargada de esto. Lo siguiente sera la importacion de las rutas que usaremos aunque por el momento no existe pero muy pronto lo crearemos. Nuestro siguiente paso sera modificar el bloque de bootstrapApplication de la siguiente manera:

bootstrapApplication(AppComponent,
{
  providers: [
        provideRouter(configRuta)
  ]
}
).catch((err) => console.error(err));

Aqui proveeremos un objeto llamado providers donde tendremos las rutas que estableceremos en el objeto que aun no existe. Nuestro siguiente paso sera ir a app.component.ts en el directorio src/app. Lo primero que haremos sera buscar la siguiente linea:

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

Y la modificaremos de la siguiente manera:

import { RouterModule, RouterOutlet } from '@angular/router';

En esta modificacion incorporamos un nuevo modulo de enrutamiento, lo siguiente sera modificar la propiedad imports de la siguiente manera:

imports: [ RouterModule, HogarComponent ],

Cambiamos el enrutador viejo por el nuevo, nuestra siguiente modificacion sera en la propiedad template. La cual modificaremos de la siguiente manera:

  template: `
        <main>
          <a [routerLink]="['/']">
          <header class="nombre-marca">
            <img class="logo-marca" src="/assets/logo.png" alt="logo"
                aria-hidden="true">
          </header>
          </a>
          <section class="contenido">
            <router-outlet></router-outlet>
          </section>
        </main>`,

La primera modificacion es el agregado de un link al encabezado para que vayamos al raiz de nuestra pagina y la otra fue cambiar a app-hogar por router-outlet. Si tienen la aplicacion corriendo en este momento mostrara un error pero ahora lo solucionaremos. Nuestro siguiente paso sera crear en el directorio app un archivo con el nombre de rutas.ts y le agregaremos el siguiente codigo:

app/rutas.ts

import { Routes } from '@angular/router';
import { HogarComponent } from './hogar/hogar.component';
import { DetallesComponent } from './detalles/detalles.component';

const configRuta: Routes = [
  {
        path: '',
        component: HogarComponent,
        title: 'Pagina Hogar'
  },
  {
        path: 'detalles/:id',
        component: DetallesComponent,
        title: 'Detalles Hogar'
  }
];

export default configRuta;

Primero importaremos el tipo Routes desde el modulo router. Lo siguiente sera las clases de los componentes que tenemos, el primero es de Hogar y el segundo es Detalles que creamos al inicio. Lo siguiente es crear la constante que contendra nuestras rutas, la que hemos importado desde main.ts. Esta contiene dos rutas: la primera es para ir a la pagina de hogares y la segunda sera para ver los detalles de cada una. En ambos casos tenemos tres propiedades que son el path de cada uno, el componente que usaremos y por ultimo un titulo para identificarlo. Con esto tenemos la base de como rutear a un lugar especifico pero sin implementar del todo. Para ello primero iremos a ubicacion-viviendas.component.ts en el directorio ubicacion-viviendas y modificaremos la propiedad template de la siguiente manera:

  template: `
    <section class="listado">
        <img class="listado-foto" [src]="ubicacionViviendas.foto"
                alt="Foto del exterior de {{ubicacionViviendas.nombre}}">
        <h2 class="listado-top">{{ ubicacionViviendas.nombre }}</h2>
        <p class="listado-ubicacion">
          {{ubicacionViviendas.ciudad}}, {{ubicacionViviendas.pcia}}
        </p>
        <a [routerLink]="['/detalles', ubicacionViviendas.id]">
                Mostrar Mas</a>
    </section>
  `,

En realidad no hicimos un gran cambio solamente agregamos un link con routerLink para ir a la direccion de detalles y le pasamos el id para buscarlo, y en este mostraremos un mensaje para mostrar mas, el resto sigue de la misma forma. Si tienen el servidor corriendo notaran que devolvio un error, y si lo prueban notificara que no funciona porque no encuentra a routerLink. Para solucionarlo debemos hacer dos modificaciones, la primera sera agregar la siguiente linea al inicio del mismo archivo:

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

Este importara todos los elementos necesarios para el ruteo pero todavia nos falta uno mas, para ello deben modificar a la propiedad imports en @Component de la siguiente manera:

imports: [ CommonModule, RouterModule ],

Con esto importaremos todo lo necesario para el ruteo en nuestro componente. Si prueban ahora deberia estar funcionando nuevamente y debe aparecer un link que nos redirecciona a este nuevo componente pero no hace nada mas. Para ello debemos irnos a detalles.component.ts y modificaremos el codigo actual de la siguiente manera:

import { Component, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ActivatedRoute } from '@angular/router';
import { ViviendasService } from '../viviendas.service';
import { Ubicacionviviendas }  from '../ubicacionviviendas';

@Component({
  selector: 'app-detalles',
  standalone: true,
  imports: [],
  template: `
    <article>
        <img class="listado-foto" [src]="ubicacionViviendas?.foto"
                alt="Foto del exterior de {{ubicacionViviendas?.nombre}}">
        <section class="listado-descripcion">
          <h2 class="listado-top">{{ ubicacionViviendas?.nombre }}</h2>
          <p class="listado-ubicacion">
            {{ubicacionViviendas?.ciudad}}, {{ubicacionViviendas?.pcia}}
          </p>
        </section>
        <section class="listado-caract">
          <h2 class="listado-top">Acerca de esta vivienda</h2>
          <ul>
                <li>Posse Wi-Fi: {{ubicacionViviendas?.wifi}}</li>
          </ul>
        </section>
     </article>
  `,
  styleUrl: './detalles.component.css'
})
export class DetallesComponent {

  route: ActivatedRoute = inject(ActivatedRoute);
  servicioVivienda = inject(ViviendasService);
  ubicacionViviendas: Ubicacionviviendas | undefined;

  constructor() {
        const ubicacionVivId = Number(this.route.snapshot.params['id']);
        this.ubicacionViviendas = this.servicioVivienda
                        .getUbicacionPorId(ubicacionVivId);
  }
}

Lo primero que haremos sera importar todos los modulos necesarios. Entre los mas destacados son inject que es para insertar un servicio, ActivatedRoute para saber cual es la ruta que esta activa o usada, luego el servicio de las viviendas y la interfaz para tener el tipo que intercambiaremos para cada vivienda. El siguiente cambio es en la propiedad template. En este caso tenemos simplemente todos los datos de cada vivienda, los cuales obtendremos mediante un objeto llamado ubicacionViviendas y todos tienen el operador opcional para poder recibir valores de tipo undefined o null sin «crashear» la aplicacion. En este caso no solo tendremos los datos anteriores sino que tambien al que no utilizamos anteriormente como es wi-fi. Por ultimo, tenemos a nuestra clase que exportaremos. En esta definiremos una propiedad llamada route que sera del tipo ActivatedRoute y contendra el resultado de inyectar a este clase. Esta sera basicamente la que contendra cual es nuestra ruta, luego inyectamos el servicio de ViviendasService en un objeto y la ultima propiedad sera para tener al tipo de la interfaz Ubicacionviviendas. Aunque este ultimo puede ser undefined.

Luego de esto tenemos al constructor, donde primero definira una constante que contendra al id de la vivienda seleccionada, para ello utiliza a la ruta y con snapshot toma la propiedad id y mediante Number lo convierte en numero. Luego usaremos a ubicacionViviendas para almacenar el objeto con todos los datos de la vivienda y para ello usaremos el metodo getUbicacionPorId de esta interfaz y le pasamos el valor de la constante que creamos anteriormente.

Con esto cada vez que presionemos Mostrar mas nos direccionara a una pagina donde veremos todos los detalles de la vivienda seleccionada pero de una forma muy brusca porque todavia no le dimos un estilo. Para esto debemos ir al detalles.component.css y agregaremos el siguiente codigo:

.listado-foto {
  height: 600px;
  width: 50%;
  object-fit: cover;
  border-radius: 30px;
  float: right;
}

.listado-top {
  font-size: 48pt;
  font-weight: bold;
  margin-bottom: 15px;
}

.listado-ubicacion::before {
  content: url('/assets/location-pin.svg') / '';
}

.listado-ubicacion {
  font-size: 24pt;
  margin-bottom: 15px;
}

.listado-caract > .section-heading {
  color: var(--secondary-color);
  font-size: 24pt;
  margin-bottom: 15px;
}

.listado-caract {
  margin-bottom: 20px;
}

.listado-caract li {
  font-size: 14pt;
}

li {
  list-style-type: none;
}

.listado-apply .section-heading {
  font-size: 18pt;
  margin-bottom: 15px;
}

button {
  padding: 10px;
  border: solid 1px var(--primary-color);
  background: var(--primary-color);
  color: white;
  border-radius: 8px;
}
label, input {
  display: block;
}
label {
  color: var(--secondary-color);
  font-weight: bold;
  text-transform: uppercase;
  font-size: 12pt;
}
input {
  font-size: 16pt;
  margin-bottom: 15px;
  padding: 10px;
  width: 400px;
  border-top: none;
  border-right: none;
  border-left: none;
  border-bottom: solid .3px;
}
@media (max-width: 1024px) {
  .listing-photo {
    width: 100%;
    height: 400px;
  }
}

Estos son simplemente distintos estilos que aplicaremos a cada elemento que tenemos en la propiedad template. Asi como tambien otros elementos y la disposicion de los mismos en la pagina en base a la resolucion. Con esto ahora si tenemos todo listo, veamos el siguiente video para ver que creamos hasta ahora

Como pueden ver en el video ya vamos a una pagina con mayores detalles de cada vivienda, a su vez si presionan la imagen volveran al inicio donde esta el listado de casas. Esta es una mecanica muy utilizada en distintos lenguajes, especialmente los webs, para mostrar infomacion de forma dinamica sin cambiar la pagina y en otros casos de redireccionarnos a distintas paginas utilizando siempre el mismo codigo. Antes de finalizar les dejo un link con todos los archivos del proyecto y los modificados en este post:

En resumen, hoy hemos visto ruteo, que es, para que sirve, como se aplica, un ejemplo donde paso a paso hemos agregado los detalles de la casa y como manejarlo entre las paginas. Espero les haya sido de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.