AngularJS Directives

Note We highly recommend that you download the Wijmo dev kit. The dev kit includes hundreds of samples with source code, reference apps and more.

The Wijmo team is a big fan of AngularJS, Google's framework for JavaScript applications. AngularJS provides templating, data-binding, MVVM, web components, and more.

One of the main advantages of AngularJS is that it supports the MVVM pattern, where the application logic is contained in Models (aka controllers, implemented in JavaScript) and the appearance is contained in Views (HTML).

To achieve this, AngularJS supports directives, which are custom HTML elements and attributes. AngularJS ships with a number of built-in directives, and you can easily implement your own much as you can create your own controls in WinForms or XAML applications.

Wijmo ships with AngularJS directives for all its controls. The directives are defined in the wijmo.angular.js file, and allow you to write code such as:

<div ng-app="app" ng-controller="appCtrl">
    
<p>This is a <b>FlexGrid</b> control:</p>
<wj-flex-grid items-source="data">
    <wj-flex-grid-column header="Country" binding="country"></wj-flex-grid-column>
    <wj-flex-grid-column header="Sales" binding="sales"></wj-flex-grid-column>
    <wj-flex-grid-column header="Expenses" binding="expenses"></wj-flex-grid-column>
    <wj-flex-grid-column header="Downloads" binding="downloads"></wj-flex-grid-column>
</wj-flex-grid>
</div>

Using Wijmo in AngularJS Applications

If you want to use Wijmo Angular directives in your project, add references to AngularJS, Wijmo, and then to Wijmo's AngularJS directives, as described in the Referencing Wijmo topic.

Once you have the references in place, tell AngularJS that your app depends on the "wj" module using code like this:

var app = angular.module('app', ['wj']);

With the app defined, you can go on to add a controller to provide data and logic as you would with any AngularJS application.

All Wijmo directives start with the "wj" prefix, followed by the control's class name using dashes instead of camel-case. The directives have attributes that match the control's properties, following the same convention.

Some of the directives support nested sub-directives. For example, the wj-flex-grid directive may contain one or more wj-flex-grid-column directives, and the wj-flex-chart directive may contain one or more wj-flex-chart-series directives. This results in a rich and expressive markup syntax that is very similar to XAML. This flexibility is essential in order to achieve the true benefits of MVVM. The appearance and layout of the controls are defined by the view; the controller only provides the data.