本記事では、Angular CLIとWijmoを使用してグリッドでデータ表示を行うAngularアプリケーションを作成する方法を紹介します。2017年2月14日に投稿した記事「Angular & Wijmoクイックスタート - アプリケーションの作成」を、2019年1月時点における最新の技術と弊社製品で更新した内容です。
Angularではフレームワークの機能拡張だけでなく、開発効率の向上にも力を入れて取り組んでいます。コマンドラインツールのAngular CLIを使用することで、非常に簡単にAngularアプリケーションを作成することが可能です。
また、WijmoはAngularをサポートしており、Angularの標準的な方法でグリッド/チャート/入力などのエンタープライズ向けの高機能なUIコンポーネントを利用することができます。
Angularアプリケーションを作成する
npm install
コマンドを実行して、Angular CLIパッケージをグローバルにインストールします。インストール済みの場合は不要です。
npm install -g @angular/cli
ng new
コマンドを実行して、Angularアプリケーションを作成します。アプリケーションのオプションをいくつか質問されますが、全てEnterキーを押して既定値を選択します。
ng new quickstart
アプリケーションプロジェクトのフォルダに移動して、ng serve
コマンドを実行すると、開発サーバー上でアプリケーションが実行されます。アプリケーションはブラウザでhttp://localhost:4200
を参照すると表示でき、ソースファイルを変更すると自動的に変更が反映されます。
cd quickstart
ng serve
開発サーバーの起動を確認したらCtrl + Cをクリックして終了しておきます。
Wijmoのパッケージをインストールする
npm install
コマンドを実行して、Wijmoパッケージをアプリケーションにインストールします。
npm install wijmo
src/styles.css
にWijmoのスタイルをインポートします。
@import 'wijmo/styles/wijmo.css';
src/app/app.modules.ts
にFlexGridを含むモジュールWjGridModule
とカルチャーをインポートします。
import { WjGridModule } from 'wijmo/wijmo.angular2.grid'; import 'wijmo/cultures/wijmo.culture.ja.js'; @NgModule({ : imports: [ WjGridModule, : ] })
src/app/app.component.html
のul
要素を削除してdiv
要素にwj-flex-grid
要素を追加します。
<wj-flex-grid [itemsSource]="gridData"> <wj-flex-grid-column header="ID" binding="id" [width]="60"></wj-flex-grid-column> <wj-flex-grid-column header="商品名" binding="product" [width]="200"></wj-flex-grid-column> <wj-flex-grid-column header="受注日" binding="date" [width]="120"></wj-flex-grid-column> <wj-flex-grid-column header="金額" binding="amount" [width]="100" format="c"></wj-flex-grid-column> </wj-flex-grid>
src/app/app.component.ts
にFlexGridに表示するデータgridData
を作成します。
export class AppComponent { : gridData = [ { id: 15, product: 'ピュアデミグラスソース', date: '2017/01/10', amount: 6000 }, { id: 17, product: 'だしこんぶ', date: '2017/01/08', amount: 14500 }, { id: 18, product: 'ピリカラタバスコ', date: '2017/01/12', amount: 4000 }, { id: 84, product: 'なまわさび', date: '2017/01/21', amount: 8000 } ]; }
以上の手順で、クイックスタートアプリケーションの作成は完了です。
ng serve --open
コマンドを実行してhttp://localhost:4200
に接続すると、AngularアプリケーションでFlexGridコンポーネントが表示されていることを確認できます。