How do you inject a condition service into AngularJS 1 Controller

Question

I have an angular module that is designed to be self contained. That a consuming app can add the directives with a url param and it will use that url as it's overall data source when interacting with the widget. This has a generic LoadService that uses $http to load the data, and expects a specific JSON format to run the widget.

Well right now I am trying to refactor so that someone can also create a custom load service and inject it into the module, but if it's not injected then it will use the default data load. So I am trying to figure out how I can create a way that CustomLoadService is injected if it is defined by the app that is consuming the module. However it should not error out if the custom service isn't defined, it should just use the default service.

I was looking into the $injector.get and saw that as a possibility but I am having trouble injecting the $injector into a controller. I thought it would be as simple as $location to inject. Something like...

angular
  .module('Widget')
  .controller('WidgetController',[
    '$scope', 
    'WidgetLoadService', 
    '$injector', 
    WidgetController
  ]);

This method doesn't seem to work so I am wondering... What is the best most "angular way" to solve this issue. How should I be using the $injector.

Answer 1

You can use $injector:

app.controller('MainCtrl', function($scope, $injector) {
  $scope.name = $injector.get('test').name;
}).factory('test', function() { return {name: 'world'} });

So you may have something like this as a result:

app.controller('MainCtrl', function($scope, shareService) {
  $scope.name = shareService.getData();

  shareService.setDataService('dataService2');

  $scope.name = shareService.getData();
})

.factory('shareService', function($injector) { 
  var dataServiceName;

  return {
    setDataService: function(name) {
      dataServiceName = name;
    },
    getData: function(name) {
      return $injector.get(dataServiceName || 'dataService').data;
    }
  } 

})


.factory('dataService', function() { return {data: 'world'} })

.factory('dataService2', function() { return {data: 'world 2'} });