Winkel: Fehler: Unbekannter Anbieter während module.config()

Question

I Uncaught Error: Unknown provider: testProvider from myApp im folgenden Code erhalten:

test ist ein Brauch Anbieter.

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

Voll Code ist hier:

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 Link: http://plnkr.co/edit/zcIHRn?p=preview

Answer 1

Ein Aufruf

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

ist wirklich ein Aufruf an

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

(Siehe meine wiki article on dependency injection für weitere Details.)

Und da config in der Reihenfolge ausgeführt Blöcke sie deklariert wurden, müssen Sie nur auf die Erklärung Ihres Providers bewegen über dem Punkt, wo es verwendet wird. Sie werden sehen, es oft so etwas wie folgt geschrieben:

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

Ein Beispiel: http://plnkr.co/edit/AxTnGv?p=preview

Wenn Sie wirklich die Sorgen halten wollen trennen, können Sie ein neues Modul erstellen und eine Abhängigkeit eingerichtet:

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

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

Answer 2

ich habe ein verbessertes Beispiel basierend auf Michelles erste Beispiel, hoffen, dass es hilfreich sein könnte.

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"); 
}); 

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