Information noteWith 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.
Tip noteThe 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.
<htmlqva-bootstrap="false">
Include the RequireJS just like you do in any other Qlik Sense mashup.
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"}}
<htmllang="en"qva-bootstrap="false"><head><title>Using AngularJS in mashups</title><scriptdata-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><divng-controller="AppCtrl as data"><divid="title">Hello {{data.name}} with {{data.apps.length}} apps</div><divid="error">{{data.error}}</div><table><tr><th>Doc Id</th><th>Doc Name</th><th>File Size</th></tr><trng-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
functionAppCtrl(){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);});