Get Free Trial
  1. API reference
Connecting to Data Source
Configuring the component
  • Documentation for older versions
  • Table of contents

    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

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