Angular対応のIgnite UI for Angularを使ってXML のデータをグリッドに表示
Angularはデータバインディング、ルーティング、サービスなど業務用のモダンWebアプリケーション構築に適しているWebアプリケーションフレームワークです。
この記事ではCData Software Japanが提供するAPI Serverと連携し、取得したデータをAngular対応のIgnite UI for Angularデータグリッドに表示する方法をご紹介します。
API Server の設定
以下のリンクからAPI Server の無償トライアルをスタートしたら、セキュアなXML OData サービスを作成していきましょう。
XML への接続
Angular からXML のデータを操作するには、まずXML への接続を作成・設定します。
- API Server にログインして、「Connections」をクリック、さらに「接続を追加」をクリックします。
- 「接続を追加」をクリックして、データソースがAPI Server に事前にインストールされている場合は、一覧から「XML」を選択します。
- 事前にインストールされていない場合は、コネクタを追加していきます。コネクタ追加の手順は以下の記事にまとめてありますので、ご確認ください。
CData コネクタの追加方法はこちら >> - それでは、XML への接続設定を行っていきましょう！
-
データソースを認証するには、データプロバイダーのドキュメント内の「はじめに」セクションをご覧ください。 データプロバイダーはXML API を双方向データベーステーブルとしてモデル化し、XML ファイルをread-only ビュー（ローカルファイル、人気のクラウドサービスに格納されたファイル、およびFTP サーバー）としてモデル化します。 HTTP Basic、Digest、NTLM、OAuth、およびFTP を含む主な認証スキームはサポートされています。認証のガイドについては、データプロバイダーのドキュメント内の「はじめに」セクションをご覧ください。
URI と認証値を設定した後で、DataModel を設定することでデータの構造によりよくマッチするようデータの抽象化を調整できます。
DataModel プロパティはデータがどのようにテーブルとして抽象化されるかを制御するプロパティであり、次の基本的な設定を調整します。
- Document（デフォルト）：XML データのトップレベルのドキュメントビューをモデル化します。データプロバイダーは入れ子化した要素をデータの集約値として返します。
- FlattenedDocuments：入れ子化したドキュメントとその親を結合して単一のテーブルに入力します。
- Relational：個別の関連テーブルを階層化されたデータから返します。テーブルは主キーと、親ドキュメントにリンクする外部キーを含みます。
リレーショナルな抽象化の設定についての詳細は、「XML データのモデリング」セクションを参照してください。次の例で使用されているサンプルデータも存在します。 このデータには、人名、その人たちが所有する車、車に施されたさまざまなメンテナンスに関する情報が含まれます。
- 接続情報の入力が完了したら、「保存およびテスト」をクリックします。
データソースを認証するには、データプロバイダーのドキュメント内の「はじめに」セクションをご覧ください。 データプロバイダーはXML API を双方向データベーステーブルとしてモデル化し、XML ファイルをread-only ビュー（ローカルファイル、人気のクラウドサービスに格納されたファイル、およびFTP サーバー）としてモデル化します。 HTTP Basic、Digest、NTLM、OAuth、およびFTP を含む主な認証スキームはサポートされています。認証のガイドについては、データプロバイダーのドキュメント内の「はじめに」セクションをご覧ください。
URI と認証値を設定した後で、DataModel を設定することでデータの構造によりよくマッチするようデータの抽象化を調整できます。
DataModel プロパティはデータがどのようにテーブルとして抽象化されるかを制御するプロパティであり、次の基本的な設定を調整します。
- Document（デフォルト）：XML データのトップレベルのドキュメントビューをモデル化します。データプロバイダーは入れ子化した要素をデータの集約値として返します。
- FlattenedDocuments：入れ子化したドキュメントとその親を結合して単一のテーブルに入力します。
- Relational：個別の関連テーブルを階層化されたデータから返します。テーブルは主キーと、親ドキュメントにリンクする外部キーを含みます。
リレーショナルな抽象化の設定についての詳細は、「XML データのモデリング」セクションを参照してください。次の例で使用されているサンプルデータも存在します。 このデータには、人名、その人たちが所有する車、車に施されたさまざまなメンテナンスに関する情報が含まれます。
API Server のユーザー設定
次に、API Server 経由でXML にアクセスするユーザーを作成します。「Users」ページでユーザーを追加・設定できます。やってみましょう。
- 「Users」ページで ユーザーを追加をクリックすると、「ユーザーを追加」ポップアップが開きます。
-
次に、「ロール」、「ユーザー名」、「権限」プロパティを設定し、「ユーザーを追加」をクリックします。
-
その後、ユーザーの認証トークンが生成されます。各ユーザーの認証トークンとその他の情報は「Users」ページで確認できます。
XML 用のAPI エンドポイントの作成
ユーザーを作成したら、XML のデータ用のAPI エンドポイントを作成していきます。
-
まず、「API」ページに移動し、
「 テーブルを追加」をクリックします。
-
アクセスしたい接続を選択し、次へをクリックします。
-
接続を選択した状態で、各テーブルを選択して確認をクリックすることでエンドポイントを作成します。
OData のエンドポイントを取得
以上でXML への接続を設定してユーザーを作成し、API Server でXML データのAPI を追加しました。これで、OData 形式のXML データをREST API で利用できます。API Server の「API」ページから、API のエンドポイントを表示およびコピーできます。
クロスオリジンリソースシェアリング （CORS）
複数の異なるドメインへのアクセス・接続を行う場合、クロスサイトスクリプティングの制限に抵触する可能性があります。その場合は、「設定」→「サーバー」タブ内の「クロスオリジンリソースシェアリング （CORS）」の設定を行います。
Ignite UI for Angularを組み込んだAngularプロジェクトを準備
IgxGridを利用するためには、Ignite UI for Angularパッケージの組み込みやモジュールの参照が必要になります。下記に必要パッケージを組み込んだ状態のサンプルプロジェクトが公開されています。
GitHub - neri78/IgxGridBasicDemo
リポジトリをクローンしたのち、下記コマンドで現時点の実行結果を確認できます。
npm start
左側のナビゲーションからigxGrid1を選択するとローカルデータがバインドされたIgxGridが表示されます。
APIサーバーからデータを取得するサービスを作成
AngularではAPIサーバーのような外部リソースからデータを取得する場合、サービスを作成しViewとは直接関係のないデータアクセス部分を分離させることが一般的です。 ng generateコマンドを利用し、ApiServerServiceを作成します。
ng generate service service/ApiServer
serviceフォルダーとapi-server.service.spec.ts, api-server.sergice.tsファイルがそれぞれ作成されます。
レスポンスおよび XML のデータのインターフェースを宣言
APIサーバーから XML の情報がvalueに保存されたデータが返されるため、レスポンスおよび、 XML のデータのインターフェースを作成された ApiServerServiceクラスのスコープの外側に宣言します。
api-server.service.ts
// response
interface CustomersResponse {
value: Customer[];
}
// XML Data Excample
export interface Customer {
rowguid: string; // "3f5ae95e-b87d-4aed-95b4-c3797afcb74f"
LastName: string; // "Gee"
PasswordHash: string; // "L/Rlwxzp4w7RWmEgXX+/A7cXaePEPcp+KwQhl2fJL7w="
Suffix: string; // null
Title: string; // "Mr."
EmailAddress: string; // "[email protected]"
Phone: string; // "245-555-0173"
CustomerID: string; // 1
PasswordSalt: string; // "1KjXYs4="
SalesPerson: string; // "adventure-works\pamela0"
GUID: string; // "3F5AE95EB87D4AED95B4C3797AFCB74F"
CompanyName: string; // "A Bike Store"
FirstName: string; // "Orlando"
NameStyle: boolean; // false
MiddleName: string; // "N."
ModifiedDate: Date; // "2005-08-01T00:00:00.0000+00:00"
}
必要なモジュールをインポート
api-server.service.tsファイルの先頭に戻り、通信、データ処理にに必要なモジュールをそれぞれインポートします。
api-server.service.ts
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { catchError, map} from 'rxjs/operators';
APIサーバーへの接続に必要なAuthToken、URL、リクエストヘッダを宣言
次に最初に設定したAPIサーバーに接続するためのAuthToken、URL、そして認証に必要なリクエストヘッダをApiServerServiceのプライベート変数として宣言します。
api-server.service.ts
// Auth Token
private authToken = '設定したAuthToken';
// APIサーバーRestAPIのURL、今回は XML のデータを返すRest APIのURLに固定
private baseUrl = ' XML のデータのRest API URL';
// リクエストヘッダ
private headers = new HttpHeaders({
'x-cdata-authtoken': this.authToken
});
コストラクタで依存関係の注入を利用し、HttpClientのインスタンスを取得
コンストラクタの引数として、HttpClientを受け取るように変更します。クラスインスタンスはAngularフレームワークにより作成されます。
api-server.service.ts
constructor(private httpClient: HttpClient) { }
リクエストの設定とレスポンスの処理
XML のデータを取得するgetCustomers()メソッドを宣言し、HttpClient、pipeを利用してリクエストの設定と、レスポンスの処理、エラーハンドリングを実装します。
api-server.service.ts
public getCustomers() {
// HttpClientを利用し、APIサーバーにアクセス
return this.httpClient.get(
`${this.baseUrl}/`, {headers: this.headers})
.pipe(
// エラー時の処理
catchError(this.handleError('getData:Customer', [])),
// 返されたデータからCustomerの配列を取得
map(response => (response as CustomersResponse).value)
);
}
// Error時の処理。デモ用に簡略化
private handleError(operation = 'operation', result?: T) {
return (error: any): string => {
console.error('An error occurred', error);
return error;
};
}
これでサービスの準備が整いました。
グリッド画面でデータを取得
次にグリッドを表示している画面側のコードを実装します。
必要なモジュールをインポート
igxgrid1\igxgrid1.component.tsでは先ほど実装したApiServerServiceと、サービス呼び出しの結果返されるObservableを利用するため、必要なモジュールをインポートします。
igxgrid1\igxgrid1.component.ts
import { ApiServerService, Customer } from '../service/api-server.service';
import { Subscription } from 'rxjs';
購読を管理するためのSubScription変数を宣言
このApiServerServiceはデータを非同期で取得します。そのため、呼び出しが完了した後にロジックを実行するための購読処理を後ほど実装します。この購読は最終的には購読解除を行う必要があるtまえ、プライベート変数を宣言します。
igxgrid1\igxgrid1.component.ts
subscription: Subscription;
コストラクタで依存関係の注入を利用し、ApiServerServiceのインスタンスを取得
igxgrid1\igxgrid1.component.ts
constructor(private apiServerService: ApiServerService) { }
ngOnInitでデータを取得しグリッドにデータを表示
igxgrid1\igxgrid1.component.tsには、ngOnInit()メソッドが実装されており、データグリッド画面の初期化時に、あらかじめ用意されているサンプルデータを読み込むコードが実装されています。このlocalDataにコレクションを代入することでグリッドにデータが表示されます。このコードをコメントアウトします。
igxgrid1\igxgrid1.component.ts
ngOnInit() {
// コメントアウト
// this.localData = employeesData;
}
コメントアウトしたコードの代わりに、ApiServerServiceを利用してデータを取得し、localDataに割り当てるコードを実装します。
igxgrid1\igxgrid1.component.ts
ngOnInit() {
// APIServerを呼び出し、XML のデータを取得
this.subscription = this.apiServerService.getCustomers()
.subscribe( (data: Customer[]) => {
this.localData = data;
});
}
ngOnDestoryで購読を解除
このコンポーネントが破棄されるタイミングでメモリーリークを防ぐため、購読を解除します。
igxgrid1\igxgrid1.component.ts
// unsubscribe
ngOnDestroy() {
if (this.subscription !== undefined) {
this.subscription.unsubscribe();
}
}
サービス、モジュールの登録
最後に作成したサービスや必要なモジュールをアプリケーションに登録します。
モジュール参照のインポート
app.module.tsにApiServerServiceおよびHttpClientModuleをインポートします。
app.module.ts
import { ApiServerService } from './service/api-server.service';
import { HttpClientModule } from '@angular/common/http';
importsセクションでHttpClientModuleをインポート
@NgModuleのimportsセクションにHttpClientModuleをインポートします。
app.module.ts
imports: [
...
,HttpClientModule
],
providersセクションでApiServerServiceを宣言
@NgModuleのimportsセクションにHttpClientModuleをインポートします。
app.module.ts
providers: [ApiServerService],
これで設定は完了です。再度 __npm start__ コマンドで実行してみましょう！
全てのコードはこちらのBranchでご覧いただけます（AuthToken、並びにURLは空白のため適宜設定してください）