Ignite UIグリッドを使用して、アプリケーションを高速に開発

プロジェクトのセットアップ

このレッスンのスターター・プロジェクトをこちらをクリックしてダウンロードしてください。プロジェクトのセットアップが正しければ、以下の画像のように実行中のAngularアプリケーションが表示されます：

ステップ1 コンポーネントのインポートと宣言

Ignite UI for JavaScript Angularコンポーネントを操作するには、モジュールでそれらをインポートして宣言する必要があります。たとえば、AngularアプリケーションでigGridコンポーネントを使用するには、アプリケーションモジュールでIgGridComponentをインポートして宣言します。

プロジェクトで、Finance Appフォルダーに移動し、次にappフォルダーに移動します。app.module.tsファイルを開き、既存のimport文の直後に、以下のimport文を追加します。

import{IgGridComponent} from 'igniteui-angular2';
import {GridComponent} from './grid.component';

必要なコンポーネントをインポートした後、それらをアプリケーションモジュールで宣言する必要があります。AppModuleのdeclaration配列にIgGridComponentとGridComponentを追加します。以下に示すように、app.module.tsの@NgModuleデコレーターを変更してください：

@NgModule({
imports: [BrowserModule,HttpModule],
declarations: [AppComponent,
              IgZoombarComponent,
              IgDataChartComponent,
              PriceChartComponent,
              InfoComponent,
              IndicatorChartComponent,
              VolumeChartComponent,
              IgGridComponent, GridComponent],
              providers: [AppService],
              bootstrap: [AppComponent]
})
export class AppModule { }

AppModuleモジュールのdeclaration配列にIgGridComponentとGridComponentを追加しました。追加した他のコンポーネントやプロパティ（providersなど）については、後続のレッスンで確認します。

ステップ2 データソースを作成

グリッドにバインドするデータが必要です。このデータは、JavaScript配列またはJSONオブジェクト配列にすることができ、ローカルにあるものでも、RESTサービスから提供されるものでもかまいません。

理想的には、Angularサービス内でデータを返す関数を作成し、複数のコンポーネントでデータ関数を使用できるようにするとよいでしょう。このレッスンでは、GridComponentクラスに、JSONオブジェクト配列を返すgetData関数が既に用意されています。

appフォルダーで、grid.component.tsファイルを開き、getData()関数を見つけます。後のレッスンでは、RESTサービスのデータを使用するグリッドの作成方法を学びます。

ステップ3 データを取得

getData()関数から返されるデータを使用するには、AngularのngOnInit()ライフサイクルフックの内部で関数を呼び出し、返された値をGridComponentプロパティに代入します。

Angularのライフサイクルフックについて詳しくご覧ください。

appフォルダーで、grid.component.tsファイルを開き、以下に示すようにngOnInit()関数を変更します：

ngOnInit(){
  this.stocks = this.getData();
}

ステップ4 グリッドを作成

Ignite UI for JavaScript Angularグリッドコンポーネントは、他のコンポーネントと同様に使用できます。appフォルダーで、grid.component.htmlファイルを開き、以下に示すようにコードを追加します：

<ig-grid widgetId="grid1" [dataSource]="stocks" [autoGenerateColumns]="true">

ステップ5 アプリケーションで使用

アプリケーションでGridComponentを使用するには、appフォルダーでapp.component.htmlファイルを開き、すべてのマークアップの末尾、要素の下に、以下に示すコードを追加します。

<grid></grid>

アプリケーションに移動し、ページの一番下までスクロールして、以下の画像のように追加されたグリッドを見つけてください：

ステップ6グリッドの列を構成する

ステップ4では、autoGenerateColumnsプロパティをtrueに設定してグリッドを作成しました。グリッドの列は自動的に生成されましたが、列を手動で構成することもできます。コンポーネント・クラスでは、列のほか、グリッドのページング、並べ替え、フィルタリングなどの機能も構成できます。

列を構成するには：appフォルダーでgrid.component.tsファイルを開き、以下のコードでgrid.component.tsファイル内のngOnInit()関数を更新します：

ngOnInit() {
  this.stocks = this.getData();
  this.gridId = "Grid1";
  this.gridOptions = {
    dataSource: this.stocks,
    autoGenerateColumns: false,
    columns: [
        { headerText: "CLOSE", key: "Close", dataType: "number" },
        { headerText: "DATE", key: "Date", dataType: "string" },
        { headerText: "HIGH", key: "High", dataType: "number" },
        { headerText: "LOW", key: "Low", dataType: "number" },
        { headerText: "OPEN", key: "Open", dataType: "number" },
        { headerText: "VOLUME", key: "Volume", dataType: "number" }
    ]
  }
}

ステップ7構成済みの列でグリッドを変更する

Ignite UI for JavaScriptのAngularグリッドのoptionsおよびwidgetIdプロパティは双方向データバインディングに対応しているため、ソースへの変更はすべてグリッドに反映されます。optionsおよびwidgetIdプロパティを設定するには：appフォルダーでgrid.component.htmlファイルを開き、以下のように変更します。

<ig-grid [(options)]= "gridOptions" [(widgetId)]="gridId">

アプリケーションに移動し、ページの一番下までスクロールして、以下のように追加されたグリッドを見つけてください：

まとめ

Ignite UI for JavaScriptを使用すると、Webアプリケーションをより迅速に作成できます。Angularに加え、Ignite UI for JavaScriptはReact、AngularJS、jQuery、ASP.NET MVCとも併用できます。