Ignite UI with Angular

- 2017/08/16(水) 時点の情報に基づいています -

こんにちは、インフラジスティックス・ジャパン デベロッパーサポート の桐生です。

前回の記事(Ignite UI の始め方)では、Ignite UI そのもの構成方法や使い方などの基本をお伝えしました。今回から、Ignite UI を他のフレームワークと一緒に使う方法を紹介していきます。

今回は Angular と組み合わせる方法についてです。

 

0) 今回用意した環境

Windows 10

Node.js 8.4.0 - ダウンロードはこちらから

npm 5.3.0

 

1) Angular CLI でプロジェクトを生成

Angular CLI に関してこちらの記事で詳しく説明されていますのでご参考ください。Angular を使用したプロジェクトでは、Angular CLI を使うことが推奨されます。というよりは、使わない場合のデメリットが多すぎるので、特段の理由がない限りは Angular CLI を使ってプロジェクトを生成するようにしましょう。

 

1-1) Angular CLI のインストール

任意のフォルダ上でコマンドプロンプトを開き

https://github.com/angular/angular-cli#installation

のコマンドを入力して Angular CLI をグローバルインストールします。

npm install –g @angular/cli

インストール後、コマンドプロンプト上で「ng」コマンドが使用できるようになるので、

ng –v // @angular/cli: 1.3.0

と表示されればインストール成功です。

 

1-2) Angular プロジェクト生成

https://github.com/angular/angular-cli#generating-and-serving-an-angular-project-via-a-development-server

を参考に

ng new my-app // パッケージのダウンロードにしばらく時間がかかります
cd my-app
ng serve –o

と続けて入力します。

ブラウザが立ち上がって「Welcome to app!!」と表示されれば成功です。

 

2) Ignite UI の組み込み

2-1) 通常の Ignite UI ライブラリのインストール

https://jp.igniteui.com/help/getting-started#boilerplate

で紹介しているように、Ignite UI で必要な JS, CSS を組み込みます。

my-app\src\index.html

をエディターで開き、以下のように編集します。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyApp</title>
  <base href='/'>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <!-- Ignite UI Required Combined CSS Files -->
  <link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet">
  <link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet">
</head>
<body>
  <app-root></app-root>
  <!-- JavaScript Library Dependencies -->
  <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
  <!-- Ignite UI Required Combined JavaScript Files -->
  <script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
  <script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js"></script>
  <script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
</body>
</html>

2-2) Angular 用拡張モジュールのインストール

Ignite UI を組み込んだだけでは、Angular 上で動かすことができません。igniteui-angular2 という拡張モジュールが必要になります。この拡張モジュールは npm 経由でインストールします。

npm install igniteui-angular2

インストールが終わったら

my-app\src\app\app.module.ts

をエディターで開き、以下のように編集します。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { IgniteUIModule } from 'igniteui-angular2';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    IgniteUIModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

以上で Ignite UI を使う準備が整いました。

 

3) igGrid コンポーネントの実装

それでは実際に igGrid を画面に表示するための実装を行っていきます。

https://github.com/IgniteUI/igniteui-angular2#configuring-control-options

を参考にします。

 

3-1) app.component.html

Angular CLI で作成されたコンポーネントは、デフォルトでテンプレートが外部 HTML として用意されるので、このファイルを修正します。

一旦すべてのタグを削除後、

<ig-grid [widgetId]="id" [options]="gridOptions"></ig-grid>

と入力します。

widgetId は id 属性を付与する行為に相当します。

options には igGridの生成オプションを指定します。

 

3-2) app.component.ts

以下のように編集します。

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  id: string;
  gridOptions: IgGrid;
  constructor() {
    this.id = 'grid1';
    this.gridOptions = {
      width: '600px',
      height: '300px',
      dataSource: [
        { id: 1, column1: 'string 1', column2: true, column3: new Date() },
        { id: 2, column1: 'string 2', column2: false, column3: new Date() },
        { id: 3, column1: 'string 3', column2: true, column3: new Date() }
      ],
      primaryKey: 'id',
      columns: [
        { key: 'id', headerText: 'ID', dataType: 'number' },
        { key: 'column1', headerText: 'Column 1', dataType: 'string' },
        { key: 'column2', headerText: 'Column 2', dataType: 'bool' },
        { key: 'column3', headerText: 'Column 3', dataType: 'date' },
      ],
      defaultColumnWidth: '150px'
    }
  }
}

this.id <-> [widgetId]="id"

this.gridOptions <-> [options]="gridOptions"

に対応しています。

this.gridOptions = {・・・} は通常の igGrid の生成オプションを記述するのと全く同じです。特別なことはありません。

 

3-3) 動作確認

ブラウザ上にグリッドが表示されていれば成功です。

本手順の冒頭で

ng serve –o

コマンドを実行したと思いますが、これはファイルに変更が入ると自動でビルドをしなおしブラウザをリロードしてくれます。もしリロードされていなければ手動でリロードを試してみてください。

 

4) AOT ビルドへの対応

Ignite UI は Angular の AOT ビルド にも対応しています。

AOT ビルドとは、ビルド時に Angular の Module、Component をコンパイルしておくことです。

これによって得られるメリットは

  • ブラウザ実行時に行われていたコンパイル時間がなくなり、パフォーマンス向上につながる。
  • ブラウザ実行時にコンパイルを行うためのコンパイラが不要となるため、JS ファイルのロード時間が短縮され、パフォーマンス向上につながる。

の2点です。プロダクション環境ではパフォーマンスは非常に重要なポイントですので、基本的に AOT ビルドを行うべきと考えます。

AOT ビルドを行うには 「--prod」オプションを付けて

ng build --prod // ng build --aot でもかまいません

コマンドを実行するだけです。コードの改変は一切必要ありません。

詳しくは以下をご参考ください。

https://github.com/angular/angular-cli/wiki/build#--dev-vs---prod-builds

 

5) まとめ

  • Angular を使うなら Angular CLI を使う(ほぼほぼ必須と言っても過言でない)
  • 通常の Ignite UI ライブラリに加えて、igniteui-angular2 の追加インストールが必要
  • オプションの設定方法は通常の Ignite UI コントロールの設定方法とほとんど同じ

です。

少し前までは Angular を使うための環境構築をすること自体が難関でしたが、Angular CLI の登場によって Angular を使うハードルが劇的に下がりました。今回は Angular CLI で生成した Angular プロジェクトに Ignite UI を組み込む方法をご紹介しました。

今回のサンプルのダウンロード

ダウンロードした後、zip ファイルを解凍し、解凍フォルダでコマンドプロンプトを開き

npm install

ng serve -o

で実行することができます。 

Comments

No Comments

Anonymous comments are disabled