Show All
Wijmo now supports AngularJS, a lightweight MVW JavaScript framework, allowing you to easily create and maintain a dynamically changing UI. You can use AngularJS in addition to jQuery to enhance your pages with an underlying data model.
Be sure to check out our AngularJS basic demo or our AngularJS collections demo where you can explore how to use the Wijmo widgets with AngularJS. For a full AngularJS introduction, tutorials, documentation, and more, visit http://angularjs.org/.
You can easily use AngularJS with Wijmo by following a few steps:
To get started, take a look at the following samples. Each will show you how to add references to the required files, create the Controller, and create the markup.
In this example, we'll create a text box, slider, and gauge that are bound together so that when the value of one element is changed, the other elements update accordingly.
1. Add Library References
The first step is to create an .html page and add links to the dependencies to your project within the <head> tag. To do this, just link to the content delivery network (CDN) files:
Note: Please reference the latest dependencies from the CDN at http://www.wijmo.com/downloads/cdn.
| References |
Copy Code
|
|---|---|
<!--jQuery References--> <script src="http://code.jquery.com/jquery-1.9.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.20132.15.min.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets JavaScript--> <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20132.15.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20132.15.min.js" type="text/javascript"></script> |
|
Then add a reference to AngularJS and the AngularJS extension library for Wijmo within the <head> tag:
| AngularJS Reference |
Copy Code
|
|---|---|
<!-- Angular (after jQuery) --> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/interop/angular.wijmo.3.20132.8.min.js"></script> |
|
2. Create the Controller
Now create the Controller. The following script is a good example of basic usage. The Controller is provided data context through the $scope parameter where it can put its model. Place this script within the <head> tag:
| Controller |
Copy Code
|
|---|---|
<script type="text/javascript"> // AngularJS controller used for this sample function MyController($scope) { $scope.val = 50; $scope.min = 0; $scope.max = 100; } </script> |
|
3. Create the Markup
First we need to define this document as an Angular app. Replace the <html> tag at the top of the page with the following markup. We set ng-app attribute value to "wijmo" in order to tell AngularJS to load the "wijmo" module:
<html ng-app="wijmo">
Then we specify our controller for a DOM element. In this case we will use the body element so that anything inside of it will have access to the Controller's model:
<body ng-controller="MyController">
Finally, we create our component markup. This will look very similar to the markup used with a server control, such as the markup used with ASP.NET Wijmo controls. The method used to create the markup looks at all the markup's elements and attributes and parses them as a widget and options:
| Markup |
Copy Code
|
|---|---|
<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> |
|
For each Wijmo widget there is a AngularJS directive that starts with "wij-" prefix, following AngularJS guidelines.
Some widget options act just like AngularJS' ng-model directive. In this case "value" options in both widgets do not use {{mustache}} syntax to specify the model provided by the controller. Other widget options can be bound the same way HTML elments are bound in AngularJS. Just wrap an AngularJS {{expression}} with curly braces and AngularJS takes care of synchronizing option value with the model.
The full markup should look similar to this:
| Full Markup |
Copy Code
|
|---|---|
<!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.8.2/jquery.min.js" type="text/javascript"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/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.20132.8.min.css" rel="stylesheet" type="text/css" /> <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20132.8.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20132.8.min.js" type="text/javascript"></script> <!-- #Region "links" --> <!-- Angular (after jQuery) --> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/interop/angular.wijmo.3.20132.8.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> |
|
When you open the page, it looks similar to the following image. Enter a new value in the textbox or drag the slider. Notice the values on the other elements change to match the specified value.
In this example, we'll create a project that includes a Chart, Grid, and Table that are bound together so that when one item in the Grid is changed, the other widgets update accordingly.
1. Add Library References
The first step is to create an .html page and add links to the dependencies to your project within the &lthead> tags. To do this, just link to the content delivery network (CDN) files:
Note: Please reference the latest dependencies from the CDN at http://www.wijmo.com/downloads/cdn.
| References |
Copy Code
|
|---|---|
<!--jQuery References--> <script src="http://code.jquery.com/jquery-1.9.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.20132.15.min.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets JavaScript--> <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20132.15.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20132.15.min.js" type="text/javascript"></script> |
|
Then add a reference to AngularJS and the AngularJS extension library for Wijmo within the &lthead> tags:
| AngularJS Reference |
Copy Code
|
|---|---|
<!-- Angular (after jQuery) --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script> <script src="http://cdn.wijmo.com/interop/angular.wijmo.3.20132.8.js" type="text/javascript"></script |
|
2. Create the Model and the Controller
Now create a Model and a Controller. The Controller provides data context to the Model through the $scope and $locale parameters. Place this script within the &lthead> tags:
| Controller |
Copy Code
|
|---|---|
<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. Create the Markup
First we need to define this document as an Angular app. Replace the <html> tag at the top of the page with the following markup:
| ng-app |
Copy Code
|
|---|---|
<html ng-app="wijmo"> |
|
Then we scope our Controller to a DOM element. In this case we will use the body so that anything inside of it will have access to the Model:
| ng-controller |
Copy Code
|
|---|---|
<body ng-controller="MyController"> |
|
Finally, we create our custom markup. This will look very similar to the markup used with a server control, such as the markup used with ASP.NET controls. The method used to create the markup looks at all the markup's elements and attributes and parses them as a widget and options:
| Markup |
Copy Code
|
|---|---|
<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> |
|
Note that the wijbarchart, wijgrid, and the table use {{model}} binding syntax. Any of Wijmo's widgets can be used with this syntax. Our library just expects you to name the HTML elements using the widget name. Once that's done, you can just set the attributes and child elements to define options and event handlers for the widget.
The full markup looks similar to this:
| Full Markup |
Copy Code
|
|---|---|
<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.9.1/jquery.min.js" type="text/javascript"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/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.20132.8.min.css" rel="stylesheet" type="text/css" /> <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20132.8.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20132.8.min.js" type="text/javascript"></script> <!-- #Region "links" --> <!-- Angular (after jQuery) --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script> <script src="http://cdn.wijmo.com/interop/angular.wijmo.3.20132.8.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> |
|
When you open the page, it looks similar to the following image. Double-click a cell in the grid to change the content. Notice the content on the other elements change to match the specified content.
Hide All