Capítulo 4: Enrutamiento y Navegación

4.1 Configuración de Enrutamiento

En Angular, el enrutamiento permite navegar entre diferentes vistas o componentes de la aplicación sin necesidad de recargar la página completa. Para configurar el enrutamiento, sigue estos pasos:

1. Importa el módulo RouterModule desde @angular/router en tu módulo principal (por lo general, app.module.ts).

import { RouterModule } from '@angular/router';

• Configura las rutas en un array. Cada ruta se define con un objeto que especifica el path (ruta), el componente que se debe mostrar y otros datos relacionados.

const routes: Routes = [  { path: '', component: HomeComponent },  { path: 'about', component: AboutComponent },  { path: 'contact', component: ContactComponent }];

• Utiliza el método RouterModule.forRoot(routes) para configurar las rutas en tu aplicación.

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

4.2 Creación de Rutas

Para navegar entre páginas en Angular, puedes utilizar la directiva routerLink en las plantillas HTML. Por ejemplo:

<ul>  <li><a routerLink="">Inicio</a></li>  
<li><a routerLink="/about">Acerca de</a></li>  
<li><a routerLink="/contact">Contacto</a></li></ul>

La propiedad routerLink se establece en el path de la ruta que deseas navegar. Al hacer clic en un enlace, Angular gestionará la navegación y mostrará el componente correspondiente.

4.4 Rutas Anidadas

Las rutas anidadas permiten crear jerarquías de rutas en tu aplicación. Puedes anidar rutas dentro de otras rutas para representar una estructura de navegación más compleja. Por ejemplo:

const routes: Routes = [
  { path: '', component: HomeComponent },
  {
    path: 'products',
    component: ProductsComponent,
    children: [
      { path: 'list', component: ProductListComponent },
      { path: 'detail/:id', component: ProductDetailComponent }
    ]
  }
];

En este ejemplo, tenemos una ruta anidada para la sección de productos que incluye una lista de productos y una vista detallada de productos. Las rutas anidadas se definen dentro del objeto children de la ruta principal.

Para navegar por rutas anidadas, puedes utilizar enlaces con rutas relativas y la propiedad routerLink de la misma manera que con las rutas principales.

En Angular, aparte de utilizar el enrutador incorporado y la configuración de rutas en un archivo de configuración de enrutamiento (como se explicó anteriormente), también puedes crear rutas de otras maneras:

1. Rutas con el Uso de Directivas en la Plantilla: Puedes crear rutas utilizando directivas en la plantilla, como *ngIf, para mostrar o ocultar componentes en función de ciertas condiciones. Aunque esta no es la forma más recomendada de gestionar rutas en aplicaciones complejas, es útil en casos sencillos.

<app-home *ngIf="isHome"></app-home>
<app-about *ngIf="isAbout"></app-about>

Rutas Programáticas: Puedes navegar programáticamente a través de rutas utilizando el servicio Router. Esto es útil para navegaciones que no están vinculadas a elementos de interfaz de usuario, como después de una operación específica en un componente.

import { Router } from '@angular/router';

// Navegar a una ruta programáticamente
this.router.navigate(['/about']);

Navegación de Rutas con Enlaces de Hipervínculo: Puedes utilizar enlaces de hipervínculo HTML tradicionales para navegar entre páginas, pero es importante que estos enlaces coincidan con las rutas definidas en el enrutador.

<a href="/about">Acerca de</a>

Sin embargo, es fundamental recordar que, en aplicaciones Angular, se recomienda utilizar el enrutador incorporado para gestionar rutas y navegar entre páginas, ya que proporciona funcionalidades avanzadas como la carga perezosa, la gestión de rutas anidadas y la manipulación de parámetros de ruta. La configuración de rutas a través del enrutador Angular es la forma más efectiva y flexible de manejar la navegación en la mayoría de las aplicaciones. Este es un resumen de cómo configurar el enrutamiento, crear rutas, navegar entre páginas y utilizar rutas anidadas en Angular. El enrutamiento es esencial para crear aplicaciones web con múltiples vistas y proporcionar una experiencia de navegación fluida.