AngularJS错误：$注射器：未知未知的提供者
我试图通过遵循工厂方法文档中的示例来构build自己的服务。 我认为我做了错误的事情，但因为我继续得到未知的提供商错误。 这是我的应用程序的代码，包括声明，configuration和工厂定义。
编辑我已经添加了所有的文件来帮助排除故障
编辑错误的全部细节下面的问题似乎与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 $bc 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; }; }]);
这里是我如何在我的控制器中使用这项服务
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'; }); }); } }; });
如果它是相关的这里的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>
有人能指出我正确的方向吗？ 我已经尽了我的努力来跟踪文档，并且通过大多数相关的问题进行深入的研究，对于我来说更加难以理解。 这是我第一次创build一个服务。
您的angular度模块需要正确初始化。 全局对象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页面的末尾，因为这是出于性能原因遵循的标准做法。
我希望这将解决您的基本注射问题。
也是一个受欢迎的原因，也许你错过了将服务文件包含在你的页面中
<script src="myservice.js"></script>
app.factory('getSettings', ['$http','$q' /*here!!!*/,function($http, $q) {
你需要声明所有的依赖关系或者没有，你忘了声明$ q。
编辑：
controller.js：login，不要返回“”
这个错误也出现在一个人注意到$范围到他们的工厂：
angular.module('m', []) .factory('util', function ($scope) { // <-- this '$scope' gives 'Unknown provider' when one attempts to inject 'util' // ... });
花了几个小时试图解决相同的问题。 这是我做到的：
app.js：
var myApp = angular.module( 'myApp', ['ngRoute', 'ngResource', 'CustomServices'] );
CustomServices是我创build的一个新模块，放置在一个名为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文件中的新模块，当然你必须在创build主应用程序模块（app.js）时使用这个新模块，并且还要声明在控制器中使用服务你想用它。
我得到这个问题，事实certificate，我已经包括我的控制器都在ui.router和HTML模板中
.config(['$stateProvider', function($stateProvider) { $stateProvider.state('dashboard', { url: '/dashboard', templateUrl: 'dashboard/views/index.html', controller: 'DashboardController' }); } ]);
和
<section data-ng-controller="DashboardController">
@ 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); }]);
它工作。 尝试一下。
确保你在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 }); }))
在我的情况下，我添加了一个新的服务（文件）到我的应用程序。 该新服务被注入到现有的控制器中。 我没有错过新的服务dependency injection到现有的控制器，并没有宣布我的应用程序模块不超过一个地方。 当我重新运行我的web应用程序，并且我的浏览器caching没有重新设置新的服务文件代码时，抛出同样的exception。 我只是刷新我的浏览器，以获得新的服务文件的浏览器caching，并没有问题。
请“包含”控制器和控制器中调用的控制器和function所在的模块。
module(theModule);
当你使用ui-router的时候，你不应该在任何地方使用ng-controller。 您的控制器在其适当的状态被激活时自动实例化为UI视图。
