angulaire: Erreur: fournisseur inconnu pendant module.config()

Question

Je reçois Uncaught Error: Unknown provider: testProvider from myApp dans le code ci-dessous:

test est un fournisseur personnalisé.

angular.module('myApp', []) 
    .config(function (testProvider) { 
    testProvider.setPrefix("works: "); 
    }); 

code complet est ici:

angular.module('myApp', []) 
    .config(function (testProvider) { 
    testProvider.setPrefix("works: "); 
    }); 


angular.module('myApp') 
    .provider ("test", function() { 
    var prefix; 
    this.setPrefix = function(p) { 
     prefix = p; 
    } 

    this.$get = function() { 
     return { 
     log: function(msg) { 
      console.log (prefix + msg); 
     } 
     } 
    } 
    }); 

angular.module('myApp') 
    .controller ("myCtrl", function($scope, test) { 
    $scope.$watch ('myModel', function (newval) { 
     test.log(newval); 
    }) 
    }); 

lien Plunker: http://plnkr.co/edit/zcIHRn?p=preview

Answer 1

Un appel à

module.provider("test", ...); 

est vraiment un appel à

module.config(function($provide) { 
    $provide.provider("test", ...); 
}); 

(Voir mes wiki article on dependency injection pour plus de détails.)

Et depuis config blocs exécuter dans l'ordre où ils ont été déclarés, il vous suffit de déplacer la déclaration de votre fournisseur au-dessus du point où il est utilisé. Vous verrez souvent écrit quelque chose comme ceci:

angular.module('myApp', []) 
    .provider ("test", function() { 
    var prefix; 
    this.setPrefix = function(p) { 
     prefix = p; 
    } 

    this.$get = function() { 
     return { 
     log: function(msg) { 
      console.log (prefix + msg); 
     } 
     } 
    } 
    }) 
    .config(function (testProvider) { 
    testProvider.setPrefix("works: "); 
    }) 
    .controller ("myCtrl", function($scope, test) { 
    $scope.$watch ('myModel', function (newval) { 
     test.log(newval); 
    }) 
    }); 

Un exemple: http://plnkr.co/edit/AxTnGv?p=preview

Si vous voulez vraiment garder les préoccupations distinctes, vous pouvez créer un nouveau module et mettre en place une dépendance:

angular.module('logging', []) 
    .provider ("test", function() { 
    var prefix; 
    this.setPrefix = function(p) { 
     prefix = p; 
    } 

    this.$get = function() { 
     return { 
     log: function(msg) { 
      console.log (prefix + msg); 
     } 
     } 
    } 
    }) 

angular.module('myApp', ['logging']) 
    .config(function (testProvider) { 
    testProvider.setPrefix("works: "); 
    }) 
    .controller ("myCtrl", function($scope, test) { 
    $scope.$watch ('myModel', function (newval) { 
     test.log(newval); 
    }) 
    }); 

exemple: http://plnkr.co/edit/PWtDFG?p=preview

Answer 2

J'ai créé un exemple amélioré basé sur le premier exemple de Michelle, espérons que cela pourrait être utile.

var myApp = angular.module('myApp', []); 

myApp.provider('aPro', function() { 
    console.log('provider initialized'); 

    this.config = function() { 
     console.log("provider config"); 
    }; 

    // provider constructor 
    this.$get = function() { 
     console.log('provider constructor'); 
     return { 
      log: function(msg) { 
       console.log(msg); 
      } 
     }; 
    }; 
}); 

/* service act like factory with */ 
myApp.factory('aFac', function() { 
    console.log('factory initialized'); 

    return { 
     log: function(msg) { 
      console.log(msg); 
     } 
    }; 
}); 

myApp.directive("test1", function() { 
    console.log("test1 directive setup"); 

    return { 
     compile: function() { 
      console.log("directive compile"); 
     } 
    } 
}); 

myApp.directive("test2", function() { 
    return { 
     link: function() { 
      console.log("test2 directive link"); 
     } 
    } 
}); 

myApp.run(function() { 
    console.log("app run"); 
}); 

/* highlight! need add provider in config need suffix 'Provider' */ 
myApp.config(function(aProProvider) { 
    console.log("app config"); 

    aProProvider.config(); 
}); 

myApp.controller('myCtrl', function($scope, aFac, aPro) { 
    console.log("app controller"); 
    aFac.log("factory log"); 
    aPro.log("provider log"); 
}); 

lien: http://jsfiddle.net/zhangyue1208/ysq3m/1826/