how to inject dependency into module.config(configFn) in angular
In Angular, we can inject $routeProvider
to the config
function
module.config(function ($routeProvider) {
});
I want to inject my service into it like
module.config(function ($routeProvider, myService) {
});
I am sure the service is defined properly, but it throws an exception saying that unknown myService
, event when I inject like
module.config(function ($routeProvider, $http) {
});
it still says unknown $http
.
Do you know why?
From Modules page, section "Module Loading & Dependencies":
Configuration blocks - get executed during the provider registrations and configuration phase. Only providers and constants can be injected into configuration blocks. This is to prevent accidental instantiation of services before they have been fully configured.
Run blocks - get executed after the injector is created and are used to kickstart the application. Only instances and constants can be injected into run blocks. This is to prevent further system configuration during application run time.
So you can't inject your own service, or built-in services like $http into config(). Use run() instead.
I don't have enough reputation to post a comment, but wanted to add to Mark's answer.
You can register providers yourself. They are basically objects (or constructors) with a $get
method. When you register a provider the standard version of it can be used like a service or factory, but a provider version can be used earlier. So a grumpy
provider that is registered as
angular.module('...', [])
.provider('grumpy', GrumpyProviderObject)
is then available in the config function as
.config(['grumpyProvider', ..., function (grumpyProvider, ...) { ... }])
and can be injected into controllers simply as
.controller('myController', ['grumpy', ..., function (grumpy, ...) { ... }])
The grumpy
object that is injected into myController
is simply the result of running the $get
method on the GrumpyProviderObject
. Note, the provider you register can also be a regular JavaScript constructor.
Note: as per the comment by @Problematic, that the provider initialization (the call to angular.module().provider(…)
must come before the config function to be available.