Header Ads Widget

Ticker

6/recent/ticker-posts

Ejemplo de aplicación CRUD de Angular 10 con REST Web API y Bootstrap 4

 A lo largo de este tutorial, aprenderemos cómo construir una aplicación CRUD de Angular 10 con estilos Bootstrap 4 para consumir una API web REST, crear, leer, modificar y buscar datos.

Descargue este tutorial como un libro electrónico PDF para leer sin conexión.

Presentamos nuestra aplicación CRUD de Angular 10

Aprenderemos cómo construir una aplicación de interfaz de usuario de Angular 10 que obtenga datos de una API REST de productos:

  • Cada producto tiene identificación, nombre, descripción, estado de disponibilidad.
  • Los usuarios podrían crear, recuperar, actualizar y eliminar productos.
  • Los usuarios pueden buscar productos por nombre.

Los puntos finales de la API REST

Crearemos una aplicación de interfaz de Angular 10 para una supuesta API REST que exporta los siguientes puntos finales de la API REST:

  • POST / api / products crean un nuevo producto
  • GET / api / products recupera todos los productos
  • GET / api / products /: id recuperar un producto por :id
  • PUT / api / products /: id actualizar un producto por :id
  • DELETE / api / products /: id eliminar un producto por :id
  • DELETE / api / products eliminar todos los productos
  • GET / api / products? Name = [palabra clave] encuentra todos los productos cuyo nombre contiene el pasado keyword.

Todos ellos pueden funcionar bien con esta aplicación angular.

Estructura de la aplicación Angular 10 CRUD

Estos son los componentes de nuestra aplicación CRUD:

  • El Appcomponente es el padre de todos los demás componentes y contiene una router-outletdirectiva donde el enrutador insertará cualquier componente coincidente. También contiene una barra de navegación que contiene enlaces a las rutas de la aplicación mediante la routerLinkdirectiva.

ProductListComponentque muestra la lista de productos.
ProductUpdateComponentque muestra un formulario para editar los detalles del producto por :id.
ProductCreateComponentque muestra un formulario para crear un nuevo producto.

Los componentes utilizan los ProductServicemétodos para realizar operaciones CRUD en la API REST. El servicio hace uso de Angular 10 HTTPClientpara enviar solicitudes HTTP al REST y procesar respuestas.

Paso 1: creación de un nuevo proyecto de Angular 10

Comencemos generando un nuevo proyecto Angular 10 usando la CLI. Necesita ejecutar el siguiente comando:

$ ng new Angular10CRUDExample 

La CLI le hará un par de preguntas: ¿ Si desea agregar enrutamiento angular? Escriba y para Sí y ¿Qué formato de hoja de estilo le gustaría usar? Elija CSS .

Paso 2: generación de componentes y servicio CRUD de Angular 10

A continuación, necesitamos generar un montón de componentes y un servicio usando la CLI de Angular de la siguiente manera:

$ ng generate service services/product
$ ng g c components/product-create
$ ng g c components/product-details
$ ng g c components/product-list

Hemos generado tres componentes product-listproduct-detailsproduct-createy un servicio de producto que proporciona los métodos necesarios para el envío de peticiones HTTP al servidor.

También tenemos los siguientes artefactos:

- El src/app/app-routing.module.tsmódulo contendrá rutas para cada componente. Angular CLI genera este archivo automáticamente cuando responde Sí para el enrutamiento. - El Appcomponente contiene la vista del enrutador y la barra de navegación.
- El src/app/app.module.tsmódulo declara nuestros componentes Angular e importa los módulos necesarios como Angular HttpClient.

Paso 3: Importar FormsModuleyHttpClientModule

Usaremos el cliente http y los formularios en nuestra aplicación CRUD que se proporcionan en sus propios módulos en Angular, por lo que tendremos que importar estos módulos, FormsModuleHttpClientModule.

Abra el src/app/app.module.tsarchivo e importe FormsModule, de la HttpClientModulesiguiente manera:

