角：錯誤：module.config在未知的提供（）

Question

我得到Uncaught Error: Unknown provider: testProvider from myApp在下面的代碼：

test是一個自定義提供商。

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

全部代碼是在這裏：

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

Answer 1

的調用

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

真是

呼叫

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

（見我wiki article on dependency injection瞭解更多詳情。）

而且，因爲在他們聲明的順序運行config塊，你只需要使用它的到你的供應商的聲明移至點上方。你會經常看到它寫這樣的事情：

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

一個例子：http://plnkr.co/edit/AxTnGv?p=preview

如果你真的想保持分開考慮，你可以創建一個新的模塊，併成立了依賴性：

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

例子：http://plnkr.co/edit/PWtDFG?p=preview

Answer 2

我創建了一個增強的例如基於米歇爾的第一個例子，希望能有所幫助。

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

鏈接：http://jsfiddle.net/zhangyue1208/ysq3m/1826/