Wijmo with AngularJS and RequireJS

Wijmo provides support for many frameworks like KnockoutJS, BreezeJS, AngularJS, RequireJS etc. Therefore, a developer has flexibility to choose any of these frameworks and easily use Wijmo widgets for enhancing his application in terms of UI design as well as functionality. In this blog, I discuss how you can make faster and powerful applications by using RequireJS and AngularJS with Wijmo. Before getting started , I would suggest that, you should have basic understanding of using Wijmo widgets with RequireJS and AngularJS individually. If you have don't then you may refer to our blogs i.e. Using Wijmo with RequireJS and AngularJS describing the same. The key points that you should remember while using Wijmo with AngularJS and AMD support are:

1. Use dynamic bootstrapping instead of using ng-app directive.
2. Provide reference to "angular" js instead of "angular.min" in paths while configuring RequireJS
3. "angular.wijmo" must be registered after all widgets

Let's take an example and see how we actually implement the above points say for using WijGrid.

Step 1

Make sure that requirejs loads in the widgets first and then loads in angular.wijmo because "angular.wijmo" file needs the widgets loaded before it can create directives for them. You can do so with the help of following code:

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

Step 2 Configure RequireJS and provide mapping for AngularJS.

requirejs.config({  
 baseUrl: "amd-js/",  
 paths: {  
  "jquery": "jquery-1.9.1.min",  
  "jquery-ui": "jquery-ui-1.10.1.custom.min",  
  "jquery.ui": "jquery-ui",  
  "jquery.mousewheel": "jquery.mousewheel.min",  
  "globalize": "globalize.min",  
  "angular": "angular"  
}

Step 3

Define the angular module and use dynamic bootstrapping

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']);

Thats it !! You can also check this sample for complete implementation.