El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Rutas Hijas

Siguiente ►
►

En Angular, las rutas hijas permiten crear rutas anidadas dentro de una aplicación. Esto es útil para estructurar la navegación de manera jerárquica y modular, facilitando la organización y el mantenimiento del código. En esta sección, aprenderemos cómo configurar y utilizar rutas hijas en Angular.

Conceptos Clave

  1. Rutas Hijas: Son rutas que están anidadas dentro de una ruta principal.
  2. Router Outlet: Un contenedor en el cual se cargan los componentes de las rutas hijas.
  3. Configuración de Rutas: Definir las rutas hijas en el archivo de configuración de rutas.

Configuración de Rutas Hijas

Para configurar rutas hijas, primero necesitamos definirlas en el archivo de configuración de rutas. Supongamos que tenemos una aplicación con una ruta principal admin y queremos agregar rutas hijas para dashboard y settings.

Paso 1: Crear Componentes

Primero, creamos los componentes necesarios para las rutas hijas.

ng generate component admin
ng generate component admin/dashboard
ng generate component admin/settings

Paso 2: Definir las Rutas Hijas

En el archivo de configuración de rutas (app-routing.module.ts), definimos las rutas hijas dentro de la ruta principal admin.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AdminComponent } from './admin/admin.component';
import { DashboardComponent } from './admin/dashboard/dashboard.component';
import { SettingsComponent } from './admin/settings/settings.component';

const routes: Routes = [
  { path: 'admin', component: AdminComponent, children: [
    { path: 'dashboard', component: DashboardComponent },
    { path: 'settings', component: SettingsComponent }
  ]}
];

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

Paso 3: Configurar el Router Outlet

En el componente principal admin.component.html, agregamos un <router-outlet> para que las rutas hijas se carguen dentro de este contenedor.

<h2>Admin Area</h2>
<nav>
  <a routerLink="dashboard">Dashboard</a>
  <a routerLink="settings">Settings</a>
</nav>
<router-outlet></router-outlet>

Paso 4: Navegar entre Rutas Hijas

Ahora podemos navegar entre las rutas hijas utilizando los enlaces definidos en el componente admin.component.html.

Ejemplo Completo

A continuación, se muestra un ejemplo completo de cómo configurar y utilizar rutas hijas en Angular.

Estructura de Archivos

src/
├── app/
│   ├── admin/
│   │   ├── admin.component.html
│   │   ├── admin.component.ts
│   │   ├── dashboard/
│   │   │   ├── dashboard.component.html
│   │   │   ├── dashboard.component.ts
│   │   ├── settings/
│   │       ├── settings.component.html
│   │       ├── settings.component.ts
│   ├── app-routing.module.ts
│   ├── app.component.html
│   ├── app.component.ts
│   ├── app.module.ts

Código de Ejemplo

admin.component.html

<h2>Admin Area</h2>
<nav>
  <a routerLink="dashboard">Dashboard</a>
  <a routerLink="settings">Settings</a>
</nav>
<router-outlet></router-outlet>

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AdminComponent } from './admin/admin.component';
import { DashboardComponent } from './admin/dashboard/dashboard.component';
import { SettingsComponent } from './admin/settings/settings.component';

const routes: Routes = [
  { path: 'admin', component: AdminComponent, children: [
    { path: 'dashboard', component: DashboardComponent },
    { path: 'settings', component: SettingsComponent }
  ]}
];

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

admin.component.ts

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

@Component({
  selector: 'app-admin',
  templateUrl: './admin.component.html',
  styleUrls: ['./admin.component.css']
})
export class AdminComponent { }

dashboard.component.ts

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

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent { }

settings.component.ts

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

@Component({
  selector: 'app-settings',
  templateUrl: './settings.component.html',
  styleUrls: ['./settings.component.css']
})
export class SettingsComponent { }

Ejercicio Práctico

Ejercicio

  1. Crea un nuevo componente llamado profile dentro del módulo admin.
  2. Agrega una ruta hija para profile en la configuración de rutas.
  3. Actualiza el componente admin para incluir un enlace de navegación a profile.

Solución

Paso 1: Crear el Componente

ng generate component admin/profile

Paso 2: Definir la Ruta Hija

const routes: Routes = [
  { path: 'admin', component: AdminComponent, children: [
    { path: 'dashboard', component: DashboardComponent },
    { path: 'settings', component: SettingsComponent },
    { path: 'profile', component: ProfileComponent }  // Nueva ruta hija
  ]}
];

Paso 3: Actualizar el Componente admin.component.html

<h2>Admin Area</h2>
<nav>
  <a routerLink="dashboard">Dashboard</a>
  <a routerLink="settings">Settings</a>
  <a routerLink="profile">Profile</a>  <!-- Nuevo enlace de navegación -->
</nav>
<router-outlet></router-outlet>

Conclusión

Las rutas hijas en Angular permiten crear una estructura de navegación jerárquica y modular. Al entender cómo configurar y utilizar rutas hijas, puedes organizar mejor tu aplicación y mejorar la experiencia del usuario. En el siguiente tema, exploraremos los guardias de ruta, que te permitirán controlar el acceso a las rutas de tu aplicación.

◄ Anterior
◄
Siguiente ►
►

Curso de Angular

Módulo 1: Introducción a Angular

Módulo 2: Componentes de Angular

Módulo 3: Enlace de Datos y Directivas

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

Módulo 5: Enrutamiento y Navegación

Módulo 6: Formularios en Angular

Módulo 7: Cliente HTTP y Observables

Módulo 8: Gestión de Estado

Módulo 9: Pruebas en Angular

Módulo 10: Conceptos Avanzados de Angular

Módulo 11: Despliegue y Mejores Prácticas

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados