Skip to main content Skip to complementary content

Using AngularJS in your mashup

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.

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

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!