Integración con servicios de backend en Angular Grid

En las aplicaciones web modernas, la gestión eficiente de grandes conjuntos de datos es crucial para ofrecer un rendimiento óptimo y una gran experiencia de usuario. Una de las prácticas recomendadas para lograrlo es implementar la paginación remota en la API web, lo que permite a los clientes capturar solo los datos necesarios a petición. En este artículo, entonces, exploraremos cómo ampliar su API web para admitir capacidades de paginación remota e integrarla sin problemas con el componente igxGrid de Ignite UI o cualquier otro componente que pueda consumir datos remotos.

Entonces, vayamos directo al grano para entender cómo funciona todo esto.

¿Por qué ampliar la API web en función de los procedimientos recomendados de especificación de OData?

Desde el propio código, notarás que cubre varias características de OData. Especialmente cuando se trata de manejar parámetros de consulta para la paginación y la ordenación. Sin embargo, también incorpora elementos que van más allá de la implementación tradicional de OData.

¿Te preguntas por qué? OData (Open Data Protocol) es un marco estandarizado para crear y consumir API RESTful, que ofrece ventajas significativas como la interoperabilidad y la estandarización. Al seguir las especificaciones de OData, las diferentes aplicaciones pueden comunicarse de manera más eficaz, lo que es extremadamente beneficioso en entornos empresariales donde interactúan varios sistemas.

Además, las capacidades de consulta enriquecidas de OData permiten a los clientes filtrar, ordenar y paginar datos sin modificaciones del lado del servidor, lo que mejora la flexibilidad. Es compatible con varias fuentes y formatos de datos, como JSON y XML, lo que lo convierte en una opción versátil para diversos requisitos de aplicaciones.

OData Specifics

Al tener puntos de conexión independientes (GetCustomersWithSkip y GetCustomersWithPage), el código implementa diferentes estilos de paginación (skip/top frente a index/tamaño de página). Normalmente, OData ofrecería un único punto de conexión unificado que acepta sus parámetros de consulta, lo que proporciona una interfaz más estandarizada.

OData v3 expone solicitudes independientes de datos y el recuento total de registros, además de proporcionar el recuento total dentro del mismo resultado de objeto. Estos son los puntos finales relevantes:

• Obtención de datos con Skip y Top: este punto de conexión recupera un subconjunto específico de productos mientras omite un número definido de registros.
• Resultado del mismo objeto con recuento en línea: la misma consulta puede devolver los registros totales junto con el conjunto de datos.
• URL separada para el recuento total: para recuperar solo el recuento total de productos.

OData v4 continúa esta tendencia proporcionando el recuento total de registros como parte del mismo resultado de objeto, así como a través de una solicitud independiente.

• Obtención de datos con Skip
• Opciones de consulta del sistema ($top y $skip): puede utilizar las siguientes consultas para controlar el número de resultados:

GET https://services.odata.org/TripPinRESTierService/People?$top=2
GET https://services.odata.org/TripPinRESTierService/People?$ski

• Opción de consulta del sistema ($count): para obtener el recuento total por separado.

Para obtener información detallada, consulte la documentación de OData v4.

La diferencia entre el enfoque de salto/parte superior y el enfoque de índice/tamaño de página

Comprender la diferencia entre los enfoques de salto/parte superior e índice/tamaño de página es esencial para implementar la paginación remota de manera eficaz.

Skip and Top

• Omitir: número de registros que se van a omitir antes de empezar a capturar datos.
• Superior: Número máximo de registros que se van a obtener.
• Caso de uso: Es el mejor para escenarios en los que desea controlar la paginación explícitamente sin calcular el total de páginas.

var pagedResult = pagingService.FetchPagedData<CustomerDb, CustomerDto>(
customers, skip: 10, top: 20, orderBy: "CustomerName acs");

Índice y tamaño de página

• Índice de página: Indica la página actual de resultados (basada en 0).
• Tamaño: especifica el número de registros que se van a devolver por página.
• Caso de uso: Más intuitivo para los usuarios ya que se alinea naturalmente con el concepto de páginas.

var pagedResult = pagingService.FetchPagedData<CustomerDb, CustomerDto>(
customers, pageIndex: 1, size: 20, orderBy: "CustomerName asc");

Ampliación del servicio para admitir OrderBy

Para mejorar la API, considere la posibilidad de ampliarla para admitir el orden de los resultados. Puede hacerlo agregando un parámetro orderBy a sus solicitudes, lo que permite a los clientes especificar los campos y las direcciones de ordenación. Esta flexibilidad puede mejorar significativamente la experiencia del usuario en la presentación de datos.

