AngularJS 错误:$injector:unpr 未知提供程序
AngularJS Error: $injector:unpr Unknown Provider
我正在尝试按照工厂方法文档中的示例构建自己的服务。 我想我做错了什么,但是因为我继续收到未知的提供程序错误。 这是我的应用程序代码,包括声明、配置和工厂定义。
编辑我现在已经添加了所有文件来帮助排除故障
编辑错误的完整详细信息如下,问题似乎与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
这些是我目前在我的应用程序中拥有的所有文件
应用.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 ""
}]);
指令.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>
有人可以指出我正确的方向吗? 我已经尽力遵循文档,并且浏览SO大多数相关问题都更加深入,并且对我来说更难以理解。 这是我第一次创建服务。
也是您可能错过在页面中包含服务文件的常见原因之一
<script src="myservice.js"></script>
您的角度模块需要正确初始化。需要正确定义和初始化全局对象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 页面末尾包含自定义脚本,因为出于性能原因,这是遵循的标准做法。
我希望这将解决您的基本注射问题。
app.factory('getSettings', ['$http','$q' /*here!!!*/,function($http, $q) {
您需要声明所有依赖项或无依赖项,并且忘记声明$q.
编辑:
控制器.js:登录,不返回">
当一个人自动将$scope注入他们的工厂时,也会出现此错误:
angular.module('m', [])
.factory('util', function ($scope) { // <-- this '$scope' gives 'Unknown provider' when one attempts to inject 'util'
// ...
});
几个小时试图解决同样的问题。我是这样做的:
应用.js:
var myApp = angular.module( 'myApp', ['ngRoute', 'ngResource', 'CustomServices'] );
自定义服务是我创建的新模块,并放置在一个名为服务的单独文件中.js
_Layout.cshtml:
<script src="~/Scripts/app.js"></script>
<script src="~/Scripts/services/services.js"></script>
服务.js:
var app = angular.module('CustomServices', []);
app.factory( 'GetPeopleList', ['$http', '$log','$q', function ( $http, $log, $q )
{
//Your code here
}
应用.js
myApp.controller( 'mainController', ['$scope', '$http', '$route', '$routeParams', '$location', 'GetPeopleList', function ( $scope, $http, $route, $routeParams, $location, GetPeopleList )
您必须将服务绑定到服务.js文件中的新模块,当然,您必须在创建主应用程序模块(app.js(时使用该新模块,并在要使用它的控制器中声明服务的使用。
我遇到了这个问题,结果我已将我的控制器包含在ui.router和html模板中,如
.config(['$stateProvider',
function($stateProvider) {
$stateProvider.state('dashboard', {
url: '/dashboard',
templateUrl: 'dashboard/views/index.html',
controller: 'DashboardController'
});
}
]);
和
<section data-ng-controller="DashboardController">
请"包括"控制器和控制器中调用的函数所在的模块。
module(theModule);
@ user2310334我刚刚尝试了这个,一个非常基本的例子:
网页文件
<!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);
}]);
它有效。试试吧。
app.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 移动到外部app.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
});
}))
就我而言,我向我的应用程序添加了一个新的服务(文件(。该新服务注入到现有控制器中。 我没有错过将新的服务依赖项注入到该现有控制器中,也没有在不超过一个位置声明我的应用程序模块。当我重新运行我的 Web 应用程序并且我的浏览器缓存未使用新的服务文件代码重置时,会引发相同的异常。我只是刷新了浏览器以获取用于浏览器缓存的新服务文件,问题就消失了。
由于这是搜索Error: $injector:unpr Unknown Provider
时在Google上出现的第一个Stackoverflow问题,因此我将在此处添加此问题。
确保在索引中.html任何模块/依赖项在需要后都不会加载。
例如,在我的代码中customFactory.factory.js
开头是这样的:
angular
.module("app.module1")
.factory("customFactory", customFactory);
但是索引.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
之前加载
我在编写 Jasmine 单元测试时遇到了此错误。我有这样一句话:
angular.injector(['myModule'])
它必须是:
angular.injector(['ng', 'myModule'])
当你使用ui-router时,你不应该在任何地方使用ng-controller。当激活控制器的相应状态时,将自动实例化 ui-view。
- 为什么我得到错误:$injector:unp未知提供程序
- 在出厂时注入服务错误: [$injector:unpr] 未知提供程序: $scopeProvider <- $scop
- AngularJS错误:$injector:unp未知提供程序-$modalInstanceProvider
- AngularJS:未知的提供程序错误
- Angular小部件中的Angular Grid返回错误:[$injector:unp]未知提供程序:
- 有角度的“;未知提供者”;在约曼应用程序中使用Grunt Build缩小后出错
- 获取解析值的未知提供程序错误
- $provide.decorator为指令提供未知的提供程序
- jQuery - 追加/替换事件侦听器(当事件处理程序未知时)
- angular.js:13294错误:[$injector:unp]未知提供程序:cityResourceProvide
- 角度未知提供程序,无法POST/注册
- 未知提供程序:在angular.bootstrap之前使用$injector获取$location服务时使用$rootE
- Watir Web驱动程序引发未知Javascript错误
- ionic.bundle.js:25642错误:[$injector:unp]未知提供程序:$cordovaGeoloc
- 密钥斗篷未知提供程序错误
- Angular 未知提供程序,出厂时包装在匿名函数中
- ui选择未知提供程序
- 错误: [$injector:unpr] 未知提供程序: setPageProvider <- setPage
- (IONIC)错误: [$injector:unpr] 未知提供程序: 数据服务提供程序 <- 数据服务<- 身份验证控
- AngularJS 未知提供程序