Ignite UI for Angular を開始

Ignite UI for Angular を使い始めるためには

Ignite UI for Angular を商用目的で利用する場合、ライセンスを取得する必要があります。このライセンスは Ignite UI for JavaScript、Infragistics Professional、Infragistics Ultimate にも含まれています。

商用利用のための評価目的として利用する場合、インフラジスティックス アカウントを作成することで、30 日間の無料トライアル技術サポートを受けることができます。下記のフォームに入力してください。


評価用 30 日トライアル技術サポートへの申し込み

* 必須入力項目
Loading...
 

Ignite UI for Angular のセットアップ方法

1. 必要環境のインストール

Ignite UI for Angular を使用するためには以下のツールが必要となります。

  • Node.js v6.9.x 以上(v8.x.x 推奨)
  • npm v3.x.x 以上(v5.x.x 推奨)
  • Angular CLI v1.4.x or v1.5.x

既に環境をインストール済みの場合は 2-2. Ignite UI for Angular パッケージのインストール へスキップしてください。

1-1. Node.js, npm のインストール

https://nodejs.org/ja/ から 推奨版 をダウンロードしてインストールします。インストールが終わったら、コマンドプロンプト(Windows)あるいはターミナル(macOS)を起動して、以下のコマンドを実行して Node.js と npm のバージョンを確認します。コマンド実行時の作業ディレクトリは任意です。

node -v
npm -v

1-2. Angular CLI のインストール

1-1. Node.js, npm のインストール の際に起動したコマンドプロンプトまたはターミナル上で引き続き作業を行なっていきます。以下のコマンドを実行して Angular CLI をインストールします。

npm install -g @angular/cli

インストールが終わったら、以下のコマンドを実行して Angular CLI のバージョンを確認します。

ng -v

以上で環境準備は完了です。

2. Ignite UI for Angular のインストール

2-1. Angular CLI プロジェクトの作成

Documents ディレクトリ直下に Angular CLI プロジェクトを作成します。Documents ディレクトリの代わりに任意のディレクトリで作業を進めてかまいません。

cd Documents
ng new my-app

作成が完了したら、プロジェクトディレクトリに移動します。

cd my-app

以降、コマンド実行はプロジェクトディレクトリ上で行っていきます。

2-2. Ignite UI for Angular パッケージのインストール

Ignite UI for Angular のパッケージ名は igniteui-js-blocks になります。現在の最新バージョンは、Angular 5系をターゲットにしているため、インストールバージョンに注意が必要です。

Angular CLI v1.4.x(Angular 4.x系)を使用している場合
npm install igniteui-js-blocks@4.2.0
Angular CLI v1.5.x (Angular 5.x系)を使用している場合
npm install igniteui-js-blocks

Angular CLI v1.5.x を使用している場合、codelyzer に関するワーニングが出力されますが、実行に影響はありません。

npm WARN codelyzer@3.2.2 requires a peer of @angular/compiler@^2.3.1 || >=4.0.0-beta <5.0.0 but none is installed. You must install peer dependencies yourself. npm WARN codelyzer@3.2.2 requires a peer of @angular/core@^2.3.1 || >=4.0.0-beta <5.0.0 but none is installed. You must install peer dependencies yourself.

気になる場合は、Github Issue を確認してください。

igniteui-js-blocks のインストール完了後、Hammer.js に関するワーニングメッセージが表示されます。

npm WARN igniteui-js-blocks@5.0.1 requires a peer of hammerjs@^2.0.8 but none is installed. You must install peer dependencies yourself.

Hammer.js はタッチジェスチャー用のライブラリです。Ignite UI for Angular は Hammer.js に依存しているため、別途インストールする必要があります。

2-3. hammerjs パッケージのインストール

npm install hammerjs

コンパイル時に型定義ファイルも必要になるのでインストールします。

npm install @types/hammerjs

以上でインストール作業は完了です。

3. Ignite UI for Angular の組み込み

3-1. app.module.ts の編集

エディターで my-app\src\app\app.module.ts を開いて以下のように編集します。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { IgxNavbarModule } from 'igniteui-js-blocks/main';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    IgxNavbarModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3-2. app.component.html の編集

続いて my-app\src\app\app.component.html を開いて以下のように編集します。

<igx-navbar
    title="Home"
    actionButtonIcon="home"
    (onAction)="doStuff()">
</igx-navbar>
<h1>{{title}}</h1>

3-3. app.component.ts の編集

最後に my-app\src\app\app.component.ts を開いて以下のように編集します。

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'Hello World!';

    doStuff() {
       // do your stuff;
    }
}

3-4. IE11 用のポリフィル有効化

Angular CLI プロジェクトは、デフォルトでは IE11 で実行することができません。IE11 で実行したい場合は my-app\src\polyfills.ts 内の以下の行のコメントアウトを外します。

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

3-5. 実行確認

ng serve -o

成功すると、ブラウザが起動し、Ignite UI for Angular のナビゲーションバーコンポーネントが画面上に表示されます。

 

Ignite UI for Angular コンポーネント

Getting Started with Ignite UI for Angular is Easy

開発を加速させるコンポーネント

Ignite UI for Angular の使用方法やライブ実行されるサンプルをご確認ください。