angular js - creating custom services

Question

I started learning angularjs in w3schools tutorials. Below was an example that was given to write your custom services

app.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});


app.controller('myCtrl', function($scope, hexafy) {
    $scope.hex = hexafy.myFunc(255);
});

Why doesn't the below work -

app.service('hexafy', function(x) {
        return x.toString(16);
});
app.controller('myCtrl', function($scope, hexafy) {
  $scope.hex = hexafy(255);
});

Here I am letting the function accept an argument and processing it without creating a new function within it. But this approach doesn't seem to work.

Answer 1

Service is supposed to be instantiatable function, so Angular creates instance of the service for you, like a constructor function. If you just want to register a function to call without constructing an instance use value:

app.value('hexafy', function(x) {
  return x.toString(16);
});

Answer 2

You need a method are a value to access the service class, It is better to keep a method for your need, I believe below is the code which is required for your need.

app.service('hexafy', function() {
        this.toString = function(x){
        return x.toString(16);
        }
});
app.controller('myCtrl', function($scope, hexafy) {
  $scope.hex = hexafy.toString(255);
});

or you can access it as the value just like the above answer.