Skip to main content Skip to complementary content

Using AngularJS in visualization extensions

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.

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.
  • To ensure future compatibility, make sure not to use version-specific functionality of AngularJS, or follow the AngularJS advice on how to upgrade your code to a new version.
Tip noteUse 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 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!