読者です 読者をやめる 読者になる 読者になる

ComponentOne Information

ComponentOne Studio/Wijmo/Xuniの最新情報を公開中

Angular & Wijmoクイックスタート - アプリケーションの作成

Angularでは、フレームワークの機能拡張だけでなく、開発効率の向上にも非常に力が入れられています。Angular CLIというコマンドラインツールを使用することで、非常に簡単にAngularアプリケーションを作成することが可能です。

また、WijmoはAngularをサポートしており、Angularの標準的な方法で、グリッド/入力/チャートなどのエンタープライズ向けの高度なUIコンポーネントを利用することができます。

この記事では、Angular CLIとWijmoを使用して、グリッドでデータ管理を行うAngularアプリケーションを作成する方法を紹介します。Angular開発する際のサンプルやチュートリアルとしてご活用ください。

この記事では、次のバージョンのライブラリを使用して動作確認を行っています。

  • Angular 2.4.0
  • Angular CLI 1.0.0-beta.31

f:id:ComponentOne_JP:20170214103608p:plain

Angularアプリケーションを作成する

まだAngular CLIがインストールされていない場合は、次のコマンドを実行して、Angular CLIパッケージをグローバルにインストールします。

npm install -g @angular/cli

ng newコマンドを実行して、Angularアプリケーションを作成します。少し待つと、アプリケーションのソースファイルや設定ファイルが自動生成され、パッケージがインストールされます。

ng new quickstart

アプリケーションプロジェクトのフォルダに移動して、ng serveコマンドを実行すると、開発サーバー上でアプリケーションが実行されます。アプリケーションはhttp://localhost:4200で表示でき、ソースファイルを変更すると自動的に変更が反映されます。

cd quickstart
ng serve

Wijmoコンポーネントを追加する

次のコマンドを実行して、Wijmoパッケージをプロジェクトにインストールします。Wijmo製品版を使用する場合は、製品版のNpmImagesフォルダを参照します。

# トライアル版の場合
npm install --save http://prerelease.componentone.com/wijmo5/npm-images/C1Wijmo-Enterprise-Eval-AMD-5.20163.281.tgz

# 製品版の場合
npm install --save xxx/NpmImages/wijmo-amd-min/

wijmo.min.cssファイルをCDNまたはWijmo製品版から取得して、プロジェクトのsrcフォルダに追加します。

.angular-cli.jsonファイルで、wijmo.min.cssファイルを追加します。

{
  "apps": [
    {
      "styles": [
        "styles.css",
        "wijmo.min.css"
      ],
    }
  ],
}

src/app/app.modules.tsファイルで、WjGridModuleモジュールをインポートします。

import { WjGridModule } from 'wijmo/wijmo.angular2.grid';

@NgModule({
 :
  imports: [
 :
    WjGridModule
  ]
})

src/app/app.component.htmlファイルで、FlexGridコンポーネントを追加します。

<wj-flex-grid [itemsSource]="data"></wj-flex-grid>

src/app/app.component.tsファイルで、グリッドに表示するデータを作成します。

export class AppComponent {
  data: any;
  constructor() {
    this.data = [
      { id: 1, name: '果汁100%レモン', price: 100 },
      { id: 2, name: 'コーヒーマイルド', price: 100 },
      { id: 3, name: 'ピリピリビール', price: 200 },
      { id: 4, name: 'ホワイトソルト', price: 150 },
      { id: 5, name: 'だしこんぶ', price: 200 }
    ];
  }
}

以上の手順で、クイックスタートアプリケーションの作成は完了です。ng serveコマンドを実行してhttp://localhost:4200に接続すると、AngularアプリケーションでFlexGridコンポーネントが表示されていることを確認できます。

f:id:ComponentOne_JP:20170211054007p:plain

≫≫続編はこちら hatena.c1.grapecity.com

ComponentOne