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
Bootstrap (from AngularJS developer guide)
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.
define( [
'angular'
],
function ( angular ) {
return {
...
controller: ['$scope', function ( $scope ) {
$scope.angularVersion = angular.version;
}]
};
} );