// [...]
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [ ... ],
  imports: [
    ...
    FormsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Paso 4: agregar rutas para los componentes CRUD

Tenemos los componentes que componen la interfaz de usuario de nuestra aplicación pero necesitamos vincularlos con sus rutas para poder navegar entre ellos usando el enrutador Angular 10.

Crearemos tres rutas:

/productspara el product-listcomponente, - /products/:idpara el product-detailscomponente, - /createpara el product-createcomponente.

Abra el src/app/app-routing.module.tsarchivo y actualícelo de la siguiente manera:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { ProductListComponent } from './components/product-list/product-list.component';
import { ProductDetailsComponent } from './components/product-details/product-details.component';
import { ProductCreateComponent } from './components/product-create/product-create.component';

const routes: Routes = [
  { path: '', redirectTo: 'products', pathMatch: 'full' },
  { path: 'products', component: ProductListComponent },
  { path: 'products/:id', component: ProductDetailsComponent },
  { path: 'create', component: ProductCreateComponent }
];

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

Paso 5: agregar y diseñar una barra de navegación con Bootstrap 4

A continuación, agreguemos Bootstrap 4 a nuestra aplicación y una barra de navegación.

Usaremos Bootstrap 4 para diseñar la interfaz de usuario, por lo que deberá instalarlo en su proyecto. Vea tres formas de cómo agregar bootstrap a su proyecto Angular .

Abra el src/app/app.component.htmlarchivo y actualice de la siguiente manera:

<div>
  <nav class="navbar navbar-expand navbar-dark bg-dark">
    <a href="#" class="navbar-brand">Techiediaries</a>
    <div class="navbar-nav mr-auto">
      <li class="nav-item">
        <a routerLink="products" class="nav-link">Products</a>
      </li>
      <li class="nav-item">
        <a routerLink="create" class="nav-link">Create</a>
      </li>
    </div>
  </nav>

  <div class="container mt-5">
    <router-outlet></router-outlet>
  </div>
</div>

Hemos creado una barra de navegación de arranque y hemos envuelto la salida del enrutador con un contenedor div.

Paso 6: creación de un servicio CRUD de Angular 10

A continuación, necesitamos crear un servicio CRUD que usará Angular 10 HTTPClientpara enviar solicitudes HTTP al servidor de la API REST.

Abra el src/services/product.service.tsarchivo y actualícelo de la siguiente manera:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

const baseURL = 'http://localhost:8080/api/products';

@Injectable({
  providedIn: 'root'
})
export class ProductService {

  constructor(private httpClient: HttpClient) { }

  readAll(): Observable<any> {
    return this.httpClient.get(baseURL);
  }

  read(id): Observable<any> {
    return this.httpClient.get(`${baseURL}/${id}`);
  }

  create(data): Observable<any> {
    return this.httpClient.post(baseURL, data);
  }

  update(id, data): Observable<any> {
    return this.httpClient.put(`${baseURL}/${id}`, data);
  }

  delete(id): Observable<any> {
    return this.httpClient.delete(`${baseURL}/${id}`);
  }

  deleteAll(): Observable<any> {
    return this.httpClient.delete(baseURL);
  }

  searchByName(name): Observable<any> {
    return this.httpClient.get(`${baseURL}?name=${name}`);
  }
}

Paso 7: Implementación de los componentes CRUD de Angular 10

Hemos generado previamente tres componentes y los hemos agregado al enrutador, ahora implementemos la funcionalidad real de cada componente.

Creación de un nuevo componente de producto

Este componente proporciona un formulario para enviar un nuevo producto con dos campos namedescriptionInyecta y llama al ProductService.create()método.

Abra el src/components/product-create/product-create.component.tsarchivo y actualícelo de la siguiente manera:

import { Component, OnInit } from '@angular/core';
import { ProductService } from 'src/app/services/product.service';

@Component({
  selector: 'app-product-create',
  templateUrl: './product-create.component.html',
  styleUrls: ['./product-create.component.css']
})
export class ProductCreateComponent implements OnInit {
  product = {
    name: '',
    description: '',
    available: false
  };
  submitted = false;

  constructor(private productService: ProductService) { }

  ngOnInit(): void {
  }

  createProduct(): void {
    const data = {
      name: this.product.name,
      description: this.product.description
    };

    this.productService.create(data)
      .subscribe(
        response => {
          console.log(response);
          this.submitted = true;
        },
        error => {
          console.log(error);
        });
  }

  newProduct(): void {
    this.submitted = false;
    this.product = {
      name: '',
      description: '',
      available: false
    };
  }

}

A continuación, abra el src/components/product-create/product-create.component.htmlarchivo y actualícelo de la siguiente manera:

<div style="width: 500px; margin: auto;">
  <div class="submit-form">
    <div *ngIf="!submitted">
      <div class="form-group">
        <label for="name">Name</label>
        <input
          type="text"
          class="form-control"
          id="name"
          required
          [(ngModel)]="product.name"
          name="name"
        />
      </div>

      <div class="form-group">
        <label for="description">Description</label>
        <input
          class="form-control"
          id="description"
          required
          [(ngModel)]="product.description"
          name="description"
        />
      </div>

      <button (click)="createProduct()" class="btn btn-success">Create</button>
    </div>

    <div *ngIf="submitted">
      <h3>You successfully created a product!</h3>
      <button class="btn btn-success" (click)="newProduct()">New..</button>
    </div>
  </div>
</div>

Visualización del componente Lista de productos

A continuación, implementemos el componente de lista de productos, que utiliza los siguientes métodos de servicio:

  • readAll()
  • deleteAll()
  • searchByName()

Abra el src/components/product-list/product-list.component.tsarchivo y actualícelo de la siguiente manera:

import { Component, OnInit } from '@angular/core';
import { ProductService } from 'src/app/services/product.service';

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css']
})
export class ProductListComponent implements OnInit {

