Wijmo UI for the Web
AngularJS and RequireJS
To use Wijmo, AngularJS, and RequireJS, first call require for the widgets you need, and for angular:
require(["wijmo.wijgrid", "angular"], function () {
Inside that function, call require for angular.wijmo.
require(["wijmo.wijgrid", "angular"], function () {
require(["angular.wijmo"], function () {
var app = angular.module("myapp", ["wijmo"]);
This is so that RequireJS loads in the widgets first and then loads in angular.wijmo. Our angular.wijmo file needs to have the widgets loaded before it can create directives for them.
Drop down for full code to bind wijgrid with AngularJS and RequireJS
| Full code for using Angular and Require |
Copy Code |
|---|---|
<!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.20183.140.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.20161.90", 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 père et fils", Name: "Frédérique Citeaux", Sales: 4100 }), new Person({ ID: "BOLID", Company: "Bólido Comidas preparadas", Name: "Martín 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> | |
Here is the live grid that is created with the above code.