Using AngularJS in your mashup

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: 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="QSE_domain/resources/assets/external/requirejs/require.js"></script>
  • Do not use the data-main tag of the RequireJS link.

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

Did this information help you?

Thanks for letting us know. Is there anything you'd like to tell us about this topic?

Can you tell us why it did not help you and how we can improve it?