Navegar entre rutas de Angular

El enrutamiento en Angular ayuda a navegar de una vista a otra a medida que los usuarios realizan tareas en las aplicaciones web. En esta guía, aprenderá sobre la característica principal del enrutador Angular, RouterLink, y cómo usarla routerLinken sus aplicaciones Angular.

Las aplicaciones angulares son en su mayoría aplicaciones de una sola página, pero queremos mostrar varias páginas. Por lo tanto, necesitamos enrutamiento del lado del cliente en nuestra aplicación.

Angular viene con su propia biblioteca de enrutamiento del lado del cliente para permitirnos representar el componente que queremos de acuerdo con la URL a la que nos dirigimos. Podemos agregar enlaces que tengan como destino las URL de ruta para que cuando hagamos clic en el enlace, veamos el contenido que esperamos.

Para usarlo, primero tenemos que importar el AppRoutingmódulo que vamos a crear que incluye el código de enrutamiento.

Luego creamos los componentes que hacen parte del ecosistema de componentes de la base de datos que se integran en el menú, y se desplegaran en el SPA.

Esto indica que debemos crear estos componentes:

Cliente (CRUD)

TipoProducto (CRUD)

Producto (CRUD)

Venta (CRUD)

Recordemos que para crear los componentes uno por cada verbo del CRUD, tal como sigue en el terminal de VS Code:

ng g c components/cliente/mostrarCliente
ng g c components/cliente/crearCliente
ng g c components/cliente/actualizarCliente
ng g c components/cliente/eliminarCliente

Estructura:

A continuación, asignamos URL a los componentes de ruta que acabamos de crear, pero antes debemos hacer las siguinetes configuraciones en src/app/app.config.ts:

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideClientHydration } from '@angular/platform-browser';
import { provideHttpClient } from '@angular/common/http';
import { provideAnimations } from '@angular/platform-browser/animations';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes), 
    provideAnimations(),
    provideHttpClient(), 
    provideClientHydration()
  ]
};

en src/app/app.routes.ts:

import { Routes } from '@angular/router';
import { MostrarClienteComponent } from './components/cliente/mostrar-cliente/mostrar-cliente.component';
import { CrearClienteComponent } from './components/cliente/crear-cliente/crear-cliente.component';
import { ActualizarClienteComponent } from './components/cliente/actualizar-cliente/actualizar-cliente.component';

export const routes: Routes = [
    { 
        path: '', 
        redirectTo: '/', 
        pathMatch: 'full' 
    },
    {
        path: "clientes",
        component: MostrarClienteComponent
    },
    {
        path: "clientes/nuevo",
        component: CrearClienteComponent
    },
    {
        path: "clientes/edit/:id",
        component: ActualizarClienteComponent
    },
];

Y luego, nuestro primer componente MostrarCliente lo enlazamos con el menu que tenemos en el componente Aside

src/app/components/layout/aside/aside.component.ts

import { Component } from '@angular/core';
import { PanelMenuModule } from 'primeng/panelmenu';
import { MenuItem } from 'primeng/api';

@Component({
  selector: 'app-aside',
  standalone: true,
  imports: [PanelMenuModule],
  templateUrl: './aside.component.html',
  styleUrl: './aside.component.css'
})
export class AsideComponent {
  items: MenuItem[]=[];


  ngOnInit(): void {
    this.items = [
      {
        label: 'Clientes',
        icon: 'pi pi-fw pi-users',
        routerLink: '/clientes'
        // items: [
        //   {
        //     label: 'Crud Cliente'
        //   },
        //   {
        //     label: 'HTML 2'
        //   }
        // ]
      },
      {
        label: 'Tipo Productos',
        icon: 'pi pi-fw pi-qrcode',
      },
      {
        label: 'Productos',
        icon: 'pi pi-fw pi-shopping-bag',
      },
      {
        label: 'Ventas',
        icon: 'pi pi-fw pi-shopping-cart',
      }

    ];
  }
}

y vamos al navegador http://localhost:4200