编辑:使用YEOMAN来构建我的应用,
我有以下 YEOMAN生成提供商
'use strict';
angular.module('myApp')
.provider('myProvider', function () {
// Private variables
var salutation = 'Hello';
// Private constructor
function Greeter() {
this.greet = function () {
return salutation;
};
}
// Public API for configuration
this.setSalutation = function (s) {
salutation = s;
};
// Method for instantiating
this.$get = function () {
return new Greeter();
};
});
我正在尝试将其注入我的app配置中,如下所示:
'use strict';
angular.module('myApp', [
'ngRoute',
'myProvider'
])
.config(function ($routeProvider, myProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
});
我收到以下错误:
Uncaught Error: [$injector:modulerr] Failed to instantiate module lpSocialApp due to:
Error: [$injector:modulerr] Failed to instantiate module myProvider due to:
Error: [$injector:nomod] Module 'myProvider' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
我错过了什么?
答案 0 :(得分:4)
我可以在你的代码中看到两个错误:
1)您不能在应用程序模块中注入“myProvider”,因为“myProvider”已在您的应用程序模块中定义。
2)'myProvider'的名称错误,Angular会自动将'Provider'附加到您的提供商。
以下是修复:
1)在专用模块中定义提供程序,并在应用程序模块依赖项中添加此新模块。
2)将您的提供者重命名为'my'(或在您的配置功能中注入'myProviderProvider'):
angular.module('myProviderModule', [])
.provider('my', function () { // or 'myProvider'
// Private variables
var salutation = 'Hello';
// Private constructor
function Greeter() {
this.greet = function () {
return salutation;
};
}
// Public API for configuration
this.setSalutation = function (s) {
salutation = s;
};
// Method for instantiating
this.$get = function () {
return new Greeter();
};
});
angular.module('myApp', [
'ngRoute',
'myProviderModule'
])
.config(function ($routeProvider, myProvider) { // or 'myProviderProvider'
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
});
看到这个小提琴:http://jsfiddle.net/Z3k2s
答案 1 :(得分:1)
您将提供程序与模块混淆。模块包括一组提供者,服务和工厂。
在定义提供者时也不应该添加提供者后缀,否则你必须像myProviderProvider
那样注入它。
另外,您看起来很混淆angular.module
上的语法:
// create a new module foo.bar with dependency to ngRoute
angular.module('foo.bar', ['ngRoute']);
// create a new module woo.hoo with NO dependency
angular.module('woo.hoo', []);
// get already created module foo.bar
angular.module('foo.bar')
您的代码已修复:
'use strict';
angular.module('someModule', [])
.provider('my', function () {
// Method for instantiating
this.$get = function () {
return {}// return something
};
});
'use strict';
angular.module('myApp', [
'ngRoute',
'someModule'
])
.config(function ($routeProvider, myProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
});
答案 2 :(得分:0)
您正在尝试加载名为myProvider
的模块:
angular.module('myApp', [
'ngRoute',
'myProvider'
])
myProvider
已经在myApp
模块中,因此您可以执行此操作:
angular.module('myApp', [
'ngRoute'
])
.config(function ($routeProvider, myProvider) {