web-dev-qa-db-fra.com

AngularJS - Injection de dépendance dans les services, les usines, les filtres, etc.

J'ai donc quelques plugins et bibliothèques à utiliser dans mon angular et (actuellement) je fais simplement référence à ces fonctions/méthodes telles qu'elles étaient prévues dans 99% des applications d'une manière qui ignore l'injection de dépendance.

J'ai (par exemple) la bibliothèque javascript "MomentJS" qui traite du formatage et de la validation des dates, et j'en ai des utilisations dans l'ensemble de mon application dans les contrôleurs, les services et les filtres. La manière dont j’ai appris (avec AngularJS) est de créer un service qui référence la fonction (et ses méthodes) et d’injecter ce service dans mes contrôleurs, ce qui fonctionne très bien.

Le problème est que je dois vraiment référencer cette bibliothèque dans différents types de composants, des services aux filtres, en passant par les contrôleurs. Donc, je suppose que ma question est de savoir comment faire une injection de dépendance dans les filtres, les services et tout ce qui n’est pas un contrôleur?

Est-ce possible? Est-ce même bénéfique?

Toute aide serait grandement appréciée :)

javascriptdependency-injectionangularjs
58
Kevin Beal

Oui, vous pouvez utiliser l'injection de dépendance pour les filtres et les directives

Ex:

Filtre:

app.filter('<filter>', ['$http', function(http){
    return function(data){
    }
}]);

Directif:

app.directive('<directive>', ['$http', function(http){
    return {
        ....
    }
}]);

Un service:

app.factory('<service>', ['$http', function(http) {
  var shinyNewServiceInstance;
  return shinyNewServiceInstance;
}]);
102
Arun P Johny

Par souci d’exhaustivité, voici un exemple de service avec injection:

app.service('<service>', ['$http', function($http) {
  this.foo = function() { ... }
}]);
21
user1338062

Bien que les réponses existantes soient correctes et fonctionnent, john papas angular favorise l'utilisation de la $inject service dans Y091 :

Filtre:

app.filter('<filter', MyFilter);
MyFilter.$inject = ['$http'];
function MyFilter() {
  return function(data) {
  }
}

Directif:

app.directive('<directive>', MyDirective);
MyDirective.$inject = ['$http'];
function MyDirective() {
  return {
    ...
  }
}

Usine:

app.factory('<factory>', MyFactory);
MyFactory.$inject = ['$http'];
function MyFactory() {
  var shinyNewServiceInstance;
  return shinyNewServiceInstance;
}

Un service:

app.service('<service>', MyService);
MyService.$inject = ['$http'];
function MyService() {
  this.foo = foo;
  function foo(){
    ...
  }
}
7
Daniel