バージョン

AngularJS での Ignite UI for jQuery の使用

トピックの概要

このトピックでは、AngularJS 用に Ignite UI for jQuery ディレクティブを使用する方法の概要を説明します。

前提条件

以下の表は、このトピックを理解するための前提条件として必要な概念、トピック、および記事の一覧です。

このトピックの内容

このトピックは、以下のセクションで構成されます。

概要

AngularJS アプリケーションで Ignite UI for jQuery® コントロールを使用する場合に、AngularJS 用の Ignite UI for jQuery® ディレクティブによりデータ バインディングと宣言型プログラミングを利用できます。

各ディレクティブは、igniteui-angular.js ファイル内の 'igniteui-directives' と呼ばれる個別のモジュールとして利用できます。それらは HTML マーカーで AngularJS を拡張し、AngularJS により提供されるコンテキスト (スコープ) 内で、Ignite UI for jQuery コントロールを初期化しバインディングします。

注: ディレクティブは、ロードされた Ignite UI for jQuery ウィジェットに基づき動的に登録されます。したがって、正しいスクリプトのみがページにロードされるように、できれば未使用のウィジェットをロードしないように注意してください。

ディレクティブ

Angular は、1 つのビヘイビアに対するディレクティブの記述や異なる宣言的なアプローチを正規化する非常に柔軟な構文を提供するため、複数の方法でコントロールとそのオプションを初期化することができます。Angular アプリケーションで Ignite UI for jQuery の初期化を可能にする複数のオプションがあります。カスタム タグ要素の <control-name>、<div data-control-name> のような属性、またはクラス名 <div class=”control-name”> を使用できます。これらの各アプローチは、コントロール ディレクティブと一致し、同じ結果を得ることができます。つまり、以下の各定義のすべてが igRating コントロールを初期化します。

HTML の場合:

<ig-rating></ig-rating>
<div data-ig-rating></div>
<div class="ig-rating"></div>

読みやすくするために、クラス上でタグや属性を使用することをお勧めします。Angular は他の区切り文字を正規化しますが、Ignite UI for jQuery の Angular ディレクティブではコントロール名をダッシュで区切り、小文字で記述することもお勧めします。

オプション

ディレクティブ用に提供されるすべてのオプションは、作成用の Ignite UI for jQuery ウィジェットでの使用を意図しています。したがって適用可能なすべてのオプションは、Ignite UI for jQuery API リファレンス で確認することができます。オプションの定義には、ビューでの宣言またはスコープ内でのオブジェクトという 2 つの 相互排他的な方法があります。

宣言によるオプション

ビュー内のオプションは、メイン タグの属性、または複合型オプションの場合の子タグとして提供されます。

注: 宣言によるオプションは、ダッシュで区切り、小文字で記述する必要があります。

たとえば、igRating での値の設定は次のようになります。

HTML の場合:

<ig-rating value="4" value-as-percent="false"></ig-rating>

また、igGrid に対する列構成の定義は次のようになります。

HTML の場合:

<ig-grid id="grid1" data-source="northwind" auto-generate-columns="false">
    <columns>
        <column key="ProductID" header-text="Product ID" width="50px" data-type="number"></column>
        <column key="ProductName" header-text="Name"  width="250px"  data-type="string"></column>
        <column key="QuantityPerUnit" header-text="Quantity per unit"  width="200px" data-type="string"></column>
        <column key="UnitPrice" header-text="Unit Price"  width="100px" data-type="number"></column>
    </columns>
</ig-grid>

親タグの名前は、複合オプションまたは配列の名前 (この場合は、columns) と一致する必要があります。配列の場合、子タグは名前を明確に引き継がれることがなく任意であることが可能ですが、複合オブジェクトの設定では、子オブジェクトも一致している必要があります。たとえば、restSettings には、以下のように設定できる create と remove のオプションがあります。

HTML の場合:

<rest-settings>
    <create url="/api/product/" batch="false"></create>
    <remove url="/api/product/" batch="true"></remove>
</rest-settings>

スコープ オプション

最も一般的にコントロールの初期化で取り上げられることの多いスコープ オプションでは、全体のオプション オブジェクトがスコープ内で定義されます。ディレクティブは、スコープ オブジェクト プロパティに属性ディレクティブを一致させ、それを割り当てることでスコープ オプションを確認します。たとえば、以下の igTree ディレクティブを持つ場合:

HTML の場合:

<div ig-tree="treeOptions"></div>

オプションはコントローラで初期化されます。

JavaScript の場合:

