AngularJS と wijgrid

この Angular 導入ガイドでは、HTML マークアップ、jQuery スクリプト、Angular JS ディレクティブを使用して、HTML プロジェクトで Grid ウィジェットを使用する方法について説明します。

コントローラーとモデルをそれぞれ個別のファイルで設定する、より複雑なサンプルについては、弊社 Web サイト「AngularJS Directive Gallery」内の「Wijmo Grid」を参照してください。

新しい HTML ページを作成するには、任意のテキストエディタで次のコードを追加し、.html 拡張子を付けてドキュメントを保存します。<HTML> タグと <body> タグが通常のタグとは異なることに注意してください。
- <HTML> タグは、ng-app ディレクティブによって Angular アプリケーションとマークされ、さらに Wijmo を使用するように指定されます。
- <body> タグを使用して、作成する Angular コントローラーのスコープを定義します。スコープには <div> などの別のタグも使用できますが、ここでは、body 全体を使用します。ng-controller ディレクティブは、このスコープ内で使用するコントローラーを指定します。
ドロップダウンからマークアップをコピーします
任意のテキストエディタに貼り付けます。
コードのコピー

<!DOCTYPE HTML> <HTML ng-app="MyApp"> <head> </head> <body ng-controller="MyController"> </body> </HTML>

任意のテキストエディタに貼り付けます。	コードのコピー
<!DOCTYPE HTML> <HTML ng-app="MyApp"> <head> </head> <body ng-controller="MyController"> </body> </HTML>

依存ファイルへのリンクを HTML ページの <head> タグ内に追加します。最新の依存ファイルについては、「Wijmo CDN」にある CDN ファイルを参照してください。通常の参照に加えて、Angular のための２つのスクリプト参照を追加します。これらは、jQuery 参照の後の最後の２行として置く必要があります。

１つは Angular JS 自体です。
もう１つは、Wijmo の Angular JavaScript 統合ライブラリです。

ドロップダウンから参照コードをコピーして head タグ内に貼り付けます

参照	コードのコピー
<!-- 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> <!--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.20173.128.min.css" rel="stylesheet" type="text/css" /> <!-- Wijmo Scripts --> <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> <!-- Angular --> <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.min.js"></script>

<head> タグ内の参照の下に次のスクリプトを追加して、モデルとコントローラーを作成します。モデルを使用して、コントローラーで提供するデータにリンクできるデータフィールドを指定します。または、より基本的な使用方法として、モデルを省略し、コントローラーの各フィールドに１つの値を提供することができます。コントローラーの $scope パラメータは、モデルのデータコンテキストを制御します。オプションの $locale パラメータを追加することもできます。

スクリプト	コードのコピー
<script type="text/javascript"> var app = angular.module("MyApp", ["wijmo"]); //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>

スクリプト

コードのコピー

<script type="text/javascript">
    var app = angular.module("MyApp", ["wijmo"]);
    //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>

次のマークアップを <body> タグ内に追加して、ウィジェットを作成します。Angular JS では、<wij-* 要素を使用してウィジェットを作成し、マークアップで属性またはネストした要素を使用してウィジェットオプションやイベントハンドラを設定します。{{val}} のように２組の中かっこで値を囲んでモデルにオプションを連結します。各ウィジェットは、wij- プレフィックスで始まる Angular JS ディレクティブを使用して定義されるため、jQuery でそれを初期化する必要はありません。

マークアップ	コードのコピー
<wij-grid id="dataGrid" data="list" allow-editing="true" style="width: 600px;"> <columns> <column></column> <column></column> <column></column> <column data-type="number"></column> </columns> </wij-grid>

マークアップ

コードのコピー

<wij-grid id="dataGrid" data="list" allow-editing="true" style="width: 600px;">
     <columns>
        <column></column>
        <column></column>
        <column></column>
        <column data-type="number"></column>
    </columns>
</wij-grid>

HTML ファイルを保存し、それをブラウザで開きます。実際のウィジェットは次のように表示されます。

関連トピック

参照