This tutorial will help you integrate the pivot table with the AngularJS framework. To integrate Flexmonster with the Angular framework, see integration with Angular.
Follow these steps to set up a simple AngularJS project:
my-angular-project/
.index.html
file in the my-angular-project/
folder with a simple AngularJS app inside:<!DOCTYPE html>
<html ng-app="App">
<head>
<title>My AngularJS/Flexmonster Project</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script type="text/javascript">angular.module("App", [ ]);</script>
</head>
<body>
</body>
</html>
Add the Flexmonster library to index.html
:
<!DOCTYPE html>
<html ng-app="App">
<head>
<title>My AngularJS/Flexmonster Project</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script type="text/javascript">angular.module("App", [ ]);</script>
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
</head>
<body>
</body>
</html>
Add the flexmonster
module to the App
and use the fm-pivot
directive to add the pivot table to index.html
:
<!DOCTYPE html>
<html ng-app="App">
<head>
<title>My AngularJS/Flexmonster Project</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script type="text/javascript">angular.module("App", ["flexmonster"]);</script>
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
</head>
<body>
<div fm-pivot
fm-component-folder="https://cdn.flexmonster.com/"
fm-toolbar="true">
</div>
</body>
</html>
To see some data on the grid add the fm-report
attribute with the report’s URL:
<!DOCTYPE html>
<html ng-app="App">
<head>
<title>My AngularJS/Flexmonster Project</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script type="text/javascript">angular.module("App", ["flexmonster"]);</script>
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
</head>
<body>
<div fm-pivot
fm-component-folder="https://cdn.flexmonster.com/"
fm-toolbar="true"
fm-report="'https://cdn.flexmonster.com/reports/report.json'">
</div>
</body>
</html>
The fm-pivot
directive embeds the component into the HTML page. The value of each attribute can be of any type, including an Angular variable available in the current scope, but it must be surrounded by double quotes. Note that string values must be surrounded by single quotes within the double quotes, e.g. fm-report="'https://cdn.flexmonster.com/reports/report.json'"
.
All attributes are equivalent to those that are passed to the new Flexmonster()
API call. The only difference is that fm-
prefix is added before each of them. For example, use fm-report
instead or report
and fm-component-folder
instead of componentFolder
. Check out the full list of available attributes here.
Find more examples of integrating the pivot table with the AngularJS framework on GitHub.
You may be interested in the following articles: