Angular Gridのバックエンドサービスとの統合

Angular Gridのバックエンドサービスとの統合

Web API を拡張してリモート ページング機能をサポートする方法と、Ignite UI for Angularを使用してAngular Grid のバックエンド サービスを統合する方法を参照してください。

6min read

最新のWebアプリケーションでは、大規模なデータセットを効率的に管理することは、最適なパフォーマンスと優れたユーザーエクスペリエンスを提供するために重要です。これを実現するためのベスト プラクティスの 1 つは、Web API にリモート ページングを実装して、クライアントが要求に応じて必要なデータのみをフェッチできるようにすることです。この記事では、Web API を拡張してリモート ページング機能をサポートし、Ignite UI のigxGridコンポーネントやリモート データを消費できるその他のコンポーネントとシームレスに統合する方法について説明します。

それでは、これらすべてがどのように機能するかを理解するために、ポイントに直行しましょう。

OData 仕様のベスト プラクティスに基づいて Web API を拡張する理由

コード自体から、OData のいくつかの特性をカバーしていることに気付くでしょう。特に、ページネーションとソートのクエリパラメータの処理に関してはそうです。ただし、従来の OData 実装を超える要素も組み込まれています。

なぜか疑問に思いますか?OData (Open Data Protocol) は、RESTful API を構築および使用するための標準化されたフレームワークであり、相互運用性や標準化などの大きな利点を提供します。OData 仕様に従うことで、さまざまなアプリケーションがより効果的に通信でき、複数のシステムが相互作用するエンタープライズ環境で非常に有益です。

さらに、OData の豊富なクエリ機能により、クライアントはサーバー側で変更することなくデータのフィルター処理、並べ替え、ページ分割を行うことができ、柔軟性が向上します。JSONやXMLなど、さまざまなデータソースと形式をサポートしているため、さまざまなアプリケーション要件に対応する汎用性の高い選択肢となっています。

OData Specifics

個別のエンドポイント (GetCustomersWithSkip と GetCustomersWithPage) を持つことで、コードは異なるページネーション スタイル (スキップ/トップとページ インデックス/サイズ) を実装します。OData は通常、クエリ パラメーターを受け入れる 1 つの統合エンドポイントを提供し、より標準化されたインターフェイスを提供します。

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

  • スキップ: データのフェッチを開始する前にスキップするレコードの数。
  • 上: フェッチするレコードの最大数。
  • ユースケース: ページネーションを明示的に制御し、合計ページ数を計算せずに制御するシナリオに最適です。
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 を強化するには、結果の順序付けをサポートするように 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は、高性能でデータが豊富でスケーラブルなWebアプリを構築するための何百ものUIコンポーネントの完全なライブラリです。これには、市場で最速のAngularデータグリッド、120 +高性能チャート、および階層グリッド、複数行レイアウト、高度なフィルタリングなどの他の排他的なコントロールと機能が含まれています。詳細については、当社のAngularコンポーネントを他のベンダーのコンポーネントと比較できます。

Ignite UIの igxGrid コンポーネントは、リモート ページングとシームレスに動作するように設計されています。ユーザーがページ内を移動するときにデータを動的にフェッチし、必要なレコードのみが読み込まれるようにします。これにより、パフォーマンスが向上し、インターフェイスの応答性が向上します。

適切に構成されている場合、igxGrid は、API 設計に基づいてスキップ/トップまたはページ インデックス/サイズのアプローチを利用して、特定のページに対する要求を送信します。

​ここでは、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.

​このAngularページングデモアプリケーションを探索することもできます。

そして、コードを含むGitHubリポジトリをチェックしてください。

App Builderでグリッド リモート ページングを構成する方法

​App Builderを使用してリモート ページングを構成するための、より高速で簡単な方法が追加されました。これは、現代のWebアプリを構築するためのクラウドベースのローコードプラットフォームです。このドラッグ&ドロップツールは、60+の実際のUIコンポーネントをもたらし、シームレスなデータバインディングを確保し、開発時間を80%短縮しながら、完全なデザインシステムであるIndigo.Designを統合し、信頼できる唯一の情報源として機能します。エラーが発生しやすいハンドコーディングを排除し、App Builderは、ゼロから構築されたSketchおよびFigmaデザインファイルやアプリからワンクリックで、クリーンで本番環境に対応したAngular、Blazor、Web Components、およびReactコードを生成する市場で唯一のRADツールです。

App Builderでリモート ページングを構成する方法は次のとおりです。

  • リモートページングモードの選択: グリッド構成で、リモートページングを有効にします。
  • API エンドポイントの設定: データ取得と合計レコード数のエンドポイントを指定します。
  • クエリパラメータの定義: ページネーションのクエリパラメータ (skip、top、pageIndex、size など) を設定します。
  • グリッドをデータにバインドする: グリッドを返されたデータ コンテキストに接続し、ページ分割されたデータが反映されるようにします。

視覚的なガイダンスについては、App Builderに記載されているドキュメントを参照してください。

視覚的なガイダンスについては、App Builder内で提供されているドキュメントを参照してください

結論

バックエンド サービスを Ignite UI の igxGrid と統合してリモート ページングを行うと、Web アプリケーションのパフォーマンスとユーザビリティが大幅に向上します。OData 標準を利用し、Web API を適切に構成することで、大規模なデータセットを操作するユーザーにシームレスなエクスペリエンスを提供できます。この設定により、読み込み時間が短縮されるだけでなく、データへのアクセス方法と表示方法に柔軟性がもたらされます。

Ignite UI for Angular

Angular
デモを予約