Skip to main content

Using AngularJS in your mashup

ON THIS PAGE

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