Angular Grid의 백엔드 서비스와의 통합

Angular Grid의 백엔드 서비스와의 통합

원격 페이징 기능을 지원하도록 웹 API를 확장하는 방법과 Grid의 백엔드 서비스를 Ignite UI for Angular와 통합하는 방법을 Angular.

6min read

최신 웹 애플리케이션에서 대규모 데이터 세트를 효율적으로 관리하는 것은 최적의 성능과 뛰어난 사용자 경험을 제공하는 데 매우 중요합니다. 이를 달성하기 위한 모범 사례 중 하나는 Web API에서 원격 페이징을 구현하여 클라이언트가 요청 시 필요한 데이터만 가져올 수 있도록 하는 것입니다. 이 기사에서는 원격 페이징 기능을 지원하도록 웹 API를 확장하고 Ignite UI의 igxGrid 구성 요소 또는 원격 데이터를 사용할 수 있는 다른 구성 요소와 원활하게 통합하는 방법을 살펴봅니다.

따라서 이 모든 것이 어떻게 작동하는지 이해하기 위해 바로 본론으로 들어가 보겠습니다.

OData 사양 모범 사례에 따라 Web API를 확장하는 이유는 무엇인가요?

코드 자체에서 OData의 몇 가지 특성을 다루고 있음을 알 수 있습니다. 특히 페이지 매김 및 정렬에 대한 쿼리 매개 변수를 처리하는 경우. 그러나 기존 OData 구현을 넘어서는 요소도 통합합니다.

이유가 궁금하신가요? OData(Open Data Protocol)는 RESTful API를 구축하고 사용하기 위한 표준화된 프레임워크로, 상호 운용성 및 표준화와 같은 중요한 이점을 제공합니다. OData 사양을 따르면 서로 다른 애플리케이션이 보다 효과적으로 통신할 수 있으며, 이는 여러 시스템이 상호 작용하는 엔터프라이즈 환경에서 매우 유용합니다.

또한 OData의 풍부한 쿼리 기능을 통해 클라이언트는 서버 쪽을 수정하지 않고도 데이터를 필터링, 정렬 및 페이지 매김할 수 있으므로 유연성이 향상됩니다. JSON 및 XML과 같은 다양한 데이터 소스 및 형식을 지원하므로 다양한 애플리케이션 요구 사항에 대한 다목적 선택입니다.

OData Specifics

코드는 별도의 엔드포인트(GetCustomersWithSkip 및 GetCustomersWithPage)를 사용하여 다양한 페이지 매김 스타일(건너뛰기/위쪽 및 페이지 인덱스/크기)을 구현합니다. OData는 일반적으로 쿼리 매개 변수를 허용하는 단일 통합 엔드포인트를 제공하여 보다 표준화된 인터페이스를 제공합니다.

OData v3는 데이터에 대한 별도의 요청과 총 레코드 수를 모두 노출할 뿐만 아니라 동일한 개체 결과 내에서 총 수를 제공합니다. 관련 엔드포인트는 다음과 같습니다.

OData v4는 별도의 요청을 통해 뿐만 아니라 동일한 개체 결과의 일부로 총 레코드 수를 제공하여 이러한 추세를 계속합니다.

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

자세한 내용은 OData v4 설명서를 참조하세요.

건너뛰기/위쪽 접근 방식과 페이지 인덱스/크기 접근 방식의 차이점

건너뛰기/위쪽 및 페이지 인덱스/크기 접근 방식의 차이점을 이해하는 것은 원격 페이징을 효과적으로 구현하는 데 필수적입니다.

Skip and Top

  • 건너뛰기: 데이터 가져오기를 시작하기 전에 건너뛸 레코드 수입니다.
  • Top: 가져올 최대 레코드 수입니다.
  • 사용 사례: 총 페이지를 계산하지 않고 페이지 매김을 명시적으로 제어하려는 시나리오에 가장 적합합니다.
var pagedResult = pagingService.FetchPagedData<CustomerDb, CustomerDto>(
customers, skip: 10, top: 20, orderBy: "CustomerName acs");

페이지 인덱스 및 크기

  • 페이지 인덱스: 결과의 현재 페이지를 나타냅니다(0부터 시작).
  • 크기: 페이지당 반환할 레코드 수를 지정합니다.
  • 사용 사례: 페이지의 개념과 자연스럽게 일치하므로 사용자에게 더 직관적입니다.
