AngularJS - Dependency injection in services, factories, filters etc
So I have some plugins and libraries I want to use in my angular app and (currently) I am simply referencing those functions/methods as they were intended in 99% of apps in a way that completely ignores dependency injection.
I have (for example) the javascript library "MomentJS" which deals with formatting and validating dates and I have uses for it throughout my app in controllers, services and filters. The way that I've learned (using AngularJS) is to create a service that references the function (and it's methods) and inject that service into my controllers, which works great.
The problem is that I really need to reference this library in all different kinds of components from services to filters to controllers and everything else. So, I guess my question is how do you do dependency injection in filters, services and everything else that isn't a controller?
Is this possible? Is this even beneficial?
Any help would be greatly appreciated :)
Yes you can use dependency injection for filters and directives
Ex:
Filter:
app.filter('<filter>', ['$http', function(http){
return function(data){
}
}]);
Directive:
app.directive('<directive>', ['$http', function(http){
return {
....
}
}]);
Service:
app.factory('<service>', ['$http', function(http) {
var shinyNewServiceInstance;
return shinyNewServiceInstance;
}]);
For the sake of completeness, here is a service example with injection:
app.service('<service>', ['$http', function($http) {
this.foo = function() { ... }
}]);
While the already existing answers are correct and working, john papas angular style guide favors the use of the $inject service in Y091:
Filter:
app.filter('<filter>', MyFilter);
MyFilter.$inject = ['$http'];
function MyFilter() {
return function(data) {
}
}
Directive:
app.directive('<directive>', MyDirective);
MyDirective.$inject = ['$http'];
function MyDirective() {
return {
...
}
}
Factory:
app.factory('<factory>', MyFactory);
MyFactory.$inject = ['$http'];
function MyFactory() {
var shinyNewServiceInstance;
return shinyNewServiceInstance;
}
Service:
app.service('<service>', MyService);
MyService.$inject = ['$http'];
function MyService() {
this.foo = foo;
function foo(){
...
}
}
Follow WeChat
Success story sharing
.config()handles Dependency injection in the exact same way as the examples above.module, (i.e.config,run,controller`, etc), you pass an array with the dependencies and a handler function, and the dependencies will then be injected to the handler function. Am I right? Thank you!