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/