こんにちは。テクニカルコンサルティングエンジニアの石橋です。
この記事では、アプリケーションでよくある利用シナリオを Ignite UI for Angular を使ってコンパクトに実現したアプリケーションサンプルをご紹介します。このサンプルをテンプレート代わりにして、実際のアプリケーション開発の参考になれば、私としてもテクニカルコンサルティングエンジニア冥利に尽きます。
では、さっそくご紹介していきましょう。
Ignite UI for Angular アプリケーションテンプレートとは
Ignite UI for Angular アプリケーションテンプレートとは、アプリケーションでよくある利用シナリオを Ignite UI for Angular を使ってコンパクトに実現したサンプルです。具体的には、
- ナビゲーション機能
- ダッシュボード
- 棒グラフや円グラフを使ったデータの可視化
- データ一覧表示
- データの一覧表示や編集、削除
- 編集テンプレートによる日付ピッカーやドロップダウンの埋め込み
- 編集内容の Undo や Redo、コミット
- データの選択（1 件のみの選択、複数選択、全件選択）
- データのソート
- データのフィルタリング
- データのグループ化
- 列の表示順入れ替え
- 列の固定表示
- Excel や CSV 形式での出力
- 入力フォーム
- 入力フォーム形式でのデータの表示や編集
- 入力された値のチェック
- データ管理サービス
- 個別の画面でのデータ更新内容を別画面にも即座に反映させるためのデータ管理サービス
が実装されています。
では、個別に見ていきましょう。
ナビゲーション機能
アプリケーションテンプレートでは、ヘッダー部分に IgxNavbar、左側の開閉メニューに IgxNavigationDrawer を使用しています。
IgxNavbar の左端のハンバーガーメニュー（※横棒三本のアイコンのことです）をクリックすると、IgxNavigationDrawer 部分が開いたり閉じたりするような実装を実現しています。
ダッシュボード
ダッシュボードでは、データ管理サービスからデータを受け取って、年齢、血液型、性別で集計し、それぞれ棒グラフ、ドーナツチャート、円グラフで表示しています。
集計処理はデータを 1 件 1 件ループして地道にカウントしています。
全体のレイアウトは Ignite UI for Angular の IgxCard を使用しており、グラフ本体は IgxDataChart、IgxDoughnutChart、IgxPieChart をそのまま使用して実現しています。Ignite UI for Angular を使用すれば特別なことをしないでもこのようなグラフやレイアウトが簡単に実現できます！
データ一覧表示
データ一覧表示では、IgxGrid を使って表示しています。
一覧上部の Redo や Undo などのボタンやエクスポートボタン部分は、Grid ツールバーコンテナを使用しています。Redo / Undo 機能や「エクスポート」機能は、IgxGrid のトランザクション機能やツールバーコンテナの組み込み機能をそのまま利用して簡単に実装できます。
その他、編集、選択、ソート、グループ化、列移動、等々、ほぼすべての機能は IgxGrid に組み込みのものをそのまま使用しています。
また、性別や血液型は、ドロップダウンから選択できるように、IgxSelect をエディターテンプレートとして埋め込んでいます。生年月日も同様に、IgxDatePicker を使って、カレンダーから日付を選択する形式になっています。
入力フォーム
入力フォームでは、IgxList を使用して画面左側に名前の一覧を表示し、その中から一つをクリックすると画面右側に編集フォームが表示されます。編集フォームでは、IgxInputGroup を使用しています。編集後、「更新」ボタンをクリックすると、データソース側に反映されます。
データ管理サービス
各画面はそれぞれ独立したコンポーネントになっています。各画面で更新された情報は、別画面に移ったときに即座に反映されるように、RxJS を使って受け渡しをしています。それを管理しているのがデータ管理サービスです。
サンプルのソース内では、...states\state.service.ts で実装していますので、ダウンロードした際には見てみてください。
ダウンロード
Ignite UI for Angular アプリケーションテンプレートのダウンロードはこちらです。
またこの記事に関して何かご質問・ご不明な点がありましたら、お気兼ねなく弊社までお問い合わせください。
