Using services in an angular module

[jonvitale]

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:

Thanks for any insights forthcoming.

[jonvitale · Accepted solution]

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