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

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

link：http://jsfiddle.net/zhangyue1208/ysq3m/1826/

angular：错误：module.config（）期间的未知提供程序

2 个答案: