How do you make a service configurable in angularjs?

Question

I got services in angular that I need to be configurable, this way I can remove coupling from my app and share some of my code.

My question is how do you achieve this ?

With module.value() and dependancy injection ? Then how do you get a default value ? How do you make a value calculated at init and not hardcoded ?

With a another service ? How do you make that generic ?

Do you have a code exemple, because I'm a bit lost with this.

Answer 1

In order to create a configurable service, you need to use a provider, see: http://docs.angularjs.org/guide/providers. Providers allow you to configure the factory or service in the module's config block before it is instantiated. For a simple example, see http://plnkr.co/edit/QMLBBQ3obE90FtCA2eBu

For a more complete/complex example of how to use configurable services, I would suggest looking at the Restangular project, which also demonstrates a method of providing default values that can be overriden by the app developer.

Answer 2

I believe something like this should work within your service, if you were to use .value() to declare some objects for injection

var myLocalValue = myInjectedValue || "Some default value";

I'm not super javascript savvy but this answer on SO seems to elude to the fact that this will work too: JavaScript OR (||) variable assignment explanation

I made a fiddle here to test it out it seems to work how I would expect:

http://jsfiddle.net/u3MY8/1/

JavaScript

var app = angular.module("myapp",[]);
// define a value
app.value('myThing', 'weee');

// use it in a service
app.factory('myService', ['myThing', function(myThing, myOtherThing){
    var myLocalOtherThing = myOtherThing || "some default";
   return {
       whatsMyThing: function() { 
          return myThing; //weee
       },
       whatsMyOtherThing: function() {
           return myOtherThing;
       },
       whatsMyOtherThingWithDefault: function() {
           return myLocalOtherThing;
       }
    }
}]);

// use it in a controller
app.controller('someController', function($scope, myService) {
    $scope.foo = myService.whatsMyThing(); //weee
    $scope.bar = myService.whatsMyOtherThing(); //""
    $scope.baz = myService.whatsMyOtherThingWithDefault(); //some default
});

HTML

<div ng-app="myapp" ng-controller="someController">
    <ol>
        <li>{{foo}}</li>
        <li>{{bar}}</li>
        <li>{{baz}}</li>
    </ol>
</div>

To note this only works if myOtherThing isn't injected, if you list it to be injected but it hasn't been defined you'll run into errors, but I'm not sure exactly what the use case is.