Ignite UI で作業を開始
Ignite UI for Angular は、マテリアルベース UI ウィジェット、コンポーネント & Sketch UI キットでインフラジスティックス Angular のディレクティブをサポートします。デスクトップ ブラウザー向けアプリ、高パフォーマンスな HTML5 や JavaScript アプリ、Google の Angular フレームワークを対象にしたプログレッシブ ウェブアプリ (PWA) を作成できます。
前提条件
- NodeJS をインストールします。
- 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
または
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 を含むことにより、カスタムなページをデザインしてナビゲーション メニューを参照して表示できる機能が提供されます。
