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

ng g c components/tipoProducto/mostrarTipoProducto
ng g c components/tipoProducto/crearTipoProducto
ng g c components/tipoProducto/actualizarTipoProducto
ng g c components/tipoProducto/eliminarTipoProducto

ng g c components/producto/mostrarProducto
ng g c components/producto/crearProducto
ng g c components/producto/actualizarProducto
ng g c components/producto/eliminarProducto

ng g c components/venta/mostrarVenta
ng g c components/venta/crearVenta
ng g c components/venta/actualizarVenta
ng g c components/venta/eliminarVenta

Estructura de componentes:

A continuación, asignamos URL a los componentes de ruta que acabamos de crear en src/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';
import { MostrarTipoProductoComponent } from './components/tipoProducto/mostrar-tipo-producto/mostrar-tipo-producto.component';
import { MostrarProductoComponent } from './components/producto/mostrar-producto/mostrar-producto.component';
import { MostrarVentaComponent } from './components/venta/mostrar-venta/mostrar-venta.component';

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

      {
        path: "productos",
        component: MostrarProductoComponent
      },

      {
        path: "ventas",
        component: MostrarVentaComponent
      },
];

Acto seguido se debe ir al menú, para enlazar este componente con la ruta asignada

src/app/components/layouts/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',
        routerLink: '/tipoproductos'
      },
      {
        label: 'Productos',
        icon: 'pi pi-fw pi-shopping-bag',
        routerLink: '/productos'
      },
      {
        label: 'Ventas',
        icon: 'pi pi-fw pi-shopping-cart',
        routerLink: '/ventas'
      }

    ];
  }
}

Ahora probamos las rutas