Angular Inject $http into config or provider into run

gwin003 picture gwin003 · Sep 3, 2014 · Viewed 12.7k times · Source

I am using angular-route-segment in my angular app and an trying to configure the segments from a json feed.

I have having problems with this, because I can't figure out how to inject $http into the app.config function. This fails with Unknown provider: $http

myApp.config(["$http", "$routeSegmentProvider", function ($http, $routeSegmentProvider) {
   /* setup navigation here calling $routeSegmentProvider.when a number of times */
}

So instead of injecting $http into config, I also tried injecting $routeSegmentProvider into myApp.run

myApp.run(["$http", "$routeSegment", function($http, $routeSegment) {
    /* can use $http here to get data, but $routeSegment is not the same here */
    /* $routeSegment does not have the when setup method */
}]);

I also tried

myApp.run(["$http", "$routeSegmentProvider", function($http, $routeSegmentProvider)

but I get Unknown provider: $routeSegmentProviderProvider <- $routeSegmentProvider

Answer

cliff.meyers picture cliff.meyers · Sep 3, 2014

Providers can only be injected in the "config" phase and not the "run" phase. Conversely, a service such as $http will not have been initialized yet in the "config" phase and will only be available in the "run" phase.

A little trick to work around this is to define a variable in the parent function scope so that both the "config" and "run" blocks can have access to it:

var routeSegmentProvider = null;

myApp.config(["$routeSegmentProvider", function ($routeSegmentProvider) {
    routeSegmentProvider = $routeSegmentProvider;
}]);

myApp.run(["$http", function($http) {
  // access $http and routeSegmentProvider here
}]);

I'm not sure if you will encounter problems trying to call $routeSegmentProvider.setup() within the run phase as I haven't tried. In the past I was able to use the same technique to register http response interceptors that depend on some custom services with the $httpProvider.