El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En Angular, las rutas hijas permiten crear rutas anidadas dentro de una aplicación. Esto es útil para estructurar aplicaciones complejas donde ciertas rutas tienen subrutas específicas. Las rutas hijas se configuran dentro de la configuración de rutas principal y permiten una navegación más organizada y modular.

Conceptos Clave

Rutas Anidadas: Permiten definir rutas dentro de otras rutas.
Router Outlet: Un componente que actúa como un marcador de posición donde se cargan los componentes de las rutas hijas.
Configuración de Rutas: Definición de rutas hijas dentro de la configuración de rutas principal.

Configuración de Rutas Hijas

Para configurar rutas hijas, se debe definir una propiedad children dentro de la configuración de la ruta principal. A continuación, se muestra un ejemplo de cómo configurar rutas hijas en Angular.

Ejemplo Práctico

Supongamos que tenemos una aplicación con una ruta principal admin y dos rutas hijas users y settings.

Definir Componentes:
- AdminComponent
- UsersComponent
- SettingsComponent
Configurar Rutas:

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AdminComponent } from './admin/admin.component';
import { UsersComponent } from './users/users.component';
import { SettingsComponent } from './settings/settings.component';

const routes: Routes = [
  {
    path: 'admin',
    component: AdminComponent,
    children: [
      { path: 'users', component: UsersComponent },
      { path: 'settings', component: SettingsComponent }
    ]
  },
  { path: '', redirectTo: '/admin', pathMatch: 'full' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Agregar Router Outlet en el Componente Principal:

<!-- admin.component.html -->
<h2>Admin Dashboard</h2>
<nav>
  <a routerLink="users">Users</a>
  <a routerLink="settings">Settings</a>
</nav>
<router-outlet></router-outlet>

Explicación del Código

Definición de Rutas: En el archivo app-routing.module.ts, se define una ruta principal admin que tiene dos rutas hijas users y settings.
Router Outlet: En el archivo admin.component.html, se utiliza <router-outlet></router-outlet> para indicar dónde se deben cargar los componentes de las rutas hijas.

Ejercicio Práctico

Objetivo: Crear una aplicación con una ruta principal dashboard y dos rutas hijas profile y reports.

Crear Componentes:
- DashboardComponent
- ProfileComponent
- ReportsComponent
Configurar Rutas:

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { ProfileComponent } from './profile/profile.component';
import { ReportsComponent } from './reports/reports.component';

const routes: Routes = [
  {
    path: 'dashboard',
    component: DashboardComponent,
    children: [
      { path: 'profile', component: ProfileComponent },
      { path: 'reports', component: ReportsComponent }
    ]
  },
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Agregar Router Outlet en el Componente Principal:

<!-- dashboard.component.html -->
<h2>Dashboard</h2>
<nav>
  <a routerLink="profile">Profile</a>
  <a routerLink="reports">Reports</a>
</nav>
<router-outlet></router-outlet>

Solución del Ejercicio

Crear los Componentes:

ng generate component dashboard
ng generate component profile
ng generate component reports

Configurar las Rutas: Asegúrate de que el archivo app-routing.module.ts esté configurado correctamente como se muestra en el ejemplo anterior.
Agregar Router Outlet: En el archivo dashboard.component.html, agrega el <router-outlet></router-outlet> y los enlaces de navegación.

Resumen

En esta sección, hemos aprendido cómo configurar rutas hijas en Angular para crear una estructura de navegación anidada. Las rutas hijas permiten organizar mejor las aplicaciones complejas y mejorar la modularidad del código. Asegúrate de practicar configurando diferentes rutas hijas para familiarizarte con este concepto esencial en Angular.

Rutas Hijas

Conceptos Clave

Configuración de Rutas Hijas

Ejemplo Práctico

Explicación del Código

Ejercicio Práctico

Solución del Ejercicio

Resumen

Curso de Angular 2+

Módulo 1: Introducción a Angular

Módulo 2: Conceptos Básicos de TypeScript

Módulo 3: Componentes y Plantillas

Módulo 4: Directivas y Pipes

Módulo 5: Servicios e Inyección de Dependencias

Módulo 6: Enrutamiento y Navegación

Módulo 7: Formularios en Angular

Módulo 8: Cliente HTTP y Observables

Módulo 9: Gestión de Estado

Módulo 10: Pruebas en Angular

Módulo 11: Temas Avanzados

Módulo 12: Despliegue y Mejores Prácticas