AngularJS 错误:$injector:unpr 未知提供者 [英] AngularJS Error: $injector:unpr Unknown Provider
本文介绍了AngularJS 错误:$injector:unpr 未知提供者的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试按照工厂方法文档中的示例构建我自己的服务.我想我做错了但是因为我继续收到未知的提供者错误.这是我的应用程序代码，包括声明、配置和工厂定义.
编辑我现在已添加所有文件以帮助进行故障排除
编辑错误的完整详细信息位于问题似乎与 getSettings 相关的下方，因为它正在寻找 getSettingsProvider 但找不到它
错误:[$injector:unpr] http://errors.angularjs.org/1.2.16/$injector/unpr?p0=getSettingsProvider%20%3C-%20getSettings在错误(本机)在 http://localhost/sw/selfservice/bower_components/angular/angular.min.js:6:450在 http://localhost/sw/selfservice/bower_components/angular/angular.min.js:35:431在 Object.c [as get] (http://localhost/sw/selfservice/bower_components/angular/angular.min.js:34:13)在 http://localhost/sw/selfservice/bower_components/angular/angular.min.js:35:499在 c (http://localhost/sw/selfservice/bower_components/angular/angular.min.js:34:13)在 d (http://localhost/sw/selfservice/bower_components/angular/angular.min.js:34:230)在 Object.instantiate (http://localhost/sw/selfservice/bower_components/angular/angular.min.js:34:394)在 http://localhost/sw/selfservice/bower_components/angular/angular.min.js:66:112在 http://localhost/sw/selfservice/bower_components/angular/angular.min.js:53:14 angular.js:9778(匿名函数)angular.js:9778(匿名函数)angular.js:7216h.$apply angular.js:12512(匿名函数)angular.js:1382d angular.js:3869$b.c angular.js:1380$b angular.js:1394wc angular.js:1307(匿名函数)angular.js:21459一个 angular.js:2509(匿名函数)angular.js:2780q angular.js:330C这些是我目前在我的应用程序中的所有文件
app.JS
//初始化angular模块包含路由依赖var app = angular.module("selfservice", ['ngRoute']);app.config(function ($routeProvider) {$routeProvider.什么时候('/'， {templateUrl:"partials/login.html",控制器:登录"});});app.factory('getSettings', ['$http', '$q', function($http, $q) {返回函数(类型){var q = $q.defer();$http.get('models/settings.json').success(function (data) {q.resolve(function() {var settings = jQuery.parseJSON(data);返回设置[类型];});});返回 q.promise;};}]);这是我在控制器中使用此服务的方式
控制器.JS
app.controller("globalControl", ['$scope','getSettings', function ($scope,getSettings) {var loadSettings = getSettings('global');loadSettings.then(function(val) {$scope.settings = val;});}]);app.controller("登录", ['$scope', function ($scope) {返回 ""}]);指令.js
app.directive('watchResize', function(){返回 {限制:'M'，链接:函数(范围，元素，属性){scope.spacer = (window.innerWidth <1025) ?'' : '大 3';scope.button = (window.innerWidth <1025) ?'' : '大 6';angular.element(window).on('resize', function(){范围.$应用(函数(){scope.spacer = (window.innerWidth <1025) ?'' : '大 3';scope.button = (window.innerWidth <1025) ?'' : '大 6';});});}};});如果相关，这里是 HTML
<头><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><身体><div id="模板"><header id="header"><img src="{{settings.logo}}" alt="{{settings.logoDescription}}"/></标题><div id="视图"><ng-view></ng-view><script src="bower_components/foundation/js/foundation.min.js"></script><脚本>//初始化基础$(文档).基础();</html>
有人能指出我正确的方向吗?我已尽最大努力遵循文档，并且通过 SO 查找大多数相关问题更深入，并且对我来说更难以理解.这是我第一次创建服务.
解决方案
您的 angular 模块需要正确初始化.需要正确定义和初始化全局对象 app 才能注入服务.
请参阅以下示例代码以供参考:
app.js
var app = angular.module('SampleApp',['ngRoute']);//您可以在方括号内注入依赖项app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {$routeProvider.什么时候('/'， {templateUrl:"partials/login.html",控制器:登录"});$locationProvider.html5Mode(true);}]);app.factory('getSettings', ['$http', '$q', function($http, $q) {返回 {//代码编辑以创建一个函数，因为当您需要服务时，它默认返回对象，因此您不能直接返回函数.就是这样理解...getSetting:函数(类型){var q = $q.defer();$http.get('models/settings.json').success(function (data) {q.resolve(function() {var settings = jQuery.parseJSON(data);返回设置[类型];});});返回 q.promise;}}}]);app.controller("globalControl", ['$scope','getSettings', function ($scope,getSettings) {//修改了更新服务的函数调用var loadSettings = getSettings.getSetting('global');loadSettings.then(function(val) {$scope.settings = val;});}]);示例 HTML 代码应该是这样的:
<head lang="zh-cn"><title>示例应用</title><body ng-app="SampleApp" ng-controller="globalControl"><div>你的 UI 元素在这里<script src="app.js"></script></html>
请注意，控制器没有绑定到 HTML 标签，而是绑定到 body 标签.此外，请尝试在 HTML 页面的末尾包含您的自定义脚本，因为这是出于性能原因应遵循的标准做法.
我希望这能解决您的基本注入问题.
I'm trying to build my own service by following the example in the documentation for the factory methodology. I think I've done something wrong however because I continue to get the unknown provider error. This is my code for my app including the declaration, configuration and factory definition.
EDIT I've now added all of the files to help troubleshoot
EDIT The full details of the error are below the issues appears to be with getSettings, as it's looking for getSettingsProvider and cannot find it
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
These are all of the files I have in my app currently
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;
};
}]);
And here is how I am using this service in my controller
controller.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';
});
});
}
};
});
And if it's pertinent here's the 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>
Can someone point me in the right direction? I have done my best to follow the documentation, and looking through SO most of the related issues are much more in depth, and more difficult for me to understand. This is my first time creating a service.
解决方案
Your angular module needs to be initialized properly. The global object app needs to be defined and initialized correctly to inject the service.
Please see below sample code for reference:
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;
});
}]);
Sample HTML code should be like this:
<!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>
Please note that the controller is not binding to an HTML tag but to the body tag. Also, please try to include your custom scripts at end of the HTML page as this is a standard practice to follow for performance reasons.
I hope this will solve your basic injection issue.
这篇关于AngularJS 错误:$injector:unpr 未知提供者的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