  products: any;
  currentProduct = null;
  currentIndex = -1;
  name = '';

  constructor(private productService: ProductService) { }

  ngOnInit(): void {
    this.readProducts();
  }

  readProducts(): void {
    this.productService.readAll()
      .subscribe(
        products => {
          this.products = products;
          console.log(products);
        },
        error => {
          console.log(error);
        });
  }

  refresh(): void {
    this.readProducts();
    this.currentProduct = null;
    this.currentIndex = -1;
  }

  setCurrentProduct(product, index): void {
    this.currentProduct = product;
    this.currentIndex = index;
  }

  deleteAllProducts(): void {
    this.productService.deleteAll()
      .subscribe(
        response => {
          console.log(response);
          this.readProducts();
        },
        error => {
          console.log(error);
        });
  }

  searchByName(): void {
    this.productService.searchByName(this.name)
      .subscribe(
        products => {
          this.products = products;
          console.log(products);
        },
        error => {
          console.log(error);
        });
  }
}

Abra el src/components/product-list/product-list.component.htmlarchivo y actualícelo de la siguiente manera:

<div class="list row">
  <div class="col-md-8">
    <div class="input-group mb-4">
      <input
        type="text"
        class="form-control"
        placeholder="Search by name"
        [(ngModel)]="name"
      />
      <div class="input-group-append">
        <button
          class="btn btn-outline-secondary"
          type="button"
          (click)="searchByName()"
        >
          Search
        </button>
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <h4>Product List</h4>
    <ul class="list-group">
      <li
        class="list-group-item"
        *ngFor="let product of products; let i = index"
        [class.active]="i == currentIndex"
        (click)="setCurrentProduct(product, i)"
      >

      </li>
    </ul>

    <button class="m-4 btn btn-sm btn-danger" (click)="deleteAllProducts()">
      Delete All
    </button>
  </div>
  <div class="col-md-6">
    <div *ngIf="currentProduct">
      <h4>Product</h4>
      <div>
        <label><strong>Name:</strong></label> 
      </div>
      <div>
        <label><strong>Description:</strong></label>

      </div>
      <div>
        <label><strong>Status:</strong></label>

      </div>

      <a class="badge badge-warning" routerLink="/products/">
        Edit
      </a>
    </div>

    <div *ngIf="!currentProduct">
      <br />
      <p>Please click on a product</p>
    </div>
  </div>
