このビデオ(英語)では、Angular 2ダッシュボードを5分ほどで作成してみます。導入ビデオをまだご覧になっていない場合は、ご覧になることをお勧めします。導入ビデオでは、プロジェクトの設定方法について説明しています。

  1. Angular 2コンポーネント内で複数のWijmoコントロールを使用する
  2. 共有データソースを作成する
  3. Wijmoコントロールを共有データソースに連結する

コードスニペット

DataSvc

import { Injectable } from ‘angular2/core’;
@Injectable()
export class DataSvc {
    getData(countries: string[]): any[] {
        var data = [];
        for (let i = 0; i < countries.length; i++) {
            data.push({
                country: countries<em class="bbcode-em"></em>,
                downloads: Math.round(Math.random() * 20000),
                sales: Math.random() * 10000,
                expenses: Math.random() * 5000
            });
        }
        return data;
    }
}

app.ts

// ベータに必要
///<reference path=”../node_modules/angular2/typings/browser.d.ts”/>
/** 必要なAngular 2ライブラリ **/
import {Component, View, EventEmitter, provide, Input, Inject, enableProdMode} from ‘angular2/core’;
import { CORE_DIRECTIVES } from ‘angular2/common’;
import { bootstrap } from ‘angular2/platform/browser’;
// Wijmo Input/FlexChart/FlexGridモジュール
import * as wjInput from ‘wijmo/wijmo.angular2.input’;
import * as wjNg2FlexGrid from ‘wijmo/wijmo.angular2.grid’;
import * as wjNg2FlexChart from ‘wijmo/wijmo.angular2.chart’;
// 共有データサービス
import { DataSvc } from ‘./DataSvc’;
@Component({
    selector: ‘app’,
    templateUrl: ‘/src/app.html’,
    directives: [wjInput.WjInputDate, wjInput.WjComboBox,
        wjNg2FlexChart.WjFlexChart, wjNg2FlexChart.WjFlexChartAxis,
        wjNg2FlexChart.WjFlexChartLegend, wjNg2FlexChart.WjFlexChartDataLabel, wjNg2FlexChart.WjFlexChartSeries,
        wjNg2FlexGrid.WjFlexGrid, wjNg2FlexGrid.WjFlexGridColumn, CORE_DIRECTIVES] // commonからインポートするためのディレクティブ
})
export class AppCmp {
    countries = ‘US,Germany, UK, Japan, Greece’.split(‘,’);
    // データをWijmo CollectionViewとして初期化します
    data: wijmo.collections.CollectionView;
    protected dataSvc: DataSvc;
    constructor( @Inject(DataSvc) dataSvc: DataSvc) {
        this.dataSvc = dataSvc;
        // データをCollectionViewに連結します
        this.data = new wijmo.collections.CollectionView(this.dataSvc.getData(this.countries));
    }
}
bootstrap(AppCmp, [DataSvc]);

app.html


<div>
    Select a Country: <wj-combo-box [itemsSource]=”data” [displayMemberPath]=”‘country'”>
    </wj-combo-box>
</div>
<wj-flex-grid [itemsSource]=”data” [selectionMode]=”‘Row'”>
    <wj-flex-grid-column [header]=”‘Country'” [binding]=”‘country'” width=”*”></wj-flex-grid-column>
    <wj-flex-grid-column [header]=”‘Sales'” [binding]=”‘sales'” width=”*”></wj-flex-grid-column>
    <wj-flex-grid-column [header]=”‘Expenses'” [binding]=”‘expenses'” width=”*”></wj-flex-grid-column>
    <wj-flex-grid-column [header]=”‘Downloads'” [binding]=”‘downloads'” width=”*”></wj-flex-grid-column>
</wj-flex-grid>
<wj-flex-chart [itemsSource]=”data” [bindingX]=”‘country'” [selectionMode]=”‘Point'”>
    <wj-flex-chart-legend [position]=”‘Bottom'”></wj-flex-chart-legend>
    <wj-flex-chart-series [name]=”‘Sales'” [binding]=”‘sales'”></wj-flex-chart-series>
    <wj-flex-chart-series [name]=”‘Expenses'” [binding]=”‘expenses'”></wj-flex-chart-series>
    <wj-flex-chart-series [name]=”‘Downloads'” [binding]=”‘downloads'”></wj-flex-chart-series>
</wj-flex-chart>

ビデオの内容

皆さん、こんにちは。このビデオでは、共有データサービスを使用するダッシュボードをWijmoとAngular 2を使用して作成する方法を紹介します。私は、グレープシティ開発部門のロス・デドラーです。

最初に、Visual Studio 2015で新しいアプリケーションを作成します。

プロジェクトの名前はDashboardNg2にします。

導入ビデオをまだご覧になっていない場合は、ぜひご覧ください。

新しいコンポーネントをsrcフォルダに追加します。それには、app.tsファイルとapp.htmlファイルという2つのファイルが必要です。

app.tsファイルでAngular 2ライブラリをインポートします。このダッシュボードでは、Wijmo Input、Wijmo FlexChart、Wijmo FlexGridを使用します。そのため、これらのモジュールもインポートします。最後に、データサービスをインポートします。

Componentデコレータを構成します。selectorにappを指定し、templateUrlにはapp.htmlを設定し、CORE_DIRECTIVESをインポートします。コンボボックスのWijmo Inputディレクティブをインポートし、さらにFlexChartとFlexGridからいくつかのディレクティブをインポートする必要があります。

次に、クラスを作成し、デフォルトコンストラクタを提供します。app.tsの構造を完成するには、AppCmpのルートコンポーネントを割り当て、それにデータサービスを公開します。

新しいTypescriptクラスを追加し、名前をDataSvcにします。これが共有データサービスになります。

Angular 2からinjectableをインポートする必要があります。

次にクラスを作成します。クラス内に、配列を返すgetData関数を作成します。forループを使用してモデルを完成させます。getData関数に単純な文字列パラメータを渡して、データ要求をカスタマイズします。

AppCmpクラスに戻り、countriesを文字列として宣言します。dataプロパティをWijmo.CollectionView型として宣言します。このデフォルトコンストラクタで、プロパティタイプとしてDataSvcをインジェクトし、これにdataSvcを割り当てます。

このコンストラクタのパラメータからdataSvcを初期化します。ここでエラーが検出されると思います。最後に、新しいWijmo.CollectionView型のデータをインスタンス化し、これにdataSvcから配列を渡します。

最後に、3つのコントロールを含むビューを構築する必要があります。countryフィールドを表示するデータに連結されたコンボボックスを追加します。データに連結されたFlexGridを追加し、マークアップで、各列を手作業で定義します。最後に、データに連結されたFlexChartを追加し、3つの系列をそれぞれ手作業で定義します。

default.htmlページを開始ページとして設定します。

最後になりますが、コンポーネントセレクタ要素をボディに追加します。

アプリケーションを実行すると、作成したダッシュボードの動作を確認できます。コンボボックスの値を変更すると、グリッド内の選択項目が更新されます。

グリッドで値を更新すると、チャートも自動的に更新されます。