En este blog, exploraremos cómo utilizar el enrutamiento en Angular como una herramienta esencial para crear una navegación dinámica y fluida a través de un navbar. Mostraremos cómo puedes cambiar entre diferentes componentes de tu aplicación Angular con facilidad, todo gracias al enrutamiento. El enrutamiento en Angular nos permite cargar componentes de forma dinámica en función de las acciones del usuario, lo que brinda una experiencia de usuario mucho más intuitiva y eficiente. ¡Acompáñanos mientras exploramos cómo aprovechar al máximo esta poderosa funcionalidad para mejorar la navegación en tu aplicación web!

Si ya tienes una aplicación Angular creada, puedes omitir este paso. Si no, puedes crear una nueva aplicación Angular utilizando el Angular CLI (Command Line Interface). Abre tu terminal y ejecuta el siguiente comando:

ng new nombre-de-tu-app

Esto creará una nueva aplicación Angular en un directorio con el nombre especificado. Durante el proceso de configuración inicial, el Angular CLI te preguntará si deseas configurar el enrutamiento. Asegúrate de responder "sí" a esta pregunta.

Angular te permite organizar tus rutas en un módulo de enrutamiento separado para mantener tu aplicación más ordenada. Puedes crear un módulo de enrutamiento ejecutando el siguiente comando:

ng generate module app-routing --flat --module=app    

Esto generará un archivo llamado app-routing.module.ts en la carpeta de tu aplicación.

Vamos a crear cuat componentes para nuestro ejemplo:

ng generate component componente1
ng generate component componente2
ng generate component componente3 
ng generate component landing

Angular utiliza un módulo de enrutamiento para gestionar las rutas de la aplicación. Puedes configurar el enrutamiento en el archivo app-routing.module.ts. Aquí hay un ejemplo de cómo configurarlo:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { Componente1Component } from './componente1/componente1.component';
import { Componente3Component } from './componente3/componente3.component';
import { Componente2Component } from './componente2/componente2.component';
import { LandingComponent } from './landing/landing.component';

const routes: Routes = [
  { path: 'componente1', component: Componente1Component },
  { path: 'componente2', component: Componente2Component },
  { path: 'componente3', component: Componente3Component },
  { path: 'landing', component: LandingComponent },
  { path: '', redirectTo: '/landing', pathMatch: 'full' },
];

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

En este ejemplo, hemos definido tres rutas para nuestros cuatro componentes y hemos configurado una ruta predeterminada (redirectTo) que redirige a /componente1 cuando la aplicación se carga por primera vez.

Para tener un navbar que aparezca en todos los componentes a nivel de raíz, puedes crear un componente de navbar y luego incluirlo en la plantilla del componente raíz (generalmente app.component.html). Por ejemplo, creemos un componente navbar:

ng generate component navbar

Luego, puedes agregar el componente navbar a tu archivo app.component.html:

<app-navbar></app-navbar>
<router-outlet></router-outlet>

El <router-outlet></router-outlet> es donde se cargarán dinámicamente los componentes según las rutas definidas.

Ahora, puedes agregar enlaces de navegación en tu componente navbar para cambiar entre los componentes. Por ejemplo, en navbar.component.html:

<nav class="navbar navbar-dark bg-dark">
  <ul class="navbar-nav d-flex flex-row">
    <li class="nav-item">
      <a class="nav-link" routerLink="/componente1">Componente 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" routerLink="/componente2">Componente 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" routerLink="/componente3">Componente 3</a>
    </li>
  </ul>
</nav>

Esto crea enlaces de navegación que utilizan la directiva routerLink de Angular para cambiar entre los componentes

SI deseas usar botones para manejo de rutas puedes lograrlo de la siguiente manera:

Primero, asegúrate de haber importado el módulo Router de Angular en el componente donde deseas realizar la navegación. Debes importarlo al comienzo de tu archivo TypeScript, de la siguiente manera:

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

Luego, inyecta el servicio Router en el constructor del component:

constructor(private router: Router) { }

Ahora, puedes utilizar el botón en tu plantilla HTML y agregar una función en el controlador del componente para manejar la navegación cuando se hace clic en el botón. Por ejemplo:

<div class="container mt-4">
  <div class="jumbotron">
    <h1 class="display-4">¡Bienvenido a nuestra aplicación!</h1>
    <p class="lead">Estamos encantados de tenerte aquí. Disfruta de la experiencia y explora todas las características emocionantes que tenemos para ofrecer.</p>
    <hr class="my-4">
    <p>No dudes en ponerte en contacto con nosotros si tienes alguna pregunta o necesitas ayuda.</p>
    <button class="btn btn-primary btn-lg" (click)="irAComponente()">Más información</button>
  </div>
</div>

Finalmente, en el controlador del componente TypeScript, define la función irAComponente() para navegar al componente deseado utilizando el servicio Router. Por ejemplo:

irAComponente() {
  this.router.navigate(['/componente1']); // Reemplaza 'componente1' con la ruta deseada
}

Asegúrate de reemplazar 'componente1' con la ruta del componente al que deseas navegar. Con esto, cuando se haga clic en el botón "Más información", se llamará a la función irAComponente() y se realizará la navegación en la aplicación Angular.