AngularJS と RequireJS

Wijmo、AngularJS、および RequireJS を使用するには、最初に、必要なウィジェットおよび angular に対して require を呼び出す必要があります。

require(["wijmo.wijgrid", "angular"], function () {

この関数内で、angular.wijmo に対して require を呼び出します。

require(["wijmo.wijgrid", "angular"], function () {
    require(["angular.wijmo"], function () {
        var app = angular.module("myapp", ["wijmo"]);

こうすることで、RequireJS は最初にウィジェットをロードしてから、次に angular.wijmo をロードします。ここで使用する angular.wijmo ファイルでは、事前にウィジェットをロードしておかないと、ウィジェットのディレクティブを作成できません。

ドロップダウンして、wijgrid を AngularJS および RequireJS にバインドするための完全なコードを参照する

Angular および Require を使用するための完全コード	コードのコピー
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Wijgrid with Angular JS</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=960"> <!--Wijmo Theme--> <link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css"> <!--Wijmo Widget CSS--> <link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20173.128.min.css" rel="stylesheet" type="text/css"> <!--RequireJS AMD Loader--> <script src="http://cdn.wijmo.com/external/require.js" type="text/javascript"></script> <script type="text/javascript"> requirejs.config({ baseUrl: "http://cdn.wijmo.com/amd-js/3.20173.128", paths: { "jquery": "jquery-1.11.1.min", "jquery-ui": "jquery-ui-1.11.0.custom.min", "jquery.ui": "jquery-ui", "jquery.mousewheel": "jquery.mousewheel.min", "globalize": "globalize.min", "angular": "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min" } }); // when document loads, create ViewModel, and apply bindings //Person class function Person(data) { this.ID = data.ID; this.Company = data.Company; this.Name = data.Name; this.Sales = data.Sales; }; //Create ViewModel require(["wijmo.wijgrid", "angular"], function () { require(["angular.wijmo"], function () { var app = angular.module("myapp", ["wijmo"]); app.controller("ViewModel", function ($scope) { $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 }), new Person({ ID: "BLONP", Company: "Blondel pere et fils", Name: "Frederique Citeaux", Sales: 4100 }), new Person({ ID: "BOLID", Company: "Bolido Comidas preparadas", Name: "Martin Sommer", Sales: 3000 }), new Person({ ID: "DUMON", Company: "Du monde entier", Name: "Janine Labrune", Sales: 4710 }), new Person({ ID: "EASTC", Company: "Eastern Connection", Name: "Ann Devon", Sales: 2900 }), new Person({ ID: "ERNSH", Company: "Ernst Handel", Name: "Roland Mendel", Sales: 7020 }), new Person({ ID: "FISSA", Company: "Familia Arquibaldo", Name: "Salchichas", Sales: 4280 }), new Person({ ID: "BONAP", Company: "Bon app", Name: "Pedro Afonso", Sales: 1900 }) ]; }); angular.bootstrap(document, ['myapp']); }); }); </script> </head> <body ng-controller="ViewModel"> <div class="container"> <h2> Binding WijGrid with Angular JS</h2> <div> <div> <wij-grid data="list"></wij-grid> </div> </div> </div> </body> </html>

Angular および Require を使用するための完全コード

コードのコピー

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Wijgrid with Angular JS</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=960">
     <!--Wijmo Theme-->
    <link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css">
    <!--Wijmo Widget CSS-->
    <link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20173.128.min.css" rel="stylesheet" type="text/css">
    <!--RequireJS AMD Loader-->
    <script src="http://cdn.wijmo.com/external/require.js" type="text/javascript"></script>    <script type="text/javascript">
    
        requirejs.config({
            baseUrl: "http://cdn.wijmo.com/amd-js/3.20173.128",
            paths: {
                "jquery": "jquery-1.11.1.min",
                "jquery-ui": "jquery-ui-1.11.0.custom.min",
                "jquery.ui": "jquery-ui",
                "jquery.mousewheel": "jquery.mousewheel.min",
                "globalize": "globalize.min",
                "angular": "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min"
            }

        });
        // when document loads, create ViewModel, and apply bindings
        //Person class
        function Person(data) {
            this.ID = data.ID;
            this.Company = data.Company;
            this.Name = data.Name;
            this.Sales = data.Sales;
        };

        //Create ViewModel
        require(["wijmo.wijgrid", "angular"], function () {
            require(["angular.wijmo"], function () {
                var app = angular.module("myapp", ["wijmo"]);

                app.controller("ViewModel", function ($scope) {


                    $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 }),
                      new Person({ ID: "BLONP", Company: "Blondel pere et fils", Name: "Frederique Citeaux", Sales: 4100 }),
                      new Person({ ID: "BOLID", Company: "Bolido Comidas preparadas", Name: "Martin Sommer", Sales: 3000 }),
                      new Person({ ID: "DUMON", Company: "Du monde entier", Name: "Janine Labrune", Sales: 4710 }),
                      new Person({ ID: "EASTC", Company: "Eastern Connection", Name: "Ann Devon", Sales: 2900 }),
                      new Person({ ID: "ERNSH", Company: "Ernst Handel", Name: "Roland Mendel", Sales: 7020 }),
                      new Person({ ID: "FISSA", Company: "Familia Arquibaldo", Name: "Salchichas", Sales: 4280 }),
                      new Person({ ID: "BONAP", Company: "Bon app", Name: "Pedro Afonso", Sales: 1900 })
                    ];
                });

                angular.bootstrap(document, ['myapp']);
            });
        });
    </script>
</head>
<body ng-controller="ViewModel">
    <div class="container">
        <h2>
            Binding WijGrid with Angular JS</h2>
        <div>
            <div>
                <wij-grid data="list"></wij-grid>
            </div>
        </div>
    </div>
</body>
</html>

上記のコードによって作成される実際のグリッドは、次のとおりです。

関連トピック