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

Question

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.

i think the issue is, that using a separate class through a Service is not provided in angularJS v.1.4.x. — Schelmuffsky
– Schelmuffsky, Commented Oct 29, 2019 at 5:20

frodo2975 · Accepted Answer · 2019-10-29 19:49:51Z

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

answered Oct 29, 2019 at 19:49

frodo2975

12k5 gold badges39 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Schelmuffsky Over a year ago

Thank you! I will try this in 30 minutes. I've seen code with the same () => new Class() arrow function. I translated it, because I thought I read, that Arrow Functions shouldn't be use with constructors or with the new statement. I have to update my knowledge on that. Anyway, return got lost in translation.

frodo2975 Over a year ago

You can't use an arrow function as a constructor because its this pointer would be invalid, but I haven't heard of any problems using them to new objects.

Schelmuffsky Over a year ago

Thanks, again! Works at least without passing arguments from Controller to Service. Now, I will try implementing the same with a constructor that receives arguments. Back to the books!

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related