¿Qué es CRUD?

    CRUD es un acrónimo en programación informática que significa las operaciones CREAR, LEER, ACTUALIZAR, ELIMINAR que se pueden realizar en una recopilación de datos. En el mundo de la informática, hablar de aplicaciones CRUD es una diferencia principal en comparación con las aplicaciones que proporcionan datos de solo lectura a los usuarios.

    CRUD Angular

    Al hablar de Angular CRUD u operaciones CRUD en Angular, es importante tener en cuenta que el almacenamiento de datos se realiza en un servidor remoto. La aplicación Angular no puede acceder directamente a la capa de datos, por lo que necesita comunicarse con ella a través de una API web que proporciona puntos finales para las operaciones CRUD, es decir:

    API Operación métodos HTTP
    "api/entidades" LEER todas las entidades CONSEGUIR
    "api/entidades/id" LEA la entidad con la identificación correspondiente CONSEGUIR
    "api/entidades/actualización" ACTUALIZAR la entidad con la identificación correspondiente PONER / PARCHE
    "api/entidades/crear" CREAR una nueva entidad CORREO
    "api/entidades/eliminar" ELIMINAR la entidad con la identificación correspondiente BORRAR

    Tenga en cuenta que las operaciones CRUD también se asignan conceptualmente a los métodos HTTP que se utilizan para comunicarse con las API a través de HTTP.

    El código completo que funcionará con la API mencionada anteriormente se puede resumir en un servicio Angular. Un servicio de este tipo es inyectable y puede ser reutilizado por cualquier componente que necesite realizar operaciones CRUD en la misma base de datos. Una buena práctica es escribir dicho servicio lo más genérico posible, haciéndolo así adecuado para ser reutilizado en muchos componentes y también en diferentes servidores.

    Un ejemplo genérico de dicho servicio se verá así:

    @Injectable()
export class CRUDService {
  /** See https://angular.io/api/common/http/HttpClient */
  constructor(private http: HttpClient) { }

  /** Gets all entities from server */
  public getData() {
      return this.http.get(`${this.serverURL}\api\entities`);
  }

  /** Gets entity with corrresponding id */
  public getRecord(id) {
      return this.http.get(`${this.serverURL}\api\entities\${id}`);
  }

  /** Creates entity from body */
  public add(entity) {
      return this.http.post(`${this.serverURL}\api\entities\create`, entity);
  }

  /* Updates entity with data from body */
  public update(entity) {
      return this.http.put(`${this.serverURL}\api\entities\update`, entity);
  }

  /** Deletes the corresponding entity */
  public delete(entity) {
      return this.http.delete(`${this.serverURL}\api\entities\delete`, entity);
  }
}

    Lo que le falta al servicio anterior es la configuración para filtrado/clasificación/paginación, etc. Dependiendo de la implementación API exacta de los puntos finales, las solicitudes al servidor pueden necesitar parámetros opcionales para manejar el filtrado/clasificación/paginación por usted. Consulte nuestras Operaciones remotas de datos para ver demostraciones acompañadas de ejemplos de código.

    Para obtener más ejemplos y orientación, consulte el tutorial de servicios HTTP en la documentación oficial Angular.

    Operaciones CRUD con Grid

    Habilitar CRUD en Grid significa proporcionar una interfaz de usuario para que los usuarios realicen estas operaciones CRUD desde dentro del grid. Esto es bastante fácil: Grid proporciona una interfaz de usuario de edición de celdas, edición de filas, adición y eliminación de filas lista para usar, y una potente API para hacer esto por su cuenta. A continuación, queremos tomar el resultado de cada acción de edición y comunicarlo al método correspondiente en nuestro servicio CRUD, preservando así todos los cambios en la base de datos original. Al completar esto, podemos decir que la cuadrícula está habilitada para CRUD.

    Esta sección está escrita como un tutorial práctico sobre cómo habilitar operaciones CRUD en Grid, acompañada de fragmentos de código que puede tomar y copiar y pegar en su código.

    How to

    Primero habilitemos el comportamiento de edición de filas, traigamos la interfaz de usuario que necesitamos para las acciones de edición, beneficiándonos de IgxActionStrip (ver más sobre IgxActionStrip) y adjuntemos controladores de eventos:

    <igx-grid 
    primaryKey="ID"
    [rowEditable]="true"
    (rowAdded)="rowAdded($event)"
    (rowDeleted)="rowDeleted($event)"
    (rowEditDone)="rowEditDone($event)">

  <igx-action-strip #actionstrip>
      <igx-grid-editing-actions [addRow]="true"></igx-grid-editing-actions>
  </igx-action-strip>

    En el componente Angular, inyecte el servicio de datos usando DI. Ahora estamos listos para usar el servicio para realizar operaciones CRUD completas en nuestra capa de datos:

    constructor(private crudService: CRUDService) { }

