Qlik Community

Qlik Sense Integration, Extensions, & APIs

Discussion board where members can learn more about Integration, Extensions and API’s for Qlik Sense.

Announcements
Uploads getting stuck in the virus scanner. We are investigating.
cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Creator III
Creator III

Using services in an angular module

Hello all (and probably erik.wetterberg‌)

I am really trying in my extension to use good angular practices, which means separating concerns and keeping too much logic out of controllers. As such, I am trying to use a service to do a lot of the heavy lifting (particularly interacting with the qlik engine).

However, I'm having difficulty configuring my code to make a service available to a custom directive. There appear to be two qlik angular objects floating around, and I'm not sure which to use. Using requirejs we can pull in "angular" or "qvangular". I have been successful adding a custom directive to qvangular and getting it to display in the template. But this code is not successful:

let qvangular = window.require('qvangular');

let angular = window.require('angular');

console.log("both angulars", qvangular, angular);


//angular.module('root-module', [])

qvangular.module

.service('myService', class MyService { MyService(){console.log("Service constructor called")}})

.directive('temp',['myService', function(myService){

return {

template: 'this works when I do not use module or a service',

restrict: 'E',

scope: {},

controller: ['$scope', 'myService', function($scope, myService){

console.log("in temp directive controller", $scope, myService);

}]

};

}]);

Error: [$injector:unpr] Unknown provider: myServiceProvider <- myService

Within qvangular, module is an object, not a method for defining a new module. So, my assumption is that an extension uses a single module, which we can access with qvangular.module, and add services right to it. I tried to also use "angular" and define a new module with a service, but that doesn't seem to work (or allow a custom directive).

I'm also just generally interested in what "qvangular" represents and what "angular" represents. Here is the layout of each in chrome console (qvangular, then angular) with module uncollapsed:

Capture.PNG

Thanks for any insights forthcoming.

1 Solution

Accepted Solutions
Highlighted
Creator III
Creator III

Solved my own problem. Can't say I fully understand what's going on here (particularly with modules), but you can create a service right on the qvangular object. Also, I noticed that in my temporary service above, I wasn't using constructor() so the console log "Service constructor called" wasn't actually being called. Here's some working code.

let qvangular = window.require('qvangular');

let angular = window.require('angular');


//angular.module('root-module', [])

qvangular//.module

.service('myService',

class MyService {

constructor(){

this.hello = "hello";

console.log("Service constructor called")

}


doThis(){

console.log("do this:", this, this.hello);

}

}

);


qvangular.directive('temp',['myService', function(myService){

return {

template: 'this works when I do not use module or a service',

restrict: 'E',

scope: {},

controller: ['$scope', function($scope){

myService.doThis();

console.log("in temp directive controller", myService);

}]

};

}]);

View solution in original post

1 Reply
Highlighted
Creator III
Creator III

Solved my own problem. Can't say I fully understand what's going on here (particularly with modules), but you can create a service right on the qvangular object. Also, I noticed that in my temporary service above, I wasn't using constructor() so the console log "Service constructor called" wasn't actually being called. Here's some working code.

let qvangular = window.require('qvangular');

let angular = window.require('angular');


//angular.module('root-module', [])

qvangular//.module

.service('myService',

class MyService {

constructor(){

this.hello = "hello";

console.log("Service constructor called")

}


doThis(){

console.log("do this:", this, this.hello);

}

}

);


qvangular.directive('temp',['myService', function(myService){

return {

template: 'this works when I do not use module or a service',

restrict: 'E',

scope: {},

controller: ['$scope', function($scope){

myService.doThis();

console.log("in temp directive controller", myService);

}]

};

}]);

View solution in original post