Search code examples
angularjsangular-routingangular-route-segment

Angular Inject $http into config or provider into run


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


Solution

  • 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.