angularjs - 角度：错误：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 文章。）

而且由于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

我基于 Michelle 的第一个示例创建了一个增强示例，希望对您有所帮助。

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/