Proper way for defining services and factories in AngularJS

Question

I read some tutorials for AngularJS and noticed, that everyone is using a slightly different approach how to define a service. I'm wondering whats the best method, or what drawbacks could arise when using a specific approach.

The first difference I noticed, is in using an anonymous function OR a named function:

angular.module('myApp').service('myService', function myService() {
  var _var1 = "foo";
  var public_methods = {
    doSomething: function() {
      return "bar";
    },
    var1: _var1
  };
  return public_methods;
});

angular.module('myApp').service('myService', function() {
  var _var1 = "foo";
  var public_methods = {
    doSomething: function() {
      return "bar";
    },
    var1: _var1
  };
  return public_methods;
});

1. Is there any difference in this two methods?
2. Does angular provide the myService named function? And how?

---

The second difference is in defining the "public methods", e.g. what is visible to the outside:

angular.module('myApp').service('myService', function myService() {
  var _var1 = "foo";
  var public_methods = {
    doSomething: function() {
      return "bar";
    },
    var1: _var1
  };
  return public_methods;
});

angular.module('myApp').service('myService', function myService() {
  var _var1 = "foo";
  this.doSomething = function() {
    return "bar";
  };
  this.var1 = _var1
});

The first one returns an object, which acts like an interface and defines what is visible to the public. The second one, defines its methods and properties with this.

1. Are there any drawbacks?
2. Why would I prefer one method over the other?

---

The third difference is on defining services like this:

var Session = function() {};
Session.prototype.doSomething = function() {
  return "bar";
};
Session.prototype.var1 = "foo";
angular.module('myApp').service('myService', Session);

Here, I only see one drawback, that privat variables cannot be shared with other functions. But does this method has any big advantages? I could imagine that for factories (not services) the performance would be better, because the prototype functions only has to be defined once, and not everytime a new object is created (because a service is a singleton, a factory not).

---

Defining and using factories: I'm also unsure, if the following method is best practise when using factories:

angular.module('myApp').factory('User', function() {
  var User = function(data) {
    angular.extend(this, {
      id: null,
      email: null,
      name: null
    }, data);
  };
  return User;
});

And when using the factory, I'm writing new User(data). data gets merged with some default variables etc. What do you think about this method? Is there a big drawback? Or am I using factories in a wrong way?

Answer 1

I think that by and large most of what you're asking - and the reason that you're seeing it done differently - is that these are stylistic differences that are all completely legit JavaScript. There's no real best practices here.

The first question - it makes no difference.

The second question - both work, I have a strong personal preference for the first because it's more flexible; there are nifty tricks you can do that way, object manipulation kind of stuff. You could probably do all of them operating on "this" but it feels unnecessary to me. Again, personal preference.

The third question - this is just a feature of JavaScript which supports first class functions. It's just a language feature and it's going to come down to how you prefer to design things. I inline them but keep each service in its own file. I think that you see people doing it this way because the Angular Documentation on Services shows them doing it that way because it was easier to read in documentation. But it's not much different really.

I don't have a problem with how you're using that factory, but make sure you don't actually want $resource.