Implementación de Rutas en el Proyecto

Contenido del curso

Inicio del curso

1
Angular 4: configuración a despliegue profesional
02:13 min

Introducción a Angular 4

Setup del Ambiente de Trabajo

Conceptos Básicos

Directivas

Angular UI

Ruteo

Servicios

Conexión Remota (Http y Sockets)

Pipes

Animaciones en Angular

Testing en Angular

Autenticación y Protección de Rutas

RxJS

Publicando nuestro proyecto

72
Publicando en Firebase Hosting
07:39 min

Fin del curso

73
Conclusión ¿Qué aprendimos en el curso?
01:20 min
74
Reto final del curso - realiza un nuevo modulo de PlatziSquare de acuerdo con las historias de usuario
01:25 min

Sesiones en vivo

Contenido Bonus

80
Actualización de angular, versión 6.0
04:25 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:007:36

Implementación de Rutas en el Proyecto

Curso de Angular 4

Clase 25 de 80

Clase 25 / 80

Recursos

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.