Ignite UI を使用した作業の開始

Ignite UI for Angular は、マテリアルベース UI ウィジェット、コンポーネント & Sketch UI キットでインフラジスティックス Angular のディレクティブをサポートします。デスクトップブラウザー向けアプリ、高パフォーマンスな HTML5 や JavaScript アプリ、Google の Angular フレームワークを対象にしたプログレッシブウェブアプリ (PWA) を作成できます。

前提条件

NodeJS をインストールします。
Visual Studio Code をインストールします。

DOWNLOAD NODE

DOWNLOAD VS CODE

Ignite UI for Angular のインストール

Ignite UI for Angular は、Angular CLI または Ignite UI CLI を使用してインストールできます。

Angular CLI のクイックスタート

Angular CLI は、ng add コマンドでプロジェクトに外部ライブラリのサポートを提供します。このコマンドは、ライブラリの npm パッケージをワークスペースにインストールし、そのライブラリを使用するように現在の作業ディレクトリにプロジェクトを設定します。

Angular CLI を使用して Angular アプリケーションを作成するには、ターミナルを開き、次のコマンドを入力します。

ng new <project name> --style=scss

--style オプションでアプリケーションのスタイルファイルに使用するファイル拡張子またはプリプロセッサを指定できます。コンポーネントのスタイルは Ignite UI for Angular テーマライブラリに基づいているため、SCSS を使用することをお勧めします。後で、Ignite UI for Angular パッケージをインストールすると、アプリケーションはデフォルトのスタイリングテーマを使用するように構成され、すべてのコンポーネントインスタンスまたは特定のコンポーネントインスタンスに対して簡単にカスタマイズできます。

その後、次のコマンドを実行して、Ignite UI for Angular パッケージを、その依存関係、フォントのインポートおよびプロジェクトへのスタイル参照とともにインストールできます。

ng add igniteui-angular

Note

上記のコマンドで Ignite UI for Angular のトライアル版をインストールすることに注意してください。

インストール時に IE、Edge、および Safari のポリフィルを有効にするかどうかのプロンプトが表示されます。これにより、プロジェクトに web-animations-js パッケージがインストールされます。これは、アプリケーションとこれらのブラウザーのいずれかで AnimationBuilder を使用する場合に必要です。ブラウザーで HTML 要素のスタイルをリセットする CSS ライブラリを追加することもできます。minireset.css がアプリケーションにインストールされます。

ライセンス版の Ignite UI for Angular パッケージの使用を開始する場合、Schematics および Ignite UI CLI を使用したパッケージのアップグレードガイドに従うことをお勧めします。

以下は、ライセンス版の Ignite UI for Angular の使用を開始するために実行する必要がある手順の概要です。プロジェクトのセットアップに応じて、プロジェクトで以下の schematic を実行します。

ng g @igniteui/angular-schematics:upgrade-packages

または igniteui-cli を使用する場合:

ig upgrade-packages

Schematic はプロジェクトのパッケージの依存関係を切り替え、ソース参照を更新します。まだセットアップされていない場合、NPM レジストリへのログインが要求されます。

新しいセットアップで npm レジストリにログイン

上記の方法は、Ignite UI for Angular トライアル版パッケージが既にインストールされているシナリオのみを対象としています。プロジェクトの新しいセットアップを実行する場合、または Ignite UI for Angular を使用する場合は、以下のガイダンスに従ってください。

次の方法でプライベート npm フィード環境の正しいセットアップを実行することが重要です:

プライベートレジストリの有効なセットアップを確認します。
トライアル版以外のユーザーアカウントとパスワードを指定して npm を使用してプライベートフィードにログインします。

プロセス全体の詳細はこちらにあります。

Angular Schematics & Ignite UI CLI のクイックスタート

アプリケーションをゼロから作成し、Ignite UI for Angular コンポーネントを使用するように構成するには、Ignite UI for Angular Schematics または Ignite UI CLI を使用できます。最初の手順には、以下のように各パッケージをグローバルにインストールします。

npm i -g @igniteui/angular-schematics

または

npm install -g igniteui-cli

Ignite UI CLI を使用したガイド付きエクスペリエンスまたは Ignite UI for Angular Schematics は、構成したアプリケーションをブートストラップする最も簡単な方法です。

