AngularJS 错误：$injector:unpr 未知提供者
Posted
技术标签:
【中文标题】AngularJS 错误：$injector:unpr 未知提供者【英文标题】：AngularJS Error: $injector:unpr Unknown Provider 【发布时间】：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" />
</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 中），对类似问题的回答为我解决了这个问题：***.com/a/25193243/556006 【参考方案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 时出现的第一个 *** 问题，我将在此处添加此问题。
确保在您的 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。
【讨论】：
这并非完全正确。这只是使用单个控制器的视图的好习惯。如果你想加载一个使用多个控制器的视图怎么办？以上是关于AngularJS 错误：$injector:unpr 未知提供者的主要内容，如果未能解决你的问题，请参考以下文章
AngularJS，Node.js，节点模块“幻影”... 注入错误，angularjs 试图加载我的指令 + 后缀
Angular 混合错误：试图在设置之前获取 AngularJS 注入器