AngularJS 错误：$injector:unpr 未知提供者答案

【问题标题】：AngularJS Error: $injector:unpr Unknown ProviderAngularJS 错误：$injector:unpr 未知提供者
【发布时间】：2014-07-19 11:47:03
【问题描述】：

我正在尝试按照工厂方法文档中的示例构建自己的服务。但是，我认为我做错了，因为我继续收到未知的提供程序错误。这是我的应用程序代码，包括声明、配置和工厂定义。

编辑我现在已添加所有文件以帮助解决问题

编辑错误的完整详细信息如下所示，问题似乎与 getSettings 相关，因为它正在寻找 getSettingsProvider 但找不到它

Error: [$injector:unpr] http://errors.angularjs.org/1.2.16/$injector/unpr?    p0=getSettingsProvider%20%3C-%20getSettings
    at Error (native)
    at http://localhost/sw/selfservice/bower_components/angular/angular.min.js:6:450
    at http://localhost/sw/selfservice/bower_components/angular/angular.min.js:35:431
    at Object.c [as get] (http://localhost/sw/selfservice/bower_components/angular/angular.min.js:34:13)
    at http://localhost/sw/selfservice/bower_components/angular/angular.min.js:35:499
    at c (http://localhost/sw/selfservice/bower_components/angular/angular.min.js:34:13)
    at d (http://localhost/sw/selfservice/bower_components/angular/angular.min.js:34:230)
    at Object.instantiate (http://localhost/sw/selfservice/bower_components/angular/angular.min.js:34:394)
    at http://localhost/sw/selfservice/bower_components/angular/angular.min.js:66:112
    at http://localhost/sw/selfservice/bower_components/angular/angular.min.js:53:14 angular.js:9778
(anonymous function) angular.js:9778
(anonymous function) angular.js:7216
h.$apply angular.js:12512
(anonymous function) angular.js:1382
d angular.js:3869
$b.c angular.js:1380
$b angular.js:1394
Wc angular.js:1307
(anonymous function) angular.js:21459
a angular.js:2509
(anonymous function) angular.js:2780
q angular.js:330
c

这些是我目前在我的应用中拥有的所有文件

app.JS

//Initialize angular module include route dependencies

var app = angular.module("selfservice", ['ngRoute']);

app.config(function ($routeProvider) {
   $routeProvider
       .when('/', {
           templateUrl:"partials/login.html",
           controller:"login"
       });
});






app.factory('getSettings', ['$http', '$q', function($http, $q) {
    return function (type) {
        var q = $q.defer();
        $http.get('models/settings.json').success(function (data) {
            q.resolve(function() {
                var settings = jQuery.parseJSON(data);
                return settings[type];
            });
        });

        return q.promise;
    };
}]);

这是我在控制器中使用此服务的方式

控制器.JS

app.controller("globalControl", ['$scope','getSettings', function ($scope,getSettings) {
    var loadSettings = getSettings('global');
    loadSettings.then(function(val) {
        $scope.settings = val;
    });

}]);


app.controller("login", ['$scope', function ($scope) {

    return ""



}]);

directives.js

app.directive('watchResize', function(){
    return {
        restrict: 'M',
        link: function(scope, elem, attr) {
            scope.spacer = (window.innerWidth < 1025) ? '' : 'large-3';
            scope.button = (window.innerWidth < 1025) ? '' : 'large-6';
            angular.element(window).on('resize', function(){
                scope.$apply(function(){
                    scope.spacer = (window.innerWidth < 1025) ? '' : 'large-3';
                    scope.button = (window.innerWidth < 1025) ? '' : 'large-6';
                });
            });
        }
    };
});

如果相关，这里是 HTML

<html class="no-js" lang="en" ng-app="selfservice" ng-controller="globalControl">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>{{settings.title}}</title>
     <link rel="stylesheet" href="css/app.css" />
    <script src="bower_components/modernizr/modernizr.js"></script>
      <script src="bower_components/angular/angular.min.js"></script>
       <script src="bower_components/angular-route/angular-route.min.js"></script>
       <script src="bower_components/jquery/dist/jquery.min.js"></script>
      <script src="js/app.js"></script>
      <script src="js/controllers.js"></script>
      <script src="js/directives.js"></script>
  </head>
  <body>
    <div id="template">
        <header id="header">
            <img src="{{settings.logo}}" alt="{{settings.logoDescription}}"/>
        </header>

        <div id="view">
            <ng-view></ng-view>
        </div>

    </div>

    <script src="bower_components/foundation/js/foundation.min.js"></script>
        <script>
        //initialize foundation
        $(document).foundation();

    </script>
  </body>
</html>

有人能指出我正确的方向吗？我已尽我所能遵循文档，并且通过查看大多数相关问题更深入，更难以理解。这是我第一次创建服务。

【问题讨论】：

错误是否为您提供了未知的提供商名称？通常错误中有一个字符串值。
在您的控制台中，您应该能够单击未知提供者错误消息，这将带您进入 Angular 页面，为您提供有关该错误的更多信息。在您的问题中发布该信息可能会对您有所帮助。
很抱歉最初没有提供所有详细信息，我试图让问题保持简洁，但是我现在提供了有关该问题的所有详细信息
如果问题解决了可以标记一下吗？
对于遇到此问题的任何人（首先在 Google 中），对类似问题的回答为我解决了这个问题：stackoverflow.com/a/25193243/556006

标签： javascript angularjs angularjs-service

【解决方案1】：

也是您可能错过在页面中包含服务文件的常见原因之一

<script src="myservice.js"></script>

【讨论】：

谢谢！因此，我花了几个小时进行调试。
一个小时的冲浪结果，给你。愚蠢的错误。谢谢。

【解决方案2】：

您的角度模块需要正确初始化。需要正确定义和初始化全局对象app 才能注入服务。

请参阅下面的示例代码以供参考：

app.js

var app = angular.module('SampleApp',['ngRoute']); //You can inject the dependencies within the square bracket    

app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
  $routeProvider
    .when('/', {
      templateUrl:"partials/login.html",
      controller:"login"
    });

  $locationProvider
    .html5Mode(true);
}]);

app.factory('getSettings', ['$http', '$q', function($http, $q) {
  return {
    //Code edited to create a function as when you require service it returns object by default so you can't return function directly. That's what understand...
    getSetting: function (type) { 
      var q = $q.defer();
      $http.get('models/settings.json').success(function (data) {
        q.resolve(function() {
          var settings = jQuery.parseJSON(data);
          return settings[type];
        });
      });
      return q.promise;
    }
  }
}]);

app.controller("globalControl", ['$scope','getSettings', function ($scope,getSettings) {
  //Modified the function call for updated service
  var loadSettings = getSettings.getSetting('global');
  loadSettings.then(function(val) {
    $scope.settings = val;
  });
}]);

示例 HTML 代码应如下所示：

<!DOCTYPE html>
<html>
    <head lang="en">
        <title>Sample Application</title>
    </head>
    <body ng-app="SampleApp" ng-controller="globalControl">
        <div>
            Your UI elements go here
        </div>
        <script src="app.js"></script>
    </body>
</html>

请注意，控制器不是绑定到 HTML 标签而是绑定到 body 标签。此外，请尝试在 HTML 页面的末尾包含您的自定义脚本，因为这是出于性能原因需要遵循的标准做法。

我希望这能解决您的基本注入问题。

【讨论】：

我看不到你在你的样本中做了哪些我没有做过的事情，并在这个问题中显示出来，你能更具体一点吗？
我已经用适当的 cmets 更新了答案。我希望这能解决您的问题。
谢谢，你救了我，我花了 12 个小时搜索，问题是 ['$routeProvider', 在 app.config 和 function 之间丢失了

【解决方案3】：

app.factory('getSettings', ['$http','$q' /*here!!!*/,function($http, $q) {

您需要声明所有依赖项，或者没有声明，而您忘记声明 $q 。

编辑：

controller.js : 登录，不返回 ""

【讨论】：

我可以看到我错过了那个，所以我更新了我的代码以包含它，但仍然得到同样的错误。我已经更新了问题，以便更好地查看我的所有代码
app.js,directive.js 和 service.js 的内容你放了吗？因为我猜不出这些文件里面有什么。
我已经添加了所有文件

【解决方案4】：

当不小心将 $scope 注入他们的工厂时也会出现此错误：

angular.module('m', [])
    .factory('util', function ($scope) { // <-- this '$scope' gives 'Unknown provider' when one attempts to inject 'util'
       // ...
    });

【讨论】：

这很有帮助

【解决方案5】：

花了几个小时试图解决这个问题。我就是这样做的：

app.js：

var myApp = angular.module( 'myApp', ['ngRoute', 'ngResource', 'CustomServices'] );

CustomServices 是我创建并放置在名为 services.js 的单独文件中的一个新模块

_Layout.cshtml：

<script src="~/Scripts/app.js"></script>
<script src="~/Scripts/services/services.js"></script>

services.js：

var app = angular.module('CustomServices', []); 
app.factory( 'GetPeopleList', ['$http', '$log','$q', function ( $http, $log, $q )
{
    //Your code here
}

app.js

myApp.controller( 'mainController', ['$scope', '$http', '$route', '$routeParams', '$location', 'GetPeopleList', function ( $scope, $http, $route, $routeParams, $location, GetPeopleList )

您必须将您的服务绑定到 services.js 文件中的新模块，当然您必须在创建主应用程序模块 (app.js) 时使用该新模块，并且还必须声明使用该服务在你想使用它的控制器中。

【讨论】：

【解决方案6】：

我遇到了这个问题，结果发现我在 ui.router 和 html 模板中都包含了我的控制器，就像在

中一样

.config(['$stateProvider',
  function($stateProvider) {
    $stateProvider.state('dashboard', {
      url: '/dashboard',
      templateUrl: 'dashboard/views/index.html',
      controller: 'DashboardController'
    });
  }
]);

和

<section data-ng-controller="DashboardController">

【讨论】：

【解决方案7】：

请“包含”控制器和控制器所在的模块以及控制器中调用的函数。

module(theModule);

【讨论】：

【解决方案8】：

@user2310334 我刚试过这个，一个非常基本的例子：

HTML 文件

<!DOCTYPE html>
<html lang="en" ng-app="app">

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-route.min.js" type="text/javascript"></script>
    <script src="./app.js" type="text/javascript"></script>
</head>

<body>
    <div ng-controller="MailDetailCtrl">
    </div>
</body>
</html>

javascript 文件：

var myApp= angular.module('app', ['ngRoute']);

myApp.factory('mailService' , function () {
return {
    getData : function(){
      var employees = [{name: 'John Doe', id: '1'},
        {name: 'Mary Homes', id: '2'},
        {name: 'Chris Karl', id: '3'}
      ];

      return employees;
    }
  };

});


myApp.controller('MailDetailCtrl',['$scope', 'mailService', function($scope, mailService) {
  alert(mailService.getData()[0].name);
}]);

而且它有效。试试看。

【讨论】：

【解决方案9】：

确保加载控制器outsideapp.config。以下代码可能会导致此错误：

app.config(["$stateProvider", "$urlRouterProvider", function ($stateProvider, $urlRouterProvider) {
       var AuthCtrl = require('components/auth/AuthCtrl'); //NOTICE HERE
       $stateProvider.state('login',{
            url: "/users/login",
            templateUrl: require("components/auth/login.tpl.html"),
            controller: AuthCtrl // ERROR
        })
}))

要修复此错误，我们必须将 AuthCtrl 移至 outsideapp.config：

var AuthCtrl = require('components/auth/AuthCtrl'); //NOTICE HERE
app.config(["$stateProvider", "$urlRouterProvider", function ($stateProvider, $urlRouterProvider) {
       $stateProvider.state('login',{
            url: "/users/login",
            templateUrl: require("components/auth/login.tpl.html"),
            controller: AuthCtrl // WORK
        });
}))

【讨论】：

【解决方案10】：

就我而言，我向我的应用程序添加了一个新服务（文件）。该新服务被注入到现有控制器中。我没有错过将新的服务依赖注入到现有控制器中，并且没有声明我的应用程序模块不超过一个地方。当我重新运行我的网络应用程序并且我的浏览器缓存 未重置 使用新的服务文件代码时，会引发相同的异常。我只是刷新了浏览器以获取浏览器缓存的新服务文件，问题就消失了。

【讨论】：

【解决方案11】：

由于这是在 Google 上搜索 Error: $injector:unpr Unknown Provider 时出现的第一个 Stackoverflow 问题，我将在此处添加此问题。

确保在您的 index.html 中没有在需要后加载任何模块/依赖项。

例如在我的代码中customFactory.factory.js 是这样开始的：

angular
   .module("app.module1")
   .factory("customFactory", customFactory);

但是 index.html 看起来像这样：

    <script src="/src/client/app/customFactory.factory.js"></script>
    <script src="/src/client/app/module1.module.js"></script>

它应该看起来像这样：

    <script src="/src/client/app/module1.module.js"></script>
    <script src="/src/client/app/customFactory.factory.js"></script>

由于customFactory.factory.js被声明为module1的一部分，它需要在customFactory之前加载

【讨论】：

【解决方案12】：

我在编写 Jasmine 单元测试时遇到此错误。我有这条线：

angular.injector(['myModule'])

必须是：

angular.injector(['ng', 'myModule'])

【讨论】：

【解决方案13】：

当你使用 ui-router 时，你不应该在任何地方使用 ng-controller。当相应的状态被激活时，您的控制器会自动实例化为 ui-view。

【讨论】：

这并非完全正确。这只是使用单个控制器的视图的好习惯。如果你想加载一个使用多个控制器的视图怎么办？