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

- Je obtenir 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);
    })
  });

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

source d'informationauteur Krishna Srinivas

  1. 25

    Un appel à

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

    est vraiment un appel à

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

    (Voir mon l'article wiki sur l'injection de dépendance 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 d'accès à au-dessus du point où il est utilisé. Vous verrez souvent il é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 de définir 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

  2. 0

    J'ai créé un renforcement exemple basé sur Michelle premier exemple, 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/