Angular: ошибка: неизвестный поставщик во время module.config()

Я получаю 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);
    })
  });

Ссылка на плункер: http://plnkr.co/edit/zcIHRn?p=preview

Ответ 1

Вызов

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

- действительно вызов

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

(см. мою статью статью о введении зависимостей).

А так как 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

Ответ 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/