app.controller('treeController',
            ['$scope', 'productCategories',
    function ($scope,   productCategories) {
        $scope.treeOptions = {
            dataSource: productCategories.data,
            bindings: {
                textKey: "Name",
                valueKey: "ProductCategoryID",
                childDataProperty: "ProductSubcategories"
            }
        };
    }]);

これらはユーザーにとって親しみやすいオプションで、AngularJS でビューからの正規化が必要ないだけでなく、Ignite UI for jQuery API をコントローラーで簡単に使用できるようにします。

イベント

Ignite UI for jQuery イベントを処理する標準的な方法は他にもありますが、ディレクティブは event- の接頭辞を持つ属性として、宣言的に定義されたハンドラをバインドすることもできます。イベントの名前は、オプションで 小文字およびダッシュで区切り、小文字で記述する命名規則に従います。たとえば、以下のコードリストは igVideoPlayer の ended イベントを宣言する方法を示しています。

HTML の場合:

<ig-video-player id="video1" event-ended="videoEnded"></ig-video-player>

JavaScript の場合:

app.controller('videoController', ['$scope',
function ($scope) {
    $scope.videoEnded = function (e, args) {
        //handle event, use arguements
    }
}]);

注: Ignite UI for jQuery にはユーザーとの対話に関連した多くのイベントがありますが、コントロールを API により操作する場合は起動しないように注意してください。ディレクティブはデータのバインドにAPI メソッドを使用します。たとえば、igCombo コントロールの activeItemChanged イベントは、バインドされた ngModel が変更されると起動されません。

オプション評価

現在、ディレクティブに提供されている各オプションは、Angular の式を使用してバインドを一回だけサポートします。これは式の値が、初期化のウィジェットに渡される前に、スコープ内で一度評価されることを意味します。スコープをオプションに正しく割り当てるには、値の内部で Angular の式構文を使用します。$eval ではスコープの範囲内で評価できるすべてを、使用することができます。たとえば 0～10 の値で、igRating 値 (デフォルトではパーセント ベース) を割り当てる場合:

JavaScript の場合:

app.controller('ratingController', ['$scope',
function ($scope) {
    $scope.averageRating = 7.5;
}]);

10 で割ります:

HTML の場合:

<ig-rating value="{{averageRating/10}}"></ig-rating>

Ignite UI for jQuery を使用した Angular アプリケーションの作成

要件

必要なリソースを考慮する場合は、Ignite UI for jQuery での JavaScript リソースの使用 のドキュメントで説明するように、同じ要件とオプションが適用され、その後に Ignite UI for jQuery Angular ディレクティブ モジュールをロードします。アプリケーションにはいくつかのスタイルと共に、以下も含める必要があります。

手順

  1. Ignite UI for jQuery のテーマと構造 ファイルを含めて開始します。

    HTML の場合:

    <!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/infragistics.css" rel="stylesheet" />

  2. JavaScript ライブラリを追加します (modernizr はオプションです)。

    HTML の場合:

    <!-- JavaScript Library Dependencies -->
<script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>

  3. Ignite UI for jQuery とディレクティブ モジュールを含めます。必要に応じてカスタム ダウンロードを使用しますが、いずれかの方法で Ignite UI for jQuery を含めることもできます。

    HTML の場合:

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.lob.js"></script>
<script src="igniteui-angular.min.js"></script>

  4. すべてのディレクティブがモジュール内にすべてのディレクティブをロードした時点で、独自の依存関係を明確にして、Angular のコントローラ、ファクトリ、プロバイダなどを定義できます。

    JavaScript の場合:

    var app = angular.module('igniteui-sample', ['igniteui-directives']);
app.controller('sampleController', ['$scope', function($scope) {
    $scope.header = 'Hello World!';
}]);

  5. ビューで、Angular に対しアプリケーションの実行場所を指示し、コントローラにアプリケーションの使用を指示する必要があります。例：

    HTML の場合:

    <body class="container" ng-app="igniteui-sample" ng-controller="sampleController">
    <!--...-->
</body>

  6. 最後に、igDialog などの使用するディレクティブを追加します。

    HTML の場合:

    <body class="container" ng-app="igniteui-sample" ng-controller="sampleController">
    <ig-dialog id="dialog1" header-text="{{header}}" height="325px"></ig-dialog>
</body>

データ バインディング

Ignite UI for jQuery ディレクティブの主な利点の 1 つは、初期化の統合だけでなくデータ バインディングのサポートがあります。ディレクティブは自動的に AngularJS のウォッチャーを初期化時に提供される各ソースに割り当てます。そのため、スコープからdataSource オプションまたは data-source 属性を必要なプロパティに設定するだけで、データ バインディングを有効にできます。