public rowDeleted(event: IRowDataEventArgs) {
    this._crudService.delete(event.data).subscribe((rec) => {
        // notification or do any adittional handling
        this.snackbar.open(`Row with ID of ${rec.ID} was deleted.`);
    });
}

public rowAdded(event: IRowDataEventArgs) {
    this._crudService.add(event.data);
}

public rowEditDone(event: IGridEditDoneEventArgs) {
    this._crudService.update(event.newValue);
}

    En el ejemplo anterior, solo llamamos a los métodos correspondientes y pasamos los datos que se leen de los argumentos del evento. La mayoría de los puntos finales de API devolverán la entidad actualizada/agregada/eliminada, lo que indica que la solicitud se realizó correctamente.

    Una buena práctica es agregar validación, notificando a los usuarios que todas las acciones se completaron exitosamente o que se produjo un error. En tal caso, es posible que desee pasar controladores para el error y completar las notificaciones también:

    this._crudService.delete(event.data).subscribe({
    next: (data: any) => {
      console.log('success');
    },
    error: err => {
      console.log(err);
    },
    complete: () => {
      console.log('Complete notification')
    }
});
    Note

    Los ejemplos anteriores se basan en la interfaz de usuario de cuadrícula predeterminada para editar acciones. Otro enfoque válido es proporcionar su propia interfaz de usuario externa. En tal caso, responder a las interacciones del usuario con la interfaz de usuario debería funcionar con la API de edición de la cuadrícula (asegúrese de que la cuadrícula tenga una clave primaria configurada). Consulte la sección API como referencia.

    Note

    Asegúrese de seguir las mejores prácticas y evitar diferencias en sus datos locales en comparación con la base de datos del servidor. Por ejemplo, puede decidir realizar primero una solicitud al servidor para eliminar un registro, pero si la solicitud falla, no elimine los datos de la red local:

    this._crudService.delete(event.data).subscribe({
    next: (data: any) => {
      this.grid.getRowByKey(event.data[this.grid.primaryKey]).delete();
    },
    error: err => {
      console.log(err); // notify and don't delete the grid row
    }
});

    Demo

    Vea la demostración que se creó siguiendo las instrucciones. Juegue con él y pruebe los ejemplos de personalización para que se adapten a su escenario de la mejor manera posible.

    Personalizaciones

    La rica API Grid le permite personalizar el proceso de edición en casi cualquier forma para satisfacer sus necesidades. Esto incluye, pero no se limita a:

    • Edición por lotes: habilite la edición por lotes para agrupar todas las actualizaciones y confirmar todo con una sola solicitud.
    • Plantillas: agregue plantillas para editar celdas o use su propia interfaz de usuario externa para editar filas/celdas, agregar filas y eliminar filas.
    • Eventos: Supervise el flujo de edición y reaccione en consecuencia. Adjuntar controladores de eventos para todos los eventos emitidos durante la edición le permitirá hacer:
      • validación de datos por celda
      • validación de datos por fila
      • solicitar al usuario el tipo de entrada esperado
      • cancelar el procesamiento posterior, según las reglas comerciales
      • confirmación manual de los cambios
    • API rica

    Edición por lotes

    • Habilite la edición por lotes para mantener sus actualizaciones en el cliente y confirmarlas todas con una sola solicitud. La actualización por lotes se habilita configurando la opción batchEditing por lotes en verdadero:
    <igx-grid [batchEditing]="'true'" ...>

    Vaya a Edición por lotes para obtener más detalles y muestras de demostración.

    Plantillas

    Puede ver y obtener más información sobre las plantillas de edición de celdas predeterminadas en el tema de edición general.

    Si desea proporcionar una plantilla personalizada que se aplicará cuando una celda esté en modo de edición, puede utilizar la igxCellEditor​directiva . Para hacer esto, debe pasar una ng-template marcada con la directiva igxCellEditor y vincular correctamente su control personalizado al cell.editValue:

    <igx-column field="class" header="Class" [editable]="true">
    <ng-template igxCellEditor let-cell="cell" let-value>
        <igx-select class="cell-select" [(ngModel)]="cell.editValue" [igxFocus]="true">
            <igx-select-item *ngFor="let class of classes" [value]="class">
                {{ class }}
            </igx-select-item>
        </igx-select>
    </ng-template>
