Navegar con router en Angular

Presentaremos el método navigate del servicio de enrutador en Angular y discutiremos cómo usarlo para navegar en aplicaciones Angular.

Router Navigate en Angular

La navegación es una de las partes más importantes de cualquier aplicación web. Incluso cuando creamos una aplicación de una sola página (SPA) que no tiene varias páginas, aún usamos la navegación para pasar de una sección a otra.

La navegación permite a los usuarios encontrar fácilmente lo que buscan en las aplicaciones web. Si proporcionamos una navegación clara y fácil de entender, nuestra aplicación web tendrá éxito.

Angular proporciona muchos métodos de navegación para lograr enrutamiento simple a complejo fácilmente. Angular proporciona un módulo separado para configurar la navegación en nuestra aplicación web.

El método de enrutador navigate() se utiliza para navegar mediante programación al usuario de una página a otra.

Pasaremos por un ejemplo en el que navegaremos a través de diferentes componentes usando navigate(). Así que vamos a crear una nueva aplicación usando el siguiente comando.

# angular
ng new my-app

Después de crear nuestra nueva aplicación en Angular, iremos al directorio de nuestra aplicación usando este comando.

# angular
cd my-app

Ahora, ejecutemos nuestra aplicación para verificar si todas las dependencias están instaladas correctamente.

# angular
ng serve --open

Generaremos componentes usando comandos. Primero, generaremos nuestro componente home.

# angular
ng generate component home

Una vez hayamos generado nuestro componente home, generaremos nuestro componente about.

# angular
ng generate component about

Por último, generamos nuestro componente servicios usando el siguiente comando.

# angular
ng generate component services

Después de generar nuestros componentes, tendremos tres componentes en carpetas separadas con 3 archivos.

Producción:

Una vez que hayamos generado nuestros componentes, crearemos vistas para ellos. Abriremos about.component.html desde la carpeta about y añadiremos el siguiente código.

# angular
<div class="container" >
  <h1> This is About component </h1>
  <h3> Try navigating to other components </h3>
</div>

Abriremos el archivo home.component.html de la carpeta home y añadiremos el siguiente código.

# angular
<div class="container">
 <h1> This is Home component </h1>
 <h3> Try navigating to other components </h3>
</div>

A continuación, abriremos el archivo services.component.html de la carpeta services y añadiremos el siguiente código.

# angular
<div class="container">
 <h1> This is Services component </h1>
 <h3> Try navigating to other components </h3>
</div>

Una vez que tengamos listos nuestros componentes y vistas, definiremos nuestras rutas en app-routing.module.ts. Como se muestra a continuación, importaremos ngModule, Routes y RouterModule desde router e importaremos nuestros componentes creados.

# angular
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AboutComponent}  from './about/about.component';
import { HomeComponent} from './home/home.component';
import { ServicesComponent } from './services/services.component';

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

Una vez que hayamos importado todo, definiremos las rutas de nuestros componentes a continuación.

# angular
const routes: Routes = [

    { path: 'about', component: AboutComponent },
    { path: 'home', component: HomeComponent},
    { path: 'services', component: ServicesComponent },
 ];

Crearemos nuestro menú de navegación en app.component.html. Cada enlace llamará a una función utilizando el método (click).

Mostraremos los datos de los componentes usando router-outlet, como se muestra a continuación.

# angular
<ul class="nav navbar-nav">
  <li>
    <a (click)="goToHome()">Home</a>
  </li>
  <li>
    <a (click)="goToAbout()">About</a>
  </li>
  <li>
    <a (click)="goToServices()">Services</a>
  </li>
</ul>

<router-outlet> </router-outlet>

Crearemos nuestras funciones goToHome(), goToAbout() y goToServices(). Abriremos app.component.ts e importaremos Router desde router y usando router.navigate crearemos estas funciones para navegar entre componentes, como se muestra a continuación.

# angular
import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  constructor(private router: Router) {}

  goToHome() {
    this.router.navigate(['/', 'home']);
  }
  goToAbout() {
    this.router.navigate(['/', 'about']);
  }
  goToServices() {
    this.router.navigate(['/', 'services']);
  }
}

Producción:

Como puede ver en el ejemplo anterior, podemos navegar fácilmente de un componente a otro usando navigate() y definiendo rutas.

Entonces, en este tutorial, aprendimos cómo crear componentes y definir rutas y cómo usar navigate() para navegar entre componentes fácilmente.

Demostración aquí