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
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/your-personal-code/webdatarocks.min.css" rel="stylesheet"/> <script src="https://cdn.webdatarocks.com/your-personal-code/webdatarocks.toolbar.min.js"></script> <script src="https://cdn.webdatarocks.com/your-personal-code/webdatarocks.js"></script> </head>
Please note, you need to use WebDataRocks references from the email you receive after requesting WebDataRocks. Now you can use our reporting tool in your AngularJS application.
See a live sample on CodePen: AngularJS pivot grid sample
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!