Integração com serviços de back-end no Angular Grid

Veja como estender sua API Web para dar suporte a recursos de paginação remota e como integrar serviços de back-end no Angular Grid com o Ignite UI for Angular.

Zdravko Kolev Last Updated Feb 26, 2025 6min read

Em aplicativos Web modernos, o gerenciamento eficiente de grandes conjuntos de dados é crucial para oferecer desempenho ideal e ótima experiência do usuário. Uma das melhores práticas para conseguir isso é implementar a paginação remota em sua API Web, que permite que os clientes busquem apenas os dados necessários sob demanda. Neste artigo, exploraremos como estender sua API Web para dar suporte a recursos de paginação remota e integrá-la perfeitamente ao componente igxGrid da interface do usuário do Ignite ou a qualquer outro componente que possa consumir dados remotos.

Então, vamos direto ao ponto para entender como tudo isso funciona.

Por que estender a API Web com base nas práticas recomendadas de especificação OData?

A partir do próprio código, você notará que ele abrange várias características do OData. Particularmente quando se trata de lidar com parâmetros de consulta para paginação e classificação. No entanto, ele também incorpora elementos que vão além da implementação tradicional do OData.

Quer saber por quê? OData (Open Data Protocol) é uma estrutura padronizada para criar e consumir APIs RESTful, oferecendo vantagens significativas como interoperabilidade e padronização. Seguindo as especificações OData, diferentes aplicativos podem se comunicar com mais eficiência, o que é extremamente benéfico em ambientes corporativos em que vários sistemas interagem.

Além disso, os recursos avançados de consulta do OData permitem que os clientes filtrem, classifiquem e paginem dados sem modificações no lado do servidor, aumentando a flexibilidade. Ele suporta várias fontes e formatos de dados, como JSON e XML, tornando-o uma opção versátil para diversos requisitos de aplicativos.

OData Specifics

Por ter pontos de extremidade separados (GetCustomersWithSkip e GetCustomersWithPage), o código implementa diferentes estilos de paginação (skip/top vs. índice/tamanho da página). O OData normalmente ofereceria um único ponto de extremidade unificado que aceita seus parâmetros de consulta, fornecendo uma interface mais padronizada.

O OData v3 expõe solicitações separadas de dados e a contagem total de registros, além de fornecer a contagem total dentro do mesmo resultado de objeto. Aqui estão os pontos de extremidade relevantes:

Buscando dados com Skip e Top: esse endpoint recupera um subconjunto específico de produtos enquanto ignora um número definido de registros.
Mesmo resultado de objeto com contagem em linha– A mesma consulta pode retornar o total de registros junto com o conjunto de dados.
URL separado para contagem total: para recuperar apenas a contagem total de produtos.

O OData v4 continua essa tendência fornecendo a contagem total de registros como parte do mesmo resultado de objeto, bem como por meio de uma solicitação separada.

Buscando dados com ignorar
Opções de consulta do sistema ($top e $skip)– Você pode usar as seguintes consultas para controlar o número de resultados:

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

Opção de consulta do sistema ($count)– Para obter a contagem total separadamente.

Para obter informações detalhadas, consulte a documentação do OData v4.

A diferença entre a abordagem de salto/topo e a abordagem de índice/tamanho de página

Entender a diferença entre as abordagens skip/top e page/index/size é essencial para implementar a paginação remota de forma eficaz.

Skip and Top

Ignorar: número de registros a serem ignorados antes de começar a buscar dados.
Superior: número máximo de registros a serem buscados.
Caso de uso: melhor para cenários em que você deseja controlar a paginação explicitamente sem calcular o total de páginas.

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

Índice e tamanho da página

Índice de página: indica a página atual de resultados (com base em 0).
Tamanho: Especifica quantos registros devem ser retornados por página.
Caso de uso: Mais intuitivo para os usuários, pois se alinha naturalmente com o conceito de páginas.

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

Estendendo o serviço para dar suporte ao OrderBy

Para aprimorar sua API, considere estendê-la para dar suporte à ordenação dos resultados. Você pode fazer isso adicionando um parâmetro orderBy às suas solicitações, permitindo que os clientes especifiquem os campos e classifiquem as direções. Essa flexibilidade pode melhorar significativamente a experiência do usuário na apresentação de dados.

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); 
    } 
}

Código completo disponível aqui, ver.

Como funciona a paginação remota no igxGrid?

Em primeiro lugar, Ignite UI é uma biblioteca completa de centenas de componentes de interface do usuário para criar aplicativos da Web de alto desempenho, ricos em dados e escaláveis. Inclui o Angular Data Grid mais rápido do mercado, 120+ gráficos de alto desempenho e outros controles e recursos exclusivos, como Hierarchical Grid, layout de várias linhas, filtragem avançada e muito mais. Para obter mais informações, você pode comparar nossos componentes Angular com os de outros fornecedores.

O componente igxGrid no Ignite UI foi projetado para funcionar perfeitamente com paginação remota. Ele busca dados dinamicamente à medida que os usuários navegam pelas páginas, garantindo que apenas os registros necessários sejam carregados. Isso resulta em melhor desempenho e uma interface mais responsiva.

Quando configurado corretamente, o igxGrid enviará solicitações para páginas específicas, utilizando a abordagem skip/top ou page/index / size com base no design da API.

Veja mais sobre paginação remota no 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.

Você também pode explorar este aplicativo de demonstração de paginação Angular.

E confira nosso repositório GitHub com o código.

Como configurar a paginação remota de grade no App Builder

Agora existe uma maneira mais rápida e direta de configurar a paginação remota com o App Builder. Esta é uma plataforma low-code baseada em nuvem para criar aplicativos da Web modernos. Essa ferramenta de arrastar e soltar funciona como uma única fonte de verdade, trazendo 60+ componentes reais da interface do usuário, garantindo uma ligação de dados perfeita e integrando um sistema de design completo –Indigo.Design, enquanto acelera o tempo de desenvolvimento em 80%. Eliminando a codificação manual propensa a erros, o App Builder é a única ferramenta RAD no mercado que gera código Angular, Blazor, Web Components e React limpo e pronto para produção com um clique de Sketch e Figma arquivos de design ou aplicativos criados do zero.

Veja como configurar a paginação remota no App Builder:

Selecione o modo de paginação remota: na configuração da grade, ative a paginação remota.
Configurar endpoints de API: especifique os endpoints para recuperação de dados e contagens totais de registros.
Definir parâmetros de consulta: configure os parâmetros de consulta para paginação, como skip, top, pageIndex e size.
Associar a grade aos dados: conecte a grade ao contexto de dados retornado, garantindo que ela reflita os dados paginados.

Para obter orientação visual, consulte a documentação fornecida no App Builder.

Conclusão

A integração de serviços de back-end com o igxGrid do Ignite UI para paginação remota pode melhorar significativamente o desempenho e a usabilidade de seus aplicativos da web. Ao utilizar os padrões OData e configurar corretamente sua API Web, você pode criar uma experiência perfeita para os usuários que interagem com grandes conjuntos de dados. Essa configuração não apenas melhora os tempos de carregamento, mas também oferece flexibilidade na forma como os dados são acessados e exibidos.

Angular