CursosEmpresasBlogLiveConfEventosPrecios

0:007:36

Recursos

Resumen

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 <router-outlet></router-outlet> 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.

Implementación de Rutas en el Proyecto

Curso de Angular 4

Clase 25 de 80

Clase 25 / 80