Retrieving values from AngularJS service without returning them?

Question

I would really appreciate some feed back on how this works? I have a service in which I store some session specific variables such as table sorting choices and more.

The code seems to work fine. However, my question is - how is it possible for me to retrieve these values without returning the actual variable?

Shouldn't I have to use some kind of Getter function? Are they made public some way with the setter method, or am I doing something completely wrong here? Is using this some kind of culprit? Or simply my lack of understanding of javascript scoping? :)

Service code:

angular.module('myApp').service('sessionService', function () {

  this.searchView = 2; // <-- edited in, forgot this

  return {
    setSearchView: setSearchView
  };

  function setSearchView (searchView) {
    this.searchView = searchView;
  }

});

And then we have the controller.

angular.module('myApp').controller('SearchCtrl', function (sessionService) {

  console.log(sessionService.searchView); //undefined

  sessionService.setSearchView(1);

  console.log(sessionService.searchView); // 1 

});

Once I've set for example the searchView from the controller, it is possible to just access it as below.

Anything that can help me understand this would be appreciated.

EDIT: I forgot to add that this.searchView was actually there form the start, same result in console.log in the controller though.

Answer 1

Service are what are called 'singletons' meaning you can set a variable not directly accessible or returned and it will maintain it's values for the life if the UI. In this case, if you want t be able to access sessionService.searchView, you can do it a few ways:

1) Set a private var searchView and then add a getter function to your return statement:

  return {
    setSearchView: setSearchView,
    getSearchView: function() {
        return searchView;
    }
  };

2) create the same private variable and then add it to your return statement:

var searchView;

return {
    setSearchView: setSearchView,
    searchView: searchView
};

Answer 2

When you inject the service into the controller

angular.module('myApp').controller('SearchCtrl', function (sessionService) {

you are provided with an instance of the service definition function. In other words, your sessionService is basically

new function () {

  return {
    setSearchView: setSearchView
  };

  function setSearchView (searchView) {
    this.searchView = searchView;
  }

}

i.e the function you passed in when you defined the service preceded by new. The new means that you are just using it as a constructor function.

---

Now, what do we know about new and Javascript constructors - just that if the constructor function returns an object, that's what the left hand side of new is set to. And this in the member methods basically refers to that same object.

In short, your service definition is a constructor function. In plain Javascript it would look something like this.

function SessionService () {
  return {
    setSearchView: function (searchView) {
       this.searchView = searchView;
    }
  };
}

var sessionService = new SessionService();

Notice that I capitalized SessionService to indicate that it is a constructor and sessionService is in camel case because it is an instance.

---

With this in mind, when you do

sessionService.setSearchView(1);

you are setting the searchView property of the sessionService instance to 1. And when you do

sessionService.searchView

this is the exact same property that you are accessing and you get the value you set.

You could also do sessionService.searchView = 1 and it would work as well, since all you are doing is working on the sessionService instance.