APIS- NODEJS

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:

Client ==> Cliente - CRUD

ProductType ==> TipoProducto - CRUD

Product ==> Producto - CRUD

Sale ==> Venta - CRUD

Componentes y Rutas para Client

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/client/getall
ng g c components/client/create
ng g c components/client/update
ng g c components/client/delete

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, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { providePrimeNG } from 'primeng/config';
import Aura from '@primeuix/themes/aura';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideBrowserGlobalErrorListeners(),
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideAnimationsAsync(),
        providePrimeNG({
            theme: {
                preset: Aura
            }
        })
  ]
};

en src/app/app.routes.ts:

import { Routes } from '@angular/router';
import { Getall } from './components/client/getall/getall';
import { Create } from './components/client/create/create';
import { Update } from './components/client/update/update';
import { Delete } from './components/client/delete/delete';

export const routes: Routes = [
    { 
        path: '', 
        redirectTo: '/', 
        pathMatch: 'full' 
    },
    {
        path: "clients",
        component: Getall
    },
    {
        path: "clients/new",
        component: Create
    },
    {
        path: "clients/edit/:id",
        component: Update
    },
    {
        path: "clients/delete/:id",
        component: Delete
    },
];

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 { MenuItem } from 'primeng/api';
import { PanelMenu } from 'primeng/panelmenu';

@Component({
  selector: 'app-aside',
  standalone: true,
  imports: [PanelMenu],
  templateUrl: './aside.html',
  styleUrl: './aside.css'
})
export class Aside {
items: MenuItem[] | undefined;
ngOnInit() {
        this.items = [
            {
        label: 'Clientes',
        icon: 'pi pi-fw pi-users',
        routerLink: '/clients',
      },
      {
        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

Hasta este moemento funciona la ruta de clientes y muestra el componente getall

Componentes y Rutas para Product

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/product/getall
ng g c components/product/create
ng g c components/product/update
ng g c components/product/delete

A continuación:

src/app/app.routes.ts:

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

// Client components with aliases
import { Getall as ClientGetall } from './components/client/getall/getall';
import { Create as ClientCreate } from './components/client/create/create';
import { Update as ClientUpdate } from './components/client/update/update';
import { Delete as ClientDelete } from './components/client/delete/delete';

// Product components with aliases
import { Getall as ProductGetall } from './components/product/getall/getall';
import { Create as ProductCreate } from './components/product/create/create';
import { Update as ProductUpdate } from './components/product/update/update';
import { Delete as ProductDelete } from './components/product/delete/delete';

export const routes: Routes = [
    { 
        path: '', 
        redirectTo: '/', 
        pathMatch: 'full' 
    },
    {
        path: "clients",
        component: ClientGetall
    },
    {
        path: "clients/new",
        component: ClientCreate
    },
    {
        path: "clients/edit/:id",
        component: ClientUpdate
    },
    {
        path: "clients/delete/:id",
        component: ClientDelete
    },
    {
        path: "products",
        component: ProductGetall
    },
    {
        path: "products/new",
        component: ProductCreate
    },
    {
        path: "products/edit/:id",
        component: ProductUpdate
    },
    {
        path: "products/delete/:id",
        component: ProductDelete
    },
];

Nota: Para que no haya conflicto en las clases dado que tanto en Client, Como en Product se llaman iguales (GetAll, Create, Upate y Delete) entonces usamos alias Getall as ClientGetall para todos las demas clases.

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

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

@Component({
  selector: 'app-aside',
  standalone: true,
  imports: [PanelMenu],
  templateUrl: './aside.html',
  styleUrl: './aside.css'
})
export class Aside {
items: MenuItem[] | undefined;
ngOnInit() {
        this.items = [
            {
        label: 'Clientes',
        icon: 'pi pi-fw pi-users',
        routerLink: '/clients',
      },
      {
        label: 'Tipo Productos',
        icon: 'pi pi-fw pi-qrcode',

      },
      {
        label: 'Productos',
        icon: 'pi pi-fw pi-shopping-bag',
        routerLink: '/products',
      },
      {
        label: 'Ventas',
        icon: 'pi pi-fw pi-shopping-cart',
      }
        ];
    }
}

y vamos al navegador http://localhost:4200

Componentes y Rutas para Sale

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/sale/getall
ng g c components/sale/create
ng g c components/sale/update
ng g c components/sale/delete

A continuación:

src/app/app.routes.ts:

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

// Client components with aliases
import { Getall as ClientGetall } from './components/client/getall/getall';
import { Create as ClientCreate } from './components/client/create/create';
import { Update as ClientUpdate } from './components/client/update/update';
import { Delete as ClientDelete } from './components/client/delete/delete';

// Product components with aliases
import { Getall as ProductGetall } from './components/product/getall/getall';
import { Create as ProductCreate } from './components/product/create/create';
import { Update as ProductUpdate } from './components/product/update/update';
import { Delete as ProductDelete } from './components/product/delete/delete';

// Sale components with aliases
import { Getall as SaleGetall } from './components/sale/getall/getall';
import { Create as SaleCreate } from './components/sale/create/create';
import { Update as SaleSaleUpdate } from './components/sale/update/update';
import { Delete as SaleDelete } from './components/sale/delete/delete';

export const routes: Routes = [
    { 
        path: '', 
        redirectTo: '/', 
        pathMatch: 'full' 
    },
    {
        path: "clients",
        component: ClientGetall
    },
    {
        path: "clients/new",
        component: ClientCreate
    },
    {
        path: "clients/edit/:id",
        component: ClientUpdate
    },
    {
        path: "clients/delete/:id",
        component: ClientDelete
    },
    {
        path: "products",
        component: ProductGetall
    },
    {
        path: "products/new",
        component: ProductCreate
    },
    {
        path: "products/edit/:id",
        component: ProductUpdate
    },
    {
        path: "products/delete/:id",
        component: ProductDelete
    },
    {
        path: "sales",
        component: SaleGetall
    },
    {
        path: "sales/new",
        component: SaleCreate
    },
    {
        path: "sales/edit/:id",
        component: SaleSaleUpdate
    },
    {
        path: "sales/delete/:id",
        component: SaleDelete
    },
];

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

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

@Component({
  selector: 'app-aside',
  standalone: true,
  imports: [PanelMenu],
  templateUrl: './aside.html',
  styleUrl: './aside.css'
})
export class Aside {
items: MenuItem[] | undefined;
ngOnInit() {
        this.items = [
            {
        label: 'Clientes',
        icon: 'pi pi-fw pi-users',
        routerLink: '/clients',
      },
      {
        label: 'Tipo Productos',
        icon: 'pi pi-fw pi-qrcode',

      },
      {
        label: 'Productos',
        icon: 'pi pi-fw pi-shopping-bag',
        routerLink: '/products',
      },
      {
        label: 'Ventas',
        icon: 'pi pi-fw pi-shopping-cart',
        routerLink: '/sales',
      }
        ];
    }
}

y vamos al navegador http://localhost:4200