Wijmo UI for the Web
AngularJS
Wijmo User Guide > Concepts > Integrating Frameworks > AngularJS

Show All
Hide All

Using Wijmo with AngularJS

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:

  1. Add references to the latest jQuery dependencies, Angular .js file, Wijmo widgets, and AngularJS extension library for Wijmo.
  2. Create a Controller.
  3. Create the markup.

Getting Started

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.

Textbox, Slider, and Gauge Sample

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.11.1.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/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.20161.90.min.css" rel="stylesheet" type="text/css" />

<!--Wijmo Widgets JavaScript-->
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20161.90.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20161.90.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. This must come after jQuery. -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/interop/angular.wijmo.3.20183.140.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.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>
    <!-- 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.20183.140.min.css" rel="stylesheet" type="text/css" />
    <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20183.140.min.js" type="text/javascript"></script>
    <script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20183.140.min.js" type="text/javascript"></script>
    
    <!-- #Region "links" -->
    
    <!-- Angular. This must come after jQuery. -->
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js" type="text/javascript"></script>
    <script src="http://cdn.wijmo.com/interop/angular.wijmo.3.20183.140.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.

Chart, Grid, and Table Sample

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 <head> 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.11.1.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/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.20161.90.min.css" rel="stylesheet" type="text/css" />

<!--Wijmo Widgets JavaScript-->
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20161.90.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20161.90.min.js" type="text/javascript"></script>
       

Then add a reference to AngularJS and the AngularJS extension library for Wijmo within the <head> tags:

AngularJS Reference
Copy Code 
<!-- Angular. This must come after jQuery. -->
<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.20161.90.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 <head> 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.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>
    <!-- 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.20183.140.min.css" rel="stylesheet" type="text/css" />

    <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20161.90.min.js" type="text/javascript"></script>
    <script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20161.90.min.js" type="text/javascript"></script>

    <!-- #Region "links" -->
    <!-- Angular. This must come after jQuery. -->
    <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.20161.90.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.

See Also
AngularJS Directives

 

 

Copyright © GrapeCity, Inc. All rights reserved.

Product Support Forum | Print this page