HTML の場合:

<ig-grid id="grid1" data-source="northwind" primary-key="ProductID" auto-generate-columns="true"></ig-grid>

ここでデータは、factory provider を使用してスコープ内に挿入され、次のように定義されます。

JavaScript の場合:

app.controller('gridController',
            ['$scope', 'northwind',
    function ($scope,   northwind) {
        $scope.northwind = northwind.data;
}]);

TwoWay データ バインディング

データを消費し操作できるコントロールを含む最も一般的なケースでのコントロールの場合は、TwoWay データ バインディングがサポートされます。TwoWay データ バインディングでは、対象のデータ ソースが変更された場合に、コントロール内部のデータ値が更新されます。また、変更がコントロールからビューで実行された場合、対象のデータの同期も維持されます。TwoWay データ バインディングをサポートする次のコントロールがあります:

  • igGrid
  • igCombo
  • igEditors
  • igTree

注: 一部のコントロールでは、igGrid の Updating 機能のように、TwoWay データ バインディングで追加機能を有効にする必要があります。

OneWay データ バインディング

その他のメイン グループは、主にデータの可視化コントロールで構成されるコントロールで情報を編集することができませんが、バインドされたデータ ソース内の変更を引き続き反映します。この場合、ディレクティブは OneWay コネクションを作成し、データの変更内容をビュー内のウィジェットに伝播します。このグループ内には次のコントロールが含まれます:

  • igHtmlEditor
  • igDataChart
  • igSparkline
  • igFunnelChart

テンプレート

多数の Ignite UI for jQuery のコントロールでは、Infragistics テンプレート エンジン によって処理されるテンプレートをデフォルトでサポートしています。Ignite UI for jQuery® Templating Engine は、HTML 要素のセットにコンテンツ テンプレートを適用するための JavaScript ライブラリです。これは条件付きのロジックとネストされたテンプレートをサポートします。エンジンは、提供されたデータ内の対応するプロパティ値の置き換えに、${property} 表記を使用します。たとえば、以下のように、列の値をスタイルとフォーマット用に追加のマークアップでラッピングします。

HTML の場合:

<ig-grid>
    <columns>
        <column key="UnitPrice" header-text="Unit Price"  width="100px" data-type="number"
                template="€ <strong> ${UnitPrice} </strong>"></column>
    </columns>
</ig-grid>

または、イメージ列のように、セルに対して追加の HTML マークアップを設定します。

JavaScript の場合:

app.controller('gridController',
            ['$scope', 'northwindEmployees',
    function ($scope,   northwindEmployees) {
        $scope.gridOptions = {
            dataSource: $scope.northwindEmployees.data,
            columns: [
                   //...
                   { headerText: "PhotoPath", 
                   key: "PhotoPath", 
                   dataType: "string",  
                   template: '<img class="gallery-image" src="${PhotoPath}" />' 
               }
            ],
            // ...
        };
    }]);

宣言によるテンプレートの設定

テンプレート エンジンは、条件付のテンプレートに二重の波括弧 ({{if condition}} など) を使用しますが、この括弧はAngular の式で評価に使用されます。したがって、このようなテンプレートを宣言による初期化で使用すると、競合の原因になる場合があります。条件付テンプレートを宣言的に提供する方法や、テンプレートのプロセスをカスタマイズする方法の詳細は、AngularJS を使用した条件付きテンプレート化および高度なテンプレート化 のトピックを参照してください。

関連項目:igGrid のサンプル

HTML コンテンツでの制御

HTML のコンテンツをコントロールに提供するには （またオプションとして構文解析されないようにするには)、<content> エレメント内で構文解析されないようにラップおよびマークアップする必要があります。以下の例は、追加のマークアップを igDialog コントロールに追加する方法を示します。

HTML の場合:

<ig-dialog id="dialog1" header-text="Foo" height="300px">
      <content>
      <p>
            <img style="width: 220px" src="http://www.igniteui.com/images/samples/dialog-window/content.jpg" />
      </p>
      </content>
</ig-dialog>

この手法は、igDialog、igLayoutManager、および igTileManager などのコントロールに対し、追加のマークアップを適用します。

関連項目:igDialog Angular のサンプル

関連コンテンツ

トピック

このトピックの追加情報については、以下のトピックも合わせてご参照ください。

サンプル

このトピックについては、以下のサンプルも参照してください。

オンラインで表示: GitHub