1.Integration with AngularJS (v1.x)

This tutorial will help you integrate the pivot table with the AngularJS framework. Follow these steps to set up a simple project:

Step 1: Create a new AngularJS project

Create a new folder for the project, e.g. my-angular-project/.
Copy the flexmonster/ folder into your project folder. You can find flexmonster/ inside of the package that you downloaded from our website.
Create an index.html file in the my-angular-project/ folder with a simple angular 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>

Step 2: Add Flexmonster dependencies

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="flexmonster/flexmonster.js"></script>
</head>
<body>
</body>
</html>

Step 3: Initialize the pivot table

Add the flexmonster module to the App and use the fm-pivot directive to add the pivot table to index.html. After that, an empty grid will be shown. Note that fm-license-key is your license or trial key, so replace XXXX-XXXX-XXXX-XXXX-XXXX with an actual key:

<!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="flexmonster/flexmonster.js"></script>
</head>
<body>

<div fm-pivot 
     fm-toolbar="true" 
     fm-license-key="'XXXX-XXXX-XXXX-XXXX-XXXX'">
</div>

</body>
</html>

Step 4: Load a sample report

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="flexmonster/flexmonster.js"></script>
</head>
<body>
<div fm-pivot 
     fm-toolbar="true" 
     fm-report="'https://cdn.flexmonster.com/reports/report.json'"
     fm-license-key="'XXXX-XXXX-XXXX-XXXX-XXXX'">
</div>
</body>
</html>

The `fm-pivot` directive and its attributes

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.

Examples

Find more examples of integrating the pivot table with the AngularJS framework on GitHub.

What’s next?

You may be interested in the following articles:

1.