Using AngularJS in visualization extensions

Introduction to AngularJS

AngularJS is a framework for building dynamic web applications and you can use it to render your visualization extensions instead of using the paint method that comes with the Qlik Sense Extension API.

It is a MVC or MV* framework that extends HTML and has a strong focus on data binding. AngularJS is compatible with other JavaScript libraries, for example jQuery.

Using AngularJS helps you keeping your code organized and it reduces the dependencies. The key concepts of AngularJS are:

  • Use of templates and data binding
  • Controllers
  • Directives
  • Services
  • Dependency injection
  • Filters
  • Routing
  • Testability

Additional resources

AngularJS and Qlik Sense

The Qlik Sense client uses AngularJS, and you can use the most, but not all, important AngularJS concepts when you create visualization extensions.

Bootstrap

AngularJS loads all JavaScript files at startup, a so-called bootstrap. Bootstrapping means that after loading files, AngularJS takes care of initializing and preparing an AngularJS app.

Qlik Sense uses dynamic loading with RequireJS for visualization extensions. To make this work, Qlik Sense uses a modified bootstrapping implemented in the qvangular module. The qvangular module ensures that:

  • AngularJS and RequireJS work together
  • Visualization extensions can be loaded at runtime without bootstrapping the entire application

AngularJS concepts that can be used in Qlik Sense

The following AngularJS concepts can be used when creating visualization extensions:

  • Directives
  • Templates
  • Filters
  • Re-using AngularJS internal methods
  • Data-binding
  • The entire scope concept

AngularJS concepts that cannot be used in Qlik Sense

The following AngularJS concepts cannot be used when creating visualization extensions:

  • Loading and re-using entire AngularJS modules or factories. You need to modify them to work as directives or services.
  • Using AngularJS constants
  • Bootstrapping the application

Additional resources

Important information

The following items are important to realize:

  • Qlik support does not cover issues caused by third party libraries, for example AngularJS and jQuery.
  • This version of Qlik Sense is currently using AngularJS version 1.7.2.

    To ensure future compatibility, make sure not to use version specific functionality of AngularJS, or follow the AngularJS advices on how to upgrade your code to a new version.

Tip: Use angular as a dependency to easily check which version of AngularJS being used.
define( [
        'angular'
    ],
    function ( angular ) {

    return {
        ...
        controller: ['$scope', function ( $scope ) {
            $scope.angularVersion = angular.version;
        }]
    };
} );

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?