Ignite UI for Angular Schematics を使用してガイドをアクティブにするには、次のコマンドを実行します。

ng new --collection="@igniteui/angular-schematics"

CLI ツールを使用する場合は、以下のコマンドを実行します。

ig

Note

まだセットアップされていない場合、手順の実行中のある時点で NPM レジストリへのログインが要求されます。これは、トライアル版からライセンスアカウントのセットアップの一部です。

はじめての Ignite UI CLI アプリ開発

Angular Schematics & Ignite UI CLI についての詳細。

Ignite UI for Angular の使用

ここまでで Ignite UI for Angular コンポーネントを使用する準備ができました。

コンポーネントの自動追加

モジュールのインポートとコンポーネントの使用

component スケマティックまたは add コマンドを使用して、アプリケーションに新しいコンポーネントを追加できます。

ng g @igniteui/angular-schematics:component

ig add

Note

アプリケーションを Ignite UI CLI を使用して作成した場合、または ng add igniteui-angular コマンドで Ignite UI for Angular を追加した Angular CLI を使用して作成した場合は、ig add コマンドを使用できます。

メニューのオプションでアプリケーションに追加するコンポーネントを選択、次に新しいコンポーネントをプロジェクトに追加するとページのどこでも使用できます。

アプリケーションの実行

アプリケーションを実行してページを確認します。

npm start

コンポーネントの自動追加

モジュールのインポート

はじめに app.module.ts ファイルで使用するコンポーネントの各モジュールをインポートする必要があります。igxGrid で実行します。BrowserAnimationsModule によってはアニメーションのあるコンポーネントがあることに注意してください。さっそくインポートしてみましょう。

// app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

// Here we import the IgxGridModule, so we can use the igxGrid!
import { IgxGridModule } from 'igniteui-angular';
// import { IgxGridModule } from '@infragistics/igniteui-angular'; for licensed package

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

コンポーネントの使用

igxGrid をマークアップで使用する準備ができました。app.component.html ファイルを定義しましょう。

<!-- app.component.html -->

<div style="text-align:center; margin-bottom: 20px;">
  <h1>
    Welcome to {{title}}!
  </h1>
</div>

<div style="text-align: center;">
  <igx-grid [data]="localData" width="600px" height="400px" style="margin: auto" [allowFiltering]="true">
    <igx-column field="Name" dataType="string"></igx-column>
    <igx-column field="Age" dataType="number"></igx-column>
  </igx-grid>
</div>

app.component.ts から参照されるグリッドデータとアプリケーションのタイトルを定義します。

// app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  localData = [
    { Name:'John', Age: 29 },
    { Name:'Alice', Age: 27 },
    { Name:'Jessica', Age: 31 },
  ];

  title = 'My Ignite UI project';
}

アプリケーションの実行

以下のコマンドを使用して新しいアプリケーションを実行できます。

Ignite UI CLI を使用してアプリケーションを作成する場合:

ig start

Angular CLI を使用してアプリケーションを作成する場合:

ng serve

最終的な結果は以下のようになります。

API リファレンス

このトピックでは、Ignite UI CLI. で Ignite UI for Angular プロジェクトを作成するプロセスを使用して Ignite UI for Angular アプリケーションを作成する方法について説明しました。また Ignite UI for Angular を Angular CLI を使用して既存のアプリケーションに追加する方法についてもふれました。IgxGridComponent を含むことにより、カスタムなページをデザインしてナビゲーションメニューを参照して表示できる機能が提供されます。

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。

Ignite UI を使用した作業の開始

前提条件

Ignite UI for Angular のインストール

Angular CLI のクイック スタート

Note

新しいセットアップで npm レジストリにログイン

Angular Schematics & Ignite UI CLI のクイック スタート

Note

Ignite UI for Angular の使用

コンポーネントの自動追加

モジュールのインポートとコンポーネントの使用

Note

アプリケーションの実行

コンポーネントの自動追加

モジュールのインポート

コンポーネントの使用

アプリケーションの実行

API リファレンス

その他のリソース

テーマ設定

Angular CLI のクイックスタート

Angular Schematics & Ignite UI CLI のクイックスタート