Qlik Community

Qlik Sense Integration, Extensions, & APIs

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

jonvitale
Contributor 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
jonvitale
Contributor III

Re: Using services in an angular module

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);

}]

};

}]);

1 Reply
jonvitale
Contributor III

Re: Using services in an angular module

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);

}]

};

}]);

Community Browser