angular:错误: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