1 Reply Latest reply: Apr 13, 2018 4:00 PM by Jonathan Vitale RSS

    Using services in an angular module

    Jonathan Vitale

      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.

        • Re: Using services in an angular module
          Jonathan Vitale

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