Ошибка AngularJS: $ injector:неизвестный поставщик unpr
Я пытаюсь создать свой собственный сервис, следуя примеру в документации по заводской методологии. Я думаю, что я сделал что-то неправильно, однако, потому что я продолжаю получать неизвестную ошибку поставщика. Это мой код для моего приложения, включая объявление, конфигурацию и заводское определение.
изменить Теперь я добавил Все файлы, чтобы помочь устранить неполадки
изменить Полная информация об ошибке ниже проблем, как представляется, будет с 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 ""
}]);
директивы.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>
может кто-нибудь указать мне в правильном направлении? Я сделал все возможное, чтобы следить за документацией, и поэтому большинство связанных с этим вопросов гораздо глубже и сложнее для меня понять. Я впервые создаю сервис.
11 ответов
ваш угловой модуль должен быть правильно инициализирован. Глобальный объект 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 .
изменить:
контроллер.js: вход, не возвращайте ""
эта ошибка также появляется, когда один accidntally впрыскивает $объем в ихние фабрики:
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>
услуги.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 )
вы должны привязать свой сервис к новому модулю в сервисах.JS-файл и, конечно же, вы должны использовать этот новый модуль при создании своего основной модуль приложения (app.js), а также объявить использование службы в контроллере, в котором вы хотите ее использовать.
Я получал эту проблему, и оказалось, что я включил свой контроллер как в ui.маршрутизатор и в шаблоне 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 Я просто попробовал это, очень простой пример:
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
});
}))
в моем случае я добавил новую службу (файл) в свое приложение. Эта новая служба вводится в существующий контроллер. Я не пропустил новую инъекцию зависимостей службы в этот существующий контроллер и не объявил мой модуль приложения не более чем в одном месте. Такое же исключение возникает при повторном запуске веб-приложения и кэша браузера не сбрасывается С новыми кодами файлов сервиса. Я просто обновил свой браузер, чтобы получить этот новый файл службы для кэша браузера, и проблема была ушедший.
когда вы используете ui-маршрутизатор, вы не должны использовать ng-контроллер нигде. Контроллеры автоматически создаются для пользовательского интерфейса при активации соответствующих состояний.