El ruteo en Angular cuatro permite navegar entre vistas de forma clara y predecible. Con un mapeo directo entre URL y componentes, puedes mostrar la vista adecuada y, cuando haga falta, pasar parámetros como un identificador único para un detalle. A continuación se explica, paso a paso, cómo queda esta configuración inicial y qué rol juegan los archivos clave.

¿Cómo habilitar la navegación con el router?

El router gestiona el cambio entre vistas en función de la URL. Cada vista es un componente, y a cada ruta se le asigna el componente que debe mostrarse.

• Mapear URL a componentes para mostrar vistas específicas.
• Usar parámetros en la URL para vistas de detalle con ID.
• Preparar rutas base y una ruta “comodín” para la raíz.

Idea clave: a cada URL le dices qué componente debe desplegar y, si corresponde, lees el ID desde la ruta para mostrar el detalle.

¿Qué archivos intervienen: index.html y app.module.ts?

Todo se renderiza dentro de index.html: ahí el ruteador usa las etiquetas mencionadas como “app-rout” para decidir qué componente mostrar según la URL. Luego, en app.module.ts, se definen las rutas mediante una constante de tipo Routes importada desde Angular router.

• index.html: contenedor donde se muestran las vistas.
• app.module.ts: lugar para definir la constante de rutas.
• Routes desde Angular router: tipado para el arreglo de rutas.

Estructura de cada ruta: un objeto con las propiedades path (segmento de la URL tras el dominio) y component (el componente que se debe renderizar).

¿Qué significan path y component?

• path: el segmento que sigue al dominio, por ejemplo, “lugares”.
• component: el componente Angular que se abrirá cuando la URL coincida con el path.

¿Cómo se pasan parámetros en la URL?

• Se añade el ID del recurso en la URL para la vista de detalle.
• El componente lee ese ID a través del ruteo y muestra la información correspondiente.

¿Cómo definir rutas y un comodín para la raíz?

Primero, se crea una constante con el arreglo de objetos de ruta. Se incluye una ruta para “lugares” y otra con path vacío como “comodín” para cuando no haya segmento tras el dominio.

fullscreen
import { Routes } from '@angular/router';
import { AppComponent } from './app.component';

const appRoutes: Routes = [
  { path: 'lugares', component: AppComponent },
  { path: '', component: AppComponent }
];

• Ruta “lugares”: muestra AppComponent cuando la URL sea /lugares.
• Ruta con path vacío: muestra AppComponent cuando no hay segmento tras el dominio.
• Más adelante se agregan rutas adicionales para nuevas vistas, como el detalle de cada lugar.

¿Quieres que desarrollemos la ruta de detalle con su componente y parámetros de URL? Cuéntame en los comentarios qué estructura de datos usarás y avanzamos juntos.