Using AngularJS in your mashup

With the end of support of AngularJS on December 31st, 2021, Qlik will continue to support AngularJS as part of the Qlik Sense Enterprise Client-Managed platform. Qlik will be responsible for bug fixes and improvements of AngularJS as needed, related to the usage of Qlik Sense Enterprise Client-Managed. Support will be based on the latest AngularJS version 1.8.

Qlik Sense uses AngularJS internally and you can also use AngularJS in your Qlik Sense mashup. To make this work, there are some ground rules you have to follow.

The third-party software versions used in Qlik Sense can be viewed from the Hub: About > Third-party software.
When calling Qlik Sense APIs, check that version of Angular you are using is compatible with the version of Angular in Qlik Sense.

HTML requirements

Make sure you fulfill the following requirements in the HTML file:

Add qva-bootstrap="false" to your HTML tag. This tells Qlik Sense not to automatically bootstrap the document.
```
<html qva-bootstrap="false">
```

Include the RequireJS just like you do in any other Qlik Sense mashup.

<script src="/resources/assets/external/requirejs/require.js"></script>

JavaScript requirements

Make sure you fulfill the following requirements in the JavaScript file:

Create your AngularJS module just like you do in any other AngularJS app.
Bootstrap AngularJS with the method angular.bootstrap( document, ["myApp", "qlik-angular"] ) when your module is created.

Include the module qlik-angular when you bootstrap.


angular.bootstrap( document, ["myApp", "qlik-angular"] );
qlik.on( "error", function ( error ) {
	$( "#errmsg" ).html( error.message ).parent().show();
} );

Do not make use of any Qlik Sense API until after you have bootstrapped AngularJS.

Full code example

The following sample code uses AngularJS to retrieve information about your apps including IDs, names, and file sizes.

{
	"type": "mashup",
	"name": "Using AngularJS in mashups",
	"description": "Basic responsive mashup template",
	"version": "1.7",
	"author": "qlik",
	"homepage": "",
	"keywords": "qlik-sense, visualization, mashup",
	"license": "",
	"repository": "",
	"dependencies": {
		"qlik-sense": ">=3.0.x"
	}
}

<html lang="en" qva-bootstrap="false">

<head>
  <title>Using AngularJS in mashups</title>
  <script data-main="main" src="/resources/assets/external/requirejs/require.js"></script>
  <style>
    body {
      line-height: 1.5em;
    }
    th {
      font-weight: bold;
      text-align: left;
    }
    body, th, td {
      font-family: Verdana, Geneva, Tahoma, sans-serif;
      font-size: 0.8em;
    }

    #error {
      color: red;
      font-size: 20px;
    }

    #title {
      color: cornflowerblue;
      font-size: 20px;
    }
  </style>
</head>

<body>
  <div ng-controller="AppCtrl as data">
    <div id="title">Hello {{data.name}} with {{data.apps.length}} apps</div>
    <div id="error">{{data.error}}</div>
    <table>
      <tr>
        <th>Doc Id</th>
        <th>Doc Name</th>
        <th>File Size</th>
      </tr>
      <tr ng-repeat="app in data.apps track by $index">
        <td>{{app.qDocId}}</td>
        <td>{{app.qDocName}}</td>
        <td>{{app.qFileSize}}</td>
      </tr>
    </table>
  </div>
</body>

</html>

var config = {
  host: 'QSE_domain',
  prefix: "/",
  port: 443,
  isSecure: true
  // webIntegrationId: 'web-integration-id-here' // only needed in QCS


};

const baseUrl = ( config.isSecure ? 'https://' : 'http://' ) + config.host + (config.port ? ':' + config.port : '') + config.prefix;
require.config({
  baseUrl: `${baseUrl}resources`,
  // webIntegrationId: config.webIntegrationId// only needed in QCS
  paths: {
    myAngularModule: "../extensions/angular-extension/my-angular-module" //update this path according to your environment
  }
});

require(["js/qlik"], function (qlik) {
  require(["angular", "myAngularModule"], function (angular) {
    angular.bootstrap(document, ["myAngularModule", "qlik-angular"]);
  });
});

define(["angular","js/qlik"], function (angular, qlik) {

  // defines controller class
  function AppCtrl() {
    this.name = "App List";
    this.apps = [];
    this.setupErrorHandling();
    this.populateAppList();
  }

  AppCtrl.prototype.setupErrorHandling = function() {
    var self = this;
    qlik.setOnError(function (e) {
      self.error = "Qlik Error: " + e.message;
    });
  }

  AppCtrl.prototype.populateAppList = function() {
    var self = this;
    qlik.getAppList(function (list) {
      self.apps = list;
    }, config);
  }

  // define the angular module with its controller
  var app = angular.module('myAngularModule', []);
  app.controller('AppCtrl', AppCtrl);
});

angular-ex.qext; index.html; main.js; my-angular-module.js

Did this page help you?

If you find any issues with this page or its content – a typo, a missing step, or a technical error – let us know how we can improve!

Leave your feedback here