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.

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 CSS file and RequireJS just like you do in any other Qlik Sense mashup.

    <!--Add host to these 2 links if the mashup is on an external webserver-->
    <link rel="stylesheet" href="../../resources/autogenerated/qlik-styles.css">
    <script src="/resources/assets/external/requirejs/require.js"></script

Do not include AngularJS. Qlik Sense will load AngularJS.
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.setOnError( function ( error ) {
		$( "#errmsg" ).html( error.message ).parent().show();
	} );

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

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