var pagedResult = pagingService.FetchPagedData<CustomerDb, CustomerDto>(
customers, pageIndex: 1, size: 20, orderBy: "CustomerName asc");

OrderBy를 지원하도록 서비스 확장

API를 개선하려면 결과 순서 지정을 지원하도록 확장하는 것이 좋습니다. 요청에 orderBy 매개 변수를 추가하여 클라이언트가 필드와 정렬 방향을 지정할 수 있도록 하면 됩니다. 이러한 유연성은 데이터 표시에서 사용자 경험을 크게 향상시킬 수 있습니다.

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

전체 코드는 여기에서 볼 수 있습니다.

igxGrid에서 원격 페이징은 어떻게 작동합니까?

무엇보다도 Ignite UI는 데이터가 풍부하고 확장 가능한 고성능 웹 앱을 빌드하기 위한 수백 개의 UI 구성 요소로 구성된 완전한 라이브러리입니다. 여기에는 시장에서 가장 빠른 Angular 데이터 그리드, 120+ 고성능 차트, 계층적 그리드, 다중 행 레이아웃, 고급 필터링 등과 같은 기타 독점 제어 및 기능이 포함됩니다. 자세한 내용은 당사의 Angular 구성 요소를 다른 공급업체의 구성 요소와 비교할 수 있습니다.

Ignite UI의 igxGrid 구성 요소는 원격 페이징과 원활하게 작동하도록 설계되었습니다. 사용자가 페이지를 탐색할 때 데이터를 동적으로 가져와 필요한 레코드만 로드되도록 합니다. 그 결과 성능이 향상되고 인터페이스가 더 반응성이 빨라집니다.

적절하게 구성되면 igxGrid는 API 설계에 따라 건너뛰기/상단 또는 페이지 인덱스/크기 접근 방식을 사용하여 특정 페이지에 대한 요청을 보냅니다.

Grid의 원격 페이징에 대한 자세한 내용은 Ignite UI for Angular 참조하세요.

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.

페이징 데모 응용 프로그램을 Angular 탐색할 수도 있습니다.

그리고 코드가 포함된 GitHub 리포지토리를 확인하세요.

App Builder에서 그리드 원격 페이징을 구성하는 방법

이제 App Builder 사용하여 원격 페이징을 구성하는 더 빠르고 간단한 방법이 있습니다. 이것은 최신 웹 앱을 빌드하기 위한 클라우드 기반의 로우 코드 플랫폼입니다. 이 드래그 앤 드롭 도구는 단일 정보 소스로 작동하여 60+ 실제 UI 구성 요소를 가져오고, 원활한 데이터 바인딩을 보장하고, 전체 디자인 시스템(Indigo.Design)을 통합하는 동시에 개발 시간을 80% 단축합니다. 오류가 발생하기 쉬운 수동 코딩을 제거하는 App Builder는 Sketch에서 클릭 한 번으로 깨끗하고 프로덕션 준비가 된 Angular, Blazor, Web Components 및 React 코드를 생성하고 처음부터 빌드한 설계 파일 또는 앱을 Figma 시장에서 유일한 RAD 도구입니다.

App Builder에서 원격 페이징을 구성하는 방법은 다음과 같습니다.

  • 원격 페이징 모드 선택: 그리드 구성에서 원격 페이징을 활성화합니다.
  • API 엔드포인트 설정: 데이터 검색 및 총 레코드 수에 대한 엔드포인트를 지정합니다.
  • 쿼리 매개 변수 정의: 페이지 매김에 대한 쿼리 매개 변수(예: skip, top, pageIndex 및 size)를 구성합니다.
  • 그리드를 데이터에 바인딩: 그리드를 반환된 데이터 컨텍스트에 연결하여 페이지가 매겨진 데이터를 반영하도록 합니다.

시각적 지침은 App Builder 내에 제공된 설명서를 참조하십시오.

시각적 지침은 App Builder 내에 제공된 설명서를 참조하십시오

결론

원격 페이징을 위해 백엔드 서비스를 Ignite UI의 igxGrid와 통합하면 웹 애플리케이션의 성능과 유용성을 크게 향상시킬 수 있습니다. OData 표준을 활용하고 Web API를 적절하게 구성하면 대규모 데이터 세트와 상호 작용하는 사용자를 위한 원활한 환경을 만들 수 있습니다. 이 설정은 로딩 시간을 개선할 뿐만 아니라 데이터 액세스 및 표시 방법에 유연성을 제공합니다.

Ignite UI for Angular

Angular
데모 요청