Ошибка AngularJS: $injector: unpr Неизвестный поставщик

Я пытаюсь создать свою собственную службу, следуя примеру документации для методологии factory. Я думаю, что я сделал что-то не так, потому что я продолжаю получать неизвестную ошибку провайдера. Это мой код для моего приложения, включая определение декларации, конфигурации и factory.

ИЗМЕНИТЬ Теперь я добавил все файлы, чтобы помочь устранить неполадки

ИЗМЕНИТЬ Полная информация об ошибке ниже проблем, связанных с 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;
    };
}]);

И вот как я использую эту службу в своем контроллере

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>

Может ли кто-нибудь указать мне в правильном направлении? Я сделал все возможное, чтобы следить за документацией, и, глядя через SO, большинство связанных с этим вопросов гораздо глубже, и мне труднее понять. Это мой первый раз, когда вы создаете сервис.

Ответы

Ответ 1

Ваш модуль 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 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-страницы, поскольку это стандартная практика, которая будет следовать по соображениям производительности.

Я надеюсь, что это решит вашу проблему с базовыми инъекциями.

Ответ 2

также одна из популярных причин, пожалуй, вам не хватает включить служебный файл на своей странице

<script src="myservice.js"></script>

Ответ 3

app.factory('getSettings', ['$http','$q' /*here!!!*/,function($http, $q) {

вам нужно объявить ВСЕ ваши зависимости OR none, и вы забыли объявить $q.

изменить:

controller.js: login, dont return ""

Ответ 4

Эта ошибка также появляется, когда один accidntally вводит $scope в свои factory:

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

Убедитесь, что вы загрузили контроллер вне 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
        });
}))

Ответ 10

В моем случае я добавил новую службу (файл) в свое приложение. Эта новая услуга вводится в существующий контроллер. Я не пропустил новую инъекцию зависимости от службы в этом существующем контроллере и не объявлял мой модуль приложения не более чем одним местом. Такое же исключение возникает при повторном запуске моего веб-приложения, а кеш браузера не reset с новыми кодами файлов сервисов. Я просто обновил свой браузер, чтобы получить этот новый служебный файл для кеша браузера, и проблема исчезла.

Ответ 11

Так как это первый вопрос Stackoverflow, который появляется в 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

Когда вы используете ui-router, вы не должны использовать ng-controller в любом месте. Ваши контроллеры автоматически создаются для ui-view, когда активируются соответствующие им состояния.