kątowa: Błąd: Nieznany dostawca podczas module.config()

Question

uzyskać Uncaught Error: Unknown provider: testProvider from myApp w poniższym kodzie:

test jest dostawcą zwyczaj.

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

Pełny kod jest tutaj:

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

Wywołanie

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

jest naprawdę wezwanie do

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

(Zobacz moje wiki article on dependency injection więcej szczegółów.)

A ponieważ config bloki które są prowadzone w kolejności w jakiej zostały zgłoszone, wystarczy przesunąć deklarację dostawcy powyżej punktu, w którym jest on używany. Będziesz często zobaczyć napisane coś takiego:

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

Przykład: http://plnkr.co/edit/AxTnGv?p=preview

Jeśli naprawdę chcesz zachować obawy oddzielne, można utworzyć nowy moduł i skonfigurować zależność:

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

przykład: http://plnkr.co/edit/PWtDFG?p=preview

Answer 2

stworzyłem ulepszony przykład na podstawie pierwszego przykładu Michelle, nadzieję, że może to być pomocne.

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/