Passing a JS-Class to AngularJS(1.4.x) service to use its variables and functions

问题

I use angularJS(1.4) for frontend only.

I have passed the JS-class DummyClass to an angularJS-Service called TLSService, and I added this service to an angularJS-Controller named mLxController.

I'm having problems accessing variables and methods of the DummyClass from the mLxController. For example, as you will see in the code below, I can't retrieve a class variable String. I use window.alert(String) to check that. Instead of the String from the DummyClass, 'undefined' is displayed in the window.

I think it's worth mentioning, that when adding the window.alert("DummyClass calls.") in the constructor of the DummyClass, the alert will immedialtely be shown after loading the corresponding URL.

That's the code of the mLxController.js :

angular.module('mApp')
.controller('mLxController', function('TLSService', $scope, $state, $stateParams){
...
//this function is called in `index.html`
$scope.callTLSService = function(){
  window.alert(TLSService.response);
}
...
});

Here's the code for dummyClass.js :

class DummyClass {  
  constructor() {
    this.response = "Hi Controller! Service told me you were looking for me.";
  }
}

Here's tlsService.js :

angular.module('mApp').service('TestClaServScript', function(){new DummyClass()});

UPDATE:

I have managed to make the DummyClass usable to the mLxController. Although I'm pretty sure that my solution is not recommendable practice.

Basically, I moved the DummyClass into the same file as the TLSService. Also, DummyClass and it's path isn't mentioned in the main index.html, anymore.

Accordingly, tlsService.js looks like this, now:

angular.module('mApp').service('TestClaServScript', function(){

    this.clConnect = function(inStr){

        var mDummy = new DummyClass(inStr);
        return mDummy;
    }
});


class DummyClass {

    constructor(inStr){
        this.inStr = inStr;
        this.response = 
            "DummyClass says: \"Hi Controller! Service told me you were looking for me.\"";
        this.charCount = function(inStr){
            var nResult = inStr.length;
            var stRes = "btw, your String has "
            +(nResult-1)+", "+nResult+", or "+(nResult+1)+" characters.\nIDK."
            return stRes;
        }
    }
}

and mLxController.js:

angular.module('mApp')
.controller('mLxController', function('TLSService',$scope,$state, $stateParams){
...
$scope.makeDummyCount = function(){
      var mDummy = TestClaServScript.clConnect("This string is for counting");
      window.alert(mDummy.charCount(mDummy.inStr));
  }
...
});

There must be a way to properly import DummyClass, so that I can keep separate files. I will do some more research and I will keep trying.

UPDATE 2: Problem solved

The provided answer to my question helped me implementing TLSService in the originally planned way.

I'd like to post the final version of the code here, in hope that it will help some beginner, like I am.

tlsService.js:

angular.module('mApp').service('TLSService', function(){
    this.mCwParam =  function(inputStr){
        return new DummyClass(inputStr);
    }
});

DummyClass stays the same like I posted it in the first Update, but it has its own file dummyClass.js, again.

mLxController.js:

angular.module('mApp')
.controller('mLxController', function('TLSService', $scope, $state, $stateParams){
...
//this function is called in the mLx-view's `index.html`
$scope.askDummyCount = function(){
  var mService = TLSService.mCwParam("String, string, string, and all the devs that sing.");
  window.alert(mService.charCount());
}
...
});

Also, TLSService and DummyClass ar added in the apps main index.html.

回答1:

A problem in your original setup is when you register your class as a service, you're not returning the instance of the class:

function(){new DummyClass()}

Should be:

function(){return new DummyClass()}

Autoreturning only works when you don't use curly braces, like

() => new DummyClass()

来源：https://stackoverflow.com/questions/58601337/passing-a-js-class-to-angularjs1-4-x-service-to-use-its-variables-and-function

标签

javascript

angularjs

angularjs-service