Code Example:

[HttpGet("GetCustomersWithOrderBy")] 
public ActionResult<PagedResultDto<CustomerDto>> GetCustomersWithOrderBy( 
    [FromQuery][Attributes.SwaggerOrderByParameter] string? orderBy) 
{ 
    try 
    { 
        var customers = this.customerService.GetAllAsQueryable(); 
        var pagedResult = pagingService.FetchPagedData<CustomerDb, CustomerDto>(customers, orderBy: orderBy); 
        return Ok(pagedResult); 
    } 
    catch (Exception error) 
    { 
        logger.LogError(error.Message); 
        return StatusCode(500); 
    } 
} 
 

El código completo está disponible aquí, ver.

¿Cómo funciona la paginación remota en igxGrid?

En primer lugar, Ignite UI es una biblioteca completa de cientos de componentes de interfaz de usuario para crear aplicaciones web escalables, ricas en datos y de alto rendimiento. Incluye la cuadrícula de datos de Angular más rápida del mercado, 120+ gráficos de alto rendimiento y otros controles y características exclusivos, como cuadrícula jerárquica, diseño de varias filas, filtrado avanzado y más. Para obtener más información, puede comparar nuestros componentes de Angular con los de otros proveedores.

El componente igxGrid de Ignite UI está diseñado para funcionar sin problemas con la paginación remota. Recupera datos de forma dinámica a medida que los usuarios navegan por las páginas, asegurándose de que solo se carguen los registros necesarios. Esto da como resultado un rendimiento mejorado y una interfaz más receptiva.

Cuando se configura correctamente, igxGrid enviará solicitudes para páginas específicas, utilizando el enfoque de salto/parte superior o de índice/tamaño de página según el diseño de su API.

A continuación, encontrará más información sobre la paginación remota en Ignite UI for Angular Grid.

component.ts

public ngAfterViewInit() {
    // Initialize Grid
    this.grid1.isLoading = true;
    this.data$ = this.northwindService.remoteData$;
    this.totalRecords$ = this.northwindService.dataLength$;

    // Load Grid data
    this.paginateGrid();

    this.data$.pipe(takeUntil(this.destroy$)).subscribe(() => {
      this.isLoading = false;
    });
...

public paginateGrid() {
    this.isLoading = true;
    const { skip, top } = this.calculatePagination(this.grid1.page, this._perPage);
    this.northwindService.getData(skip, top);
  }

private calculatePagination(page: number, perPage: number) {
    const skip = page * perPage;
    const top = perPage;
    return { skip, top };
  }

Here is the angular remote service.

También puede explorar esta Angular aplicación de demostración de paginación.

Y echa un vistazo a nuestro repositorio de GitHub con el código.

Cómo configurar la paginación remota de cuadrícula en App Builder

Ahora hay una forma más rápida y sencilla de configurar la paginación remota con App Builder. Se trata de una plataforma low-code basada en la nube para crear aplicaciones web modernas. Esta herramienta de arrastrar y soltar funciona como una única fuente de verdad, aportando 60+ componentes de interfaz de usuario reales, garantizando un enlace de datos sin interrupciones e integrando un sistema de diseño completo, Indigo.Design, al tiempo que acelera el tiempo de desarrollo en un 80%. Al eliminar la codificación manual propensa a errores, App Builder es la única herramienta RAD en el mercado que genera código Angular, Blazor, Web Components y React limpio y listo para la producción con un clic desde archivos de diseño Sketch y Figma o aplicaciones creadas desde cero.

A continuación, se explica cómo configurar la paginación remota en App Builder:

• Seleccione Modo de paginación remota: en la configuración de la cuadrícula, habilite la paginación remota.
• Configurar puntos de conexión de API: especifique los puntos de conexión para la recuperación de datos y los recuentos totales de registros.
• Definir parámetros de consulta: configure los parámetros de consulta para la paginación, como skip, top, pageIndex y size.
• Enlazar la cuadrícula a los datos: conecte la cuadrícula al contexto de datos devuelto, asegurándose de que refleje los datos paginados.

Para obtener orientación visual, consulte la documentación proporcionada en el App Builder.

Conclusión

La integración de los servicios de backend con igxGrid de Ignite UI para la paginación remota puede mejorar significativamente el rendimiento y la usabilidad de sus aplicaciones web. Al utilizar los estándares de OData y configurar correctamente la API web, puede crear una experiencia fluida para los usuarios que interactúan con grandes conjuntos de datos. Esta configuración no solo mejora los tiempos de carga, sino que también proporciona flexibilidad en la forma en que se accede y se muestran los datos.