</igx-column>

    Para obtener más información y demostraciones, consulte el tema Edición de celdas.

    Eventos

    La cuadrícula expone una amplia gama de eventos que brindan un mayor control sobre la experiencia de edición. Estos eventos se activan durante el ciclo de vida de Edición de filas y Edición de celdas: al iniciar, confirmar o cancelar la acción de edición.

    Evento Descripción Argumentos Para interrumpir
    rowEditEnter SirowEditing está habilitado, se activa cuando una fila ingresa al modo de edición IGridEditEventArgs true
    cellEditEnter Se activa cuando una celda ingresa al modo de edición (después derowEditEnter) IGridEditEventArgs true
    cellEdit Si se cambia el valor, se activa justo antes de que se confirme el valor de una celda (por ejemplo, presionandoEnter) IGridEditEventArgs true
    cellEditDone Si se cambia el valor, se activa después de que se haya editado una celda y se haya confirmado el valor de la celda. IGridEditDoneEventArgs false
    cellEditExit Se activa cuando una celda sale del modo de edición IGridEditDoneEventArgs false
    rowEdit SirowEditing está habilitado, se activa justo antes de que se confirme el valor de una fila en el modo de edición (por ejemplo, al hacer clic en el botónDone en la superposición de edición de filas) IGridEditEventArgs true
    rowEditDone SirowEditing está habilitado, se activa después de que se haya editado una fila y se haya confirmado el valor de la nueva fila. IGridEditDoneEventArgs false
    rowEditExit SirowEditing está habilitado, se activa cuando una fila sale del modo de edición IGridEditDoneEventArgs false

    Vaya a Eventos para obtener más detalles y muestras de demostración.

    Editing API

    La actualización de datos en el grid se logra mediante métodos expuestos tanto por el grid:

    y método update expuesto por las instancias IgxGridCell e IgxGridRow:

    // Through the grid methods
this.grid.updateRow(newData, rowKey);
this.grid.updateCell(newData, rowKey, columnField);
this.grid1.deleteRow(0);
this.grid.addRow(data);

// Through the methods exposed by cell/row
this.grid.getCellByColumn(rowIndex, columnField).update(newData);
this.grid.getCellByKey(rowKey, columnField).value = newData;
this.grid.getRowByKey(rowID).update(newData);
this.grid.getRowByKey(rowID).delete();

    Puede encontrar más detalles e información sobre el uso de la API de grid en la sección Operaciones CRUD de edición de celdas.

    Llevar

    Habilitar CRUD de manera sólida es un hito importante para cualquier aplicación basada en datos. Para agilizar todo el proceso, hemos creado IgxGrid teniendo en cuenta las capacidades CRUD, proporcionando una interfaz de usuario lista para usar y API flexibles. ¿Cómo le beneficiará esto? Le ahorrará mucho tiempo al implementar CRUD en cualquier base de datos disponible. Y cuando hablamos de aplicaciones modernas basadas en datos, todo se reduce a solidez, velocidad y flexibilidad.

    Referencias de API