This article explains how to quickly start using WebDataRocks pivot grid in your AngularJS applications. AngularJS is an open-source front-end application framework written in JavaScript. Declarative templates with data-binding, MVC, dependency injection – these are only the most obvious reasons why we love AngularJS. Moreover, the framework is maintained by Google, which is always a quality guarantee. You can see how to get started with AngularJS on their official website.
WebDataRocks officially supports AngularJS framework.

AngularJS allows defining extended HTML attributes also known as directives. We created a special wbr-pivot directive to include reporting tool into your AngularJS application. This directive is defined inside WebDataRocks code.

For example, here is a simple AngularJS application that shows a pivot grid control on the page:

<div ng-app="App">
<div wbr-pivot 
     wbr-toolbar="true" 
     wbr-report="'https://cdn.webdatarocks.com/reports/report.json'">
</div>
</div>

In the first line, you can see the ng-app directive. It tells AngularJS that this is the root element of the AngularJS application. We have ng-app="App" which means "App" needs to be defined in JavaScript code the following way:

angular.module("App", ["webdatarocks"]);

The wbr-pivot directive below is an AngularJS component that wraps our pivot grid control. The component may contain one or more attributes for wbr-pivot directive, for example, wbr-toolbar to add the Toolbar and wbr-report to specify the report. Each attribute can be set either as a string or as an AngularJS variable.

How to use WebDataRocks in AngularJS applications

To use WebDataRocks in your AngularJS applications, start by adding references to AngularJS and WebDataRocks to your page. For example:

 
<head>
<title>WebDataRocks and AngularJS</title>
<!-- AngularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<!-- WebDataRocks -->
<link href="https://cdn.webdatarocks.com/webdatarocks.min.css" rel="stylesheet"/>
<script src="https://cdn.webdatarocks.com/webdatarocks.toolbar.min.js"></script>
<script src="https://cdn.webdatarocks.com/webdatarocks.js"></script></head>

Now you can use our reporting tool in your AngularJS application.

Get WebDataRocks

See a live sample on CodePen ?‍?

We want your feedback!

We think AngularJS is great and easily integrates with our pivot grid.

If you have any suggestions or inquiries, please leave your feedback on our forum!