Wijmo UI for the Web
AngularJS の使用
| Wijmo ユーザーガイド > 概念 > ウィジェットを統合するフレームワーク > AngularJS の使用 |
AngularJS は軽量な MVW JavaScript フレームワークです。Wijmo は、この AngularJS をサポートすることで、動的に変化する UI を簡単に作成して管理できるようになりました。jQuery と共に AngularJS を使用して、基底のデータモデルを持つページの魅力を高めることができます。
当社の AngularJS basic demo または AngularJS collections demo をぜひご覧ください。AngularJS を使用した Wijmo ウィジェットのさまざまな使用方法を参照できます。AngularJS の完全な概要、チュートリアル、マニュアルなどについては、http://angularjs.org/ を参照してください。
次のいくつかの手順に従い、Wijmo で AngularJS を簡単に使用できます。
はじめに、以下のサンプルを簡単に確認します。各サンプルでは、必要なファイルの参照を追加し、コントローラーを作成し、マークアップを作成する方法を示します。
この例では、ある要素の値が変更されたときに、それに応じて他の要素が更新されるように相互にバインドされるテキストボックス、スライダ、およびゲージを作成します。
1. ライブラリ参照の追加
最初の手順では、.html ページを作成し、依存ファイルへのリンクを <head> タグ内のプロジェクトに追加します。それには、コンテンツ配信ネットワーク（CDN）ファイルに単にリンクします。
注意：CDN（http://wijmo.c1.grapecity.com/products/wijmo-enterprise//#wijmo-cdn）から最新の依存ファイルを参照してください。
| リファレンス |
コードのコピー |
|---|---|
<!--jQuery References--> <script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js" type="text/javascript"></script> <!--Theme--> <link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets CSS--> <link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20151.71.min.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets JavaScript--> <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20151.71.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20151.71.min.js" type="text/javascript"></script> | |
次に、AngularJS および Wijmo 対応 AngularJS 拡張ライブラリの参照を <head> タグ内に追加します。
| AngularJS リファレンス |
コードのコピー |
|---|---|
<!-- Angular. This must come after jQuery. --> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/interop/angular.wijmo.3.20173.128.min.js"></script> | |
2. コントローラーの作成
ここでモデルとコントローラーを作成します。次のスクリプトは基本的な使用方法のよい例です。$scope パラメータを介して、コントローラーに、そのモデルを配置できるデータコンテキストが提供されます。このスクリプトを <head> タグ内に配置します。
| コントローラー |
コードのコピー |
|---|---|
<script type="text/javascript"> // AngularJS controller used for this sample function MyController($scope) { $scope.val = 50; $scope.min = 0; $scope.max = 100; } </script> | |
3. マークアップを作成します
最初に、このドキュメントを Angular アプリケーションとして定義します。ページ上部の <html> タグを次のマークアップに置き換えます。AngularJS に "wijmo" モジュールをロードするように通知するために、ng-app 属性値を "wijmo" に設定します。
<html ng-app="wijmo">
次に、DOM 要素のコントローラーを指定します。この場合は、body 要素を使用して、その中のすべてがコントローラーのモデルにアクセスできるようにします。
<body ng-controller="MyController">
最後に、コンポーネントのマークアップを作成します。このマークアップは、ASP.NET Wijmo コントロールで使用されるマークアップなど、サーバーコントロールで使用されるマークアップにたいへん似ています。マークアップの作成に使用されるメソッドは、すべてのマークアップの要素と属性を調べ、それらをウィジェットやオプションとして解析します。
| マークアップ |
コードのコピー |
|---|---|
<h2>Textbox</h2> <input ng-model="val" style="width: 200px;" /> <span>{{val}}</span> <h2>Slider</h2> <!-- Create a wijslider widget using declarative markup --> <wij-slider value="val" min="{{min}}" max="{{max}}" style="width: 200px;"></wij-slider> <h2>Gauge</h2> <!-- Create a wijlineargauge widget using declarative markup --> <wij-lineargauge value="{{val}}" min="{{min}}" max="{{max}}"></wij-lineargauge> | |
Wijmo ウィジェットごとに、AngularJS ガイドラインに従った "wij-" プレフィックスで始まる AngularJS ディレクティブがあります。
一部のウィジェットオプションは、AngularJS の ng-model ディレクティブとまったく同様に動作します。この場合は、どちらのウィジェットの "value" オプションも、コントローラーから提供されるモデルを指定する {{mustache}} 構文を使用しません。その他のウィジェットオプションは、AngularJS で HTML 要素が連結される方法と同じ方法で連結できます。AngularJS {{expression}} を中かっこで囲むだけで、AngularJS は、オプション値とモデルを同期します。
完全なマークアップは次のように表示されます。
| マークアップ全体 |
コードのコピー |
|---|---|
<!DOCTYPE html> <html ng-app="wijmo"> <head> <meta charset="utf-8"> <title>Getting Started with Wijmo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=960"> <!-- jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js" type="text/javascript"></script> <!-- Wijmo CSS and script --> <link href="http://cdn.wijmo.com/themes/metro/jquery-wijmo.css" rel="stylesheet" title="metro-jqueryui" type="text/css" /> <link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20173.128.min.css" rel="stylesheet" type="text/css" /> <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20173.128.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20173.128.min.js" type="text/javascript"></script> <!-- #Region "links" --> <!-- Angular. This must come after jQuery. --> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/interop/angular.wijmo.3.20173.128.min.js"></script> <!-- #End Region --> <!-- #Region "js" --> <script type="text/javascript"> // AngularJS controller used for this sample function MyController($scope) { $scope.val = 50; $scope.min = 0; $scope.max = 100; } </script> <!-- #End Region --> </head> <body ng-controller="MyController"> <!-- #Region "markup" --> <h2>Textbox</h2> <input ng-model="val" style="width: 200px;" /> <span>{{val}}</span> <h2>Slider</h2> <!-- Create a wijslider widget using declarative markup --> <wij-slider value="val" min="{{min}}" max="{{max}}" style="width: 200px;"></wij-slider> <h2>Gauge</h2> <!-- Create a wijlineargauge widget using declarative markup --> <wij-lineargauge value="{{val}}" min="{{min}}" max="{{max}}"></wij-lineargauge> <!-- #End Region --></body> </html> | |
ページを開くと、次の図のような画面が表示されます。テキストボックスに新しい値を入力するか、スライダをドラッグします。他の要素の値が指定された値に一致するように変更されていることを確認してください。
この例では、グリッド内のある項目の値が変更されたときに、それに応じて他のウィジェットが更新されるように相互にバインドされるグラフ、グリッド、およびテーブルを含むプロジェクトを作成します。
1. ライブラリ参照の追加
最初の手順では、.html ページを作成し、依存ファイルへのリンクを <head> タグ内のプロジェクトに追加します。それには、コンテンツ配信ネットワーク（CDN）ファイルに単にリンクします。
注意：CDN（http://wijmo.c1.grapecity.com/products/wijmo-enterprise//#wijmo-cdn）から最新の依存ファイルを参照してください。
| リファレンス |
コードのコピー |
|---|---|
<!--jQuery References--> <script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js" type="text/javascript"></script> <!--Theme--> <link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets CSS--> <link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20151.71.min.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets JavaScript--> <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20151.71.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20151.71.min.js" type="text/javascript"></script> | |
次に、AngularJS および Wijmo 対応 AngularJS 拡張ライブラリの参照を <head> タグ内に追加します。
| AngularJS リファレンス |
コードのコピー |
|---|---|
<!-- Angular. This must come after jQuery. --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script> <script src="http://cdn.wijmo.com/interop/angular.wijmo.3.20173.128.js" type="text/javascript"></script> | |
2. モデルとコントローラーの作成
ここでモデルとコントローラーを作成します。コントローラーは、$scope および $locale パラメータを介して、モデルにデータコンテキストを提供します。このスクリプトを <head> タグ内に配置します。
| コントローラー |
コードのコピー |
|---|---|
<script type="text/javascript"> //Person class function Person(data) { this.ID = data.ID; this.Company = data.Company; this.Name = data.Name; this.Sales = data.Sales; }; function MyController($scope, $locale) { $scope.list = [ new Person({ ID: "ANATR", Company: "Ana Trujillo Emparedados y helados", Name: "Ana Trujillo", Sales: 8900 }), new Person({ ID: "ANTON", Company: "Antonio Moreno Taqueria", Name: "Antonio Moreno", Sales: 4500 }), new Person({ ID: "AROUT", Company: "Around the Horn", Name: "Thomas Hardy", Sales: 7600 }), new Person({ ID: "BERGS", Company: "Berglunds snabbkop", Name: "Christina Berglund", Sales: 3200 }) ]; } </script> | |
3. マークアップを作成します
最初に、このドキュメントを Angular アプリケーションとして定義します。ページの最上部にある <html> タグを次のマークアップに置き換えます。
| ng-app |
コードのコピー |
|---|---|
<html ng-app="wijmo"> | |
次に、コントローラーのスコープを１つの DOM 要素に設定します。ここでは body を使用し、body の内部にあるすべてがモデルにアクセスできるようにします。
| ng-controller |
コードのコピー |
|---|---|
<body ng-controller="MyController"> | |
最後に、カスタムマークアップを作成します。これは、ASP.NET コントロールで使用するマークアップなど、サーバーコントロールで使用するマークアップと非常によく似ています。マークアップの作成に使用されるメソッドは、すべてのマークアップの要素と属性を調べ、それらをウィジェットやオプションとして解析します。
| マークアップ |
コードのコピー |
|---|---|
<h2>Chart</h2> <wij-barchart dataSource="list"> <header text="Sales"></header> <series-list> <series label="Sales"> <data> <x bind="Name" ></x> <y bind="Sales"></y> </data> </series> </series-list> </wij-barchart> <h2>Grid</h2> <wij-grid id="dataGrid" data="list" allow-editing="true" style="width: 600px;"> <columns> <column></column> <column></column> <column></column> <column data-type="number"> <cell-template> <wij-slider value="rowData.Sales" max="10000"></wij-slider> </cell-template> </column> </columns> </wij-grid> <h2>Table</h2> <table> <tbody id="dataTable"> <tr ng-repeat="item in list"> <td>{{item.ID}}</td> <td>{{item.Company}}</td> <td>{{item.Name}}</td> <td>{{item.Sales}}</td> </tr> </tbody> </table> | |
wijbarchart、wijgrid、およびテーブルが {{model}} バインディング構文を使用することに注意してください。この構文では、任意の Wijmo ウィジェットを使用できます。当社のライブラリは、ウィジェット名を使用した HTML 要素の名前付けを想定しています。これが完了すると、属性と子要素を設定するだけで、ウィジェットのオプションとイベントハンドラを定義できます。
マークアップ全体は次のようになります。
| マークアップ全体 |
コードのコピー |
|---|---|
<html ng-app="wijmo"> <head> <meta charset="utf-8"> <title>Collections</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=960"> <!-- jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js" type="text/javascript"></script> <!-- Wijmo CSS and script --> <link href="http://cdn.wijmo.com/themes/metro/jquery-wijmo.css" rel="stylesheet" title="metro-jqueryui" type="text/css" /> <link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20173.128.min.css" rel="stylesheet" type="text/css" /> <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20173.128.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20173.128.min.js" type="text/javascript"></script> <!-- #Region "links" --> <!-- Angular. This must come after jQuery. --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script> <script src="http://cdn.wijmo.com/interop/angular.wijmo.3.20173.128.js" type="text/javascript"></script> <!-- #End Region --> <!-- #Region "js" --> <script type="text/javascript"> //Person class function Person(data) { this.ID = data.ID; this.Company = data.Company; this.Name = data.Name; this.Sales = data.Sales; }; function MyController($scope, $locale) { $scope.list = [ new Person({ ID: "ANATR", Company: "Ana Trujillo Emparedados y helados", Name: "Ana Trujillo", Sales: 8900 }), new Person({ ID: "ANTON", Company: "Antonio Moreno Taqueria", Name: "Antonio Moreno", Sales: 4500 }), new Person({ ID: "AROUT", Company: "Around the Horn", Name: "Thomas Hardy", Sales: 7600 }), new Person({ ID: "BERGS", Company: "Berglunds snabbkop", Name: "Christina Berglund", Sales: 3200 }) ]; } </script> <!-- #End Region --> </head> <body ng-controller="MyController"> <!-- #Region "markup" --> <h2>Chart</h2> <wij-barchart dataSource="list"> <header text="Sales"></header> <series-list> <series label="Sales"> <data> <x bind="Name" ></x> <y bind="Sales"></y> </data> </series> </series-list> </wij-barchart> <h2>Grid</h2> <wij-grid id="dataGrid" data="list" allow-editing="true" style="width: 600px;"> <columns> <column></column> <column></column> <column></column> <column data-type="number"> <cell-template> <wij-slider value="rowData.Sales" max="10000"></wij-slider> </cell-template> </column> </columns> </wij-grid> <h2>Table</h2> <table> <tbody id="dataTable"> <tr ng-repeat="item in list"> <td>{{item.ID}}</td> <td>{{item.Company}}</td> <td>{{item.Name}}</td> <td>{{item.Sales}}</td> </tr> </tbody> </table> <!-- #End Region --> </body> </html> | |
ページを開くと、次の図のような画面が表示されます。グリッド内のセルをダブルクリックしてコンテンツを変更します。他の要素上のコンテンツが指定されたコンテンツに一致するように変更されていることを確認してください。
全て展開
すべて折りたたむ