</div>

Si hace clic en el botón Editar de cualquier producto, se le dirigirá a la página de detalles del producto con la /products/:idURL.

El componente Detalles del producto

A continuación, implementemos el componente de detalles del producto de nuestra aplicación Angular 10 CRUD.

Abra el src/components/product-details/product-details.component.tsarchivo y actualícelo de la siguiente manera:

import { Component, OnInit } from '@angular/core';
import { ProductService } from 'src/app/services/product.service';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'app-product-details',
  templateUrl: './product-details.component.html',
  styleUrls: ['./product-details.component.css']
})
export class ProductDetailsComponent implements OnInit {
  currentproduct = null;
  message = '';

  constructor(
    private productService: ProductService,
    private route: ActivatedRoute,
    private router: Router) { }

  ngOnInit(): void {
    this.message = '';
    this.getProduct(this.route.snapshot.paramMap.get('id'));
  }

  getProduct(id): void {
    this.productService.read(id)
      .subscribe(
        product => {
          this.currentProduct = product;
          console.log(product);
        },
        error => {
          console.log(error);
        });
  }

  setAvailableStatus(status): void {
    const data = {
      name: this.currentProduct.name,
      description: this.currentProduct.description,
      available: status
    };

    this.productService.update(this.currentProduct.id, data)
      .subscribe(
        response => {
          this.currentProduct.available = status;
          console.log(response);
        },
        error => {
          console.log(error);
        });
  }

  updateProduct(): void {
    this.productService.update(this.currentProduct.id, this.currentProduct)
      .subscribe(
        response => {
          console.log(response);
          this.message = 'The product was updated!';
        },
        error => {
          console.log(error);
        });
  }

  deleteProduct(): void {
    this.productService.delete(this.currentProduct.id)
      .subscribe(
        response => {
          console.log(response);
          this.router.navigate(['/products']);
        },
        error => {
          console.log(error);
        });
  }
}

Abra el src/components/product-details/product-details.component.htmlarchivo y actualícelo de la siguiente manera:

<div style="width: 500px; margin: auto;">
  <div *ngIf="currentProduct" class="edit-form">
    <h4>Product</h4>
    <form>
      <div class="form-group">
        <label for="title">Name</label>
        <input
          type="text"
          class="form-control"
          id="name"
          [(ngModel)]="currentProduct.name"
          name="name"
        />
      </div>
      <div class="form-group">
        <label for="description">Description</label>
        <input
          type="text"
          class="form-control"
          id="description"
          [(ngModel)]="currentProduct.description"
          name="description"
        />
      </div>

      <div class="form-group">
        <label><strong>Status:</strong></label>

      </div>
    </form>

    <button
      class="badge badge-primary mr-2"
      *ngIf="currentProduct.available"
      (click)="setAvailableStatus(false)"
    >
      Set Not Available
    </button>
    <button
      *ngIf="!currentProduct.available"
      class="badge badge-primary mr-2"
      (click)="setAvailableStatus(true)"
    >
      Set Available
    </button>

    <button class="badge badge-danger mr-2" (click)="deleteProduct()">
      Delete
    </button>

    <button
      type="submit"
      class="badge badge-success"
      (click)="updateProduct()"
    >
      Update
    </button>
    <p></p>
  </div>

  <div *ngIf="!currentProduct">
    <br />
    <p>This product is not accessible</p>
  </div>
</div>

Paso 8: Servicio de la aplicación CRUD de Angular 10

Regrese a su interfaz de línea de comandos, asegúrese de estar navegado en la raíz del directorio de su proyecto y ejecute el siguiente comando para iniciar un servidor de desarrollo en vivo en su máquina local:

$ cd Angular10CRUDExample
$ ng serve    

Vaya a su navegador web y navegue hasta la http://localhost:4200/dirección para comenzar a probar su aplicación.

Conclusión

En este tutorial, hemos creado una aplicación CRUD de Angular 10 para una API REST web y usamos Bootstrap 4 para diseñar la interfaz de usuario.

Publicar un comentario

0 Comentarios