Question

我有app/providers/weather.js：

angular.module('forecast').provider('Weather', function() {    
  var apiKey;

  this.setApiKey = function(key) {
    if(key) apiKey = key;
  };

  this.$get = function() {
    return {
      ... // Some methods
    };
  };    
});

我正在尝试将其注入我的config块：

angular.module('forecast', ['ngRoute']).config(function(WeatherProvider) {    
  WeatherProvider.setApiKey('hello1234');    
});

但是我得到了：

Uncaught Error: [$injector:modulerr] Failed to instantiate module forecast due to:
Error: [$injector:unpr] Unknown provider: WeatherProvider

奇怪的是，我可以成功地将Weather注入控制器，并可以访问this.$get中的方法。

我的index.html：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Forecast</title>
</head>
<body ng-app="forecast">

  <section class="content" ng-view></section>

  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>

  <script src="app/app.js"></script>
  <script src="app/controllers/home.js"></script>
  <script src="app/controllers/settings.js"></script>

  <script src="app/providers/weather.js"></script>

</body>
</html>

我无法找出错误原因。我正在运行Angular 1.2.8。

Answer 1

您正在使用一个模块'forecast'，因此在这种情况下，我们应该/必须确保配置已经可以访问提供商。换句话说，设置这种步骤：

// I. Module creation
angular.module('forecast', ['ngRoute']) 
  // II. Provider definition
  .provider('Weather', function() {    
    ...
  }
  // III. configuration using already known provider
  .config(function(WeatherProvider) {    
    ...
  })
;

Answer 2

在尝试注入之前，您的提供程序需要声明为模块forecast的一部分。

一种方法，即对当前代码进行最少的更改，就是将模块声明分开并首先执行：

angular.module('forecast', ['ngRoute']);

然后在设置config时使用它：

angular.module('forecast').config(function(WeatherProvider) {    
  WeatherProvider.setApiKey('hello1234');    
});

注意到angular.module：

中的内容

没有方括号您正在访问现有模块
使用方括号，您将声明一个新模块。

因此，您目前正在声明模块并立即执行配置 - 没有实例化提供程序。

demo fiddle

无法在配置中注入我的提供程序

2 个答案: