Ignite UI で作業を開始

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

前提条件

  1. NodeJS をインストールします。
  2. Visual Studio 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

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

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

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

npm i -g @igniteui/angular-schematics

or:

npm install -g igniteui-cli 

構成されたアプリケーションをブートストラップする最も簡単な方法はガイド エクスペリエンストピックで説明します。

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

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

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

ig

Building Your First Ignite UI CLI App

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';

@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 を含むことにより、カスタムなページをデザインしてナビゲーション メニューを参照して表示できる機能が提供されます。

その他のリソース

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