Integration with AngularJS (v1.x)

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:

Step 1. Create a new AngularJS project

Create a new folder for the project, e.g. my-angular-project/.
Create an 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>

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="https://cdn.flexmonster.com/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:

<!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>

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="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 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: