Implementación de Rutas en el Proyecto

Aprende a configurar rutas en Angular 4 paso a paso: desde importar correctamente RouterModule.forRoot hasta crear los componentes detalle y lugares, organizar el layout con router-outlet y definir paths limpios para navegar por URL. Verás la convención de nombres, los cambios mínimos en el selector y templateUrl, y cómo mantener el navbar y el footer como estructura global.

¿Cómo configurar rutas en Angular con RouterModule?

Configurar rutas requiere dos acciones clave: importar RouterModule desde @angular/router e inicializar con forRoot usando una constante de rutas. Esto se agrega en imports del módulo principal y permite que la aplicación reconozca cada path y su component asociado.

¿Qué hace forRoot en la inicialización?

• Registra las rutas de la app una sola vez en el módulo raíz.
• Conecta el router con la configuración definida en la constante de rutas.
• Habilita la navegación por URL sin recargar la página.

¿Cómo se definen paths y components?

• Crea una constante, por ejemplo, appRoutes.
• Asigna cada path a su component correspondiente.
• Usa un path vacío para la vista inicial.

import { RouterModule, Routes } from '@angular/router';
import { DetalleComponent } from './detalle/detalle.component';
import { LugaresComponent } from './lugares/lugares.component';

export const appRoutes: Routes = [
  { path: 'detalle', component: DetalleComponent },
  { path: 'lugares', component: LugaresComponent },
  { path: '', component: LugaresComponent }
];

// en el módulo principal
@NgModule({
  imports: [RouterModule.forRoot(appRoutes)],
  declarations: [DetalleComponent, LugaresComponent]
})
export class AppModule {}

¿Cómo crear y registrar el componente detalle?

Se crea una carpeta llamada detalle y dentro dos archivos siguiendo la convención: detalle.component.ts y detalle.component.html. El primero define el selector y el templateUrl; se puede omitir styleUrls para mantener el componente mínimo.

¿Qué convención de nombres deben seguir los archivos?

• Usa el patrón: nombre + .component + .ts o .html.
• Ejemplo: detalle.component.ts y detalle.component.html.
• La clase se nombra en PascalCase: DetalleComponent.

¿Qué cambios mínimos requiere el componente?

• Cambiar el selector a app-detalle.
• Apuntar el templateUrl a ./detalle.component.html.
• Quitar styleUrls si no se usa.

import { Component } from '@angular/core';

@Component({
  selector: 'app-detalle',
  templateUrl: './detalle.component.html'
})
export class DetalleComponent {}

<!-- detalle.component.html -->
detalle

¿Cómo se registra en el módulo y se agrega la ruta?

• Añade DetalleComponent en declarations del módulo.
• Agrega el path 'detalle' apuntando a DetalleComponent en appRoutes.
• Refresca y visita /detalle para validar la vista.

¿Cómo separar layout global y vistas con router-outlet?

Para que el layout general no se duplique, el navbar y el futuro footer viven en app.component.html, y las vistas específicas se cargan dentro de router-outlet. Así, al entrar a /detalle o /lugares, solo cambia el contenido central.

¿Dónde colocar router-outlet y el layout global?

• Deja el navbar en app.component.html.
• Inserta debajo del navbar.
• Mantén este archivo como contenedor global.

<!-- app.component.html -->
<nav>...navbar...</nav>
<router-outlet></router-outlet>

¿Cómo mover la vista de lugares a su propio componente?

• Duplica la carpeta de detalle y renómbrala a lugares.
• Renombra archivos a lugares.component.ts y lugares.component.html.
• Actualiza selector y templateUrl para LugaresComponent.
• Corta el contenido de mapa y lista desde app.component.html y pégalo en lugares.component.html.
• Mueve la lógica asociada desde app.component.ts hacia lugares.component.ts.

import { Component } from '@angular/core';

@Component({
  selector: 'app-lugares',
  templateUrl: './lugares.component.html'
})
export class LugaresComponent {}

<!-- lugares.component.html -->
<!-- mapa y lista de lugares -->

¿Cómo verificar la navegación por URL?

• Define el path 'lugares' y el path vacío apuntando a LugaresComponent.
• Visita /lugares y / para ver mapa y lista.
• Visita /detalle para ver la vista de detalle con el navbar.

¿Te quedó alguna duda sobre la configuración de rutas o la organización del layout con router-outlet? Cuéntame en qué parte quieres profundizar.