Angular Неизвестный поставщик js

Я пытаюсь "настроить" пример mongolab, чтобы он соответствовал моему собственному REST API. Теперь я сталкиваюсь с этой ошибкой, и я не уверен, что я делаю неправильно:

Error: Unknown provider: ProductProvider <- Product
    at Error (unknown source)
    at http://localhost:3000/js/vendor/angular.min.js:28:395
    at Object.c [as get] (http://localhost:3000/js/vendor/angular.min.js:26:180)
    at http://localhost:3000/js/vendor/angular.min.js:28:476
    at c (http://localhost:3000/js/vendor/angular.min.js:26:180)
    at d (http://localhost:3000/js/vendor/angular.min.js:26:314)

Это мой контроллер:

function ProductListCtrl($scope, Product) {
  $scope.products = Product.query();
}

и это модуль:

angular.module('productServices', ['ngResource']).
    factory('Product', ['$resource', function($resource){
      var Product = $resource('/api/products/:id', {  }, {
        update: { method: 'PUT' }
      });

      return Product;
    }]);

ОТВЕТЫ

Ответ 1

Ваш код выглядит хорошо, на самом деле он работает (помимо самих вызовов) при копировании и вставке в образец jsFiddle: http://jsfiddle.net/VGaWD/

Трудно сказать, что происходит, не видя более полного примера, но я надеюсь, что вышеупомянутый jsFiddle будет полезен. Я подозреваю, что вы не инициализируете свое приложение с помощью модуля productServices. Это даст ту же ошибку, мы можем увидеть это в другом jsFiddle: http://jsfiddle.net/a69nX/1/

Если вы планируете работать с AngularJS и MongoLab , я бы предложил использовать существующий адаптер для $resource и MongoLab: https://github.com/pkozlowski-opensource/angularjs-mongolab Это облегчает боль, воздействующую на MongoLab, вы можете увидеть ее в действии здесь: http://jsfiddle.net/pkozlowski_opensource/DP4Rh/ Отказ от ответственности! Я поддерживаю этот адаптер (написанный на основе примеров AngularJS), поэтому я явно предвзято здесь.

Ответ 2

Я получил эту ошибку, потому что я передавал неправильный параметр в определение factory. У меня было:

myModule.factory('myService', function($scope, $http)...

Он работал, когда я удалил $scope и изменил определение factory на:

myModule.factory('myService', function( $http)...

Если вам нужно ввести $scope, используйте:

myModule.factory('myService', function($rootScope, $http)...

Ответ 3

У меня была аналогичная проблема. Ошибка сказала то же самое в вопросе, попыталась решить его с ответом pkozlowski.opensource и Ben G, которые оба являются правильными и хорошими ответами.

Моя проблема была по-разному с той же ошибкой:

в моем HTML-коде. У меня была инициализация вроде этого...

<html ng-app>

Немного дальше, я попытался сделать что-то вроде этого:

<div id="cartView" ng-app="myApp" ng-controller="CartCtrl">

Я избавился от первого... тогда это сработало... Очевидно, вы не можете инициализировать ng-приложение два или более раз. достаточно справедливо.

Я полностью забыл о первом "ng-приложении" и получил полное разочарование. Может быть, это поможет кому-то помочь...

Ответ 4

Убедитесь, что ваш основной app.js включает службы, от которых это зависит. Например:

/* App Module */
angular.module('myApp', ['productServices']). 
.....

Ответ 5

pkozlowski ответ правильный, но на всякий случай это случается с кем-то другим, у меня была такая же ошибка после создания того же модуля дважды по ошибке; второе определение переопределяло провайдера первого:

Я создал модуль, выполнив

angular.module('MyService'...
).factory(...);

затем немного дальше в том же файле:

angular.module('MyService'...
).value('version','0.1');

Правильный способ сделать это:

angular.module('MyService'...
).factory(...).value('version','0.1');

Ответ 6

В моем случае я определил нового провайдера, скажем, xyz

angular.module('test')
.provider('xyz', function () {
    ....
});

Когда вы должны были сконфигурировать вышеперечисленного провайдера, вы должны ввести его с помощью Provider string added → xyz станет xyzProvider.

Пример:

angular.module('App', ['test'])
.config(function (xyzProvider) {
     // do something with xyzProvider....
});

Если вы введете вышеупомянутый провайдер без строки "Provider", вы получите аналогичную ошибку в OP.

Ответ 7

В конце JS файла для закрытия функции factory у меня было

});

вместо

}());

Ответ 8

Для меня эта ошибка была вызвана запуском мини-версии моего приложения angular. angular docs предлагают способ обойти это. Ниже приведена соответствующая цитата, описывающая проблему, и вы можете найти предлагаемое решение в самих документах здесь:

Примечание по вопросам минимизации Поскольку angular отображает зависимости контроллера от имен аргументов функции конструктора контроллера, если вы хотите минимизировать код JavaScript для контроллера PhoneListCtrl, все его аргументы функции также будут уменьшены, а инжектор зависимостей не сможет для правильной идентификации служб.

Ответ 9

Это заняло слишком много времени, чтобы отследить. Удостоверьтесь, что вы minisafe ваш контроллер в пределах вашей директивы.

.directive('my_directive', ['injected_item', function (injected_item){

  return {

    controller: ['DO_IT_HERE_TOO', function(DO_IT_HERE_TOO){

    }]
  }
}

Надеюсь, что поможет

Ответ 10

Чтобы добавить свой собственный опыт здесь, я пытался внедрить услугу в одну из моих конфигурационных функций модуля. Этот абзац из документов, которые я в конце концов нашел, объясняет, почему это не работает:

Во время загрузки приложения перед Angular отключается создание всех служб, оно настраивает и создает экземпляры всех поставщиков. Мы называем это фазой конфигурации жизненного цикла приложения. На этом этапе службы недоступны, поскольку они еще не созданы.

Значение вы можете вводить поставщикам в функции module.config(...), но вы не можете вводить услуги, для этого вам нужно подождать до module.run(...) или выставить поставщика, который вы можете ввести to module.config

Ответ 11

Так как это главный результат для "неопределенного провайдера angularjs" в Google прямо сейчас, здесь еще есть. При выполнении модульного тестирования с помощью Jasmine убедитесь, что у вас есть это утверждение в вашей функции beforeEach():

module('moduleName');

В противном случае вы получите эту же ошибку в своих тестах.

Ответ 12

Еще один случай, когда эта ошибка произойдет, если вы являетесь сервисом, определенным в отдельном файле javascript, убедитесь, что вы ссылаетесь на него! Да, я знаю, ошибка новобранец.

Ответ 13

Для меня проблема была ленивая; Я загрузил мой контроллер и службу поздно, поэтому они не были доступны при загрузке страницы (и Angular инициализации). Я сделал это с тегом ui-if, но это не имеет значения. Решение заключалось в том, чтобы загрузить службу с загрузкой страницы уже.

Ответ 14

Вот еще один возможный сценарий, где вы можете увидеть эту ошибку:

Если вы используете Sublime Text 2 и плагин angular, он будет генерировать заглушки, подобные этому

angular.module('utils', [])
.factory('utilFactory', [''
    function() {
        return {

        }
    }
]);

обратите внимание на пустой '' как первый элемент массива после строки 'utilFactory'. Если у вас нет зависимостей, удалите это так:

angular.module('utils', [])
.factory('utilFactory', [
    function() {
        return {

        }
    }
]);

Ответ 15

Я забыл приложить файл, в котором мои службы вообще были. Не забудьте сделать это при инициализации вашего модуля приложения:

angular.module('myApp', ['myApp.services', ... ]);

Ответ 16

Поскольку этот вопрос является верным результатом Google, я добавлю еще одну возможную вещь в список.

Если модуль, который вы используете, имеет сбой в оболочке инъекции зависимостей, он предоставит такой же результат. Например, модули копирования и вставки из Интернета могут полагаться на underscore.js и пытаться вставлять "_" в обертку di. Если подчеркивание не существует в ваших поставщиках зависимостей проекта, когда ваш контроллер пытается ссылаться на ваш модуль factory, он получит "неизвестный поставщик" для вашего factory в журнале консоли браузера.

Ответ 17

Проблема для меня заключалась в том, что были некоторые новые файлы javascript, которые я создал, которые ссылались на службу, но Chrome видел только более старую версию. CTRL + F5 исправил это для меня.

Ответ 18

В моем случае я использовал анонимную функцию в качестве обертки для модуля angular, например:

(function () {
var app = angular.module('myModule', []);
...
})();

После закрытия круглой скобки я забыл вызвать анонимную функцию, открыв и закрыв круглые скобки снова, как указано выше.

Ответ 19

При компиляции моего проекта с Grunt у меня возникла ошибка "неизвестного провайдера", связанная с angular -mocks (ngMockE2E). Проблема заключалась в том, что angular -mocks не может быть уменьшен, поэтому мне пришлось удалить его из списка мини файлов.

Ответ 20

В моем приложении Ruby on Rails я сделал следующее:

rake assets:precompile

Это было сделано в среде разработки, которая минимизировала Angular.js и включила ее в файл /public/assets/application.js.

Удаление файлов /public/assets/* решило проблему для меня.

Ответ 21

После обработки этой ошибки я также могу поддерживать этот список ответов в своем собственном случае.

В то же время простой и немой (возможно, не тупой для начинающих, как я, но да для экспертов), ссылка script на angular.min.js должна быть первой в вашем списке скриптов в html-страницу.

Это работает:

<script src="Scripts/angular.min.js"></script>
<script src="MyScripts/MyCartController.js"></script>
<script src="MyScripts/MyShoppingModule.js"></script>

Это не:

<script src="MyScripts/MyCartController.js"></script>
<script src="MyScripts/MyShoppingModule.js"></script>
<script src="Scripts/angular.min.js"></script>

Обратите внимание на angular.min.js.

Надеюсь, это поможет любому!:)

Ответ 22

Моя проблема была с Йоменом, используя (заглавными):

yo angular:factory Test

Сделанные файлы (некапитализированные):

app/scripts/services/test.js

но файл index.html включен (с заглавной буквы):

<script src="scripts/services/Test.js"></script>

Надеюсь, это поможет кому-то.

Ответ 23

Еще одна возможность.

У меня было unknown Provider <- <- nameOfMyService. Ошибка вызвана следующим синтаксисом:

module.factory(['', function() { ... }]);

Angular искал зависимость ''.

Ответ 24

Мой сценарий может быть немного неясным, но он может вызвать ту же ошибку, и кто-то может испытать это, поэтому:

При использовании службы $controller для создания нового контроллера (который ожидал "$ scope", поскольку он впервые ввел аргумент), я передавал новую локальную локацию контроллера в второй параметр функции $controller(). Это приводит к тому, что Angular пытается вызвать службу $scope, которая не существует (хотя на некоторое время я действительно думал, что мне удастся удалить службу $scope из кэша Angular). Решение состоит в том, чтобы обернуть локальную область в объекте locals:

// Bad:
$controller('myController', newScope);

// Good:
$controller('myController, {$scope: newScope});

Ответ 25

Ни один из ответов выше не работал у меня, может быть, я делал совершенно неправильно, но как новичок, что мы делаем.

Я инициализировал контроллер в div, чтобы иметь список:

 <div ng-controller="CategoryController" ng-init="initialize()">

И затем используя $routeProvider, чтобы сопоставить URL-адрес с одним и тем же контроллером. Как только я удалил ng-init, контроллер работал с маршрутом.

Ответ 26

У меня была такая же проблема. Я исправил это, используя $('body').attr("ng-app", 'MyApp') вместо <body ng-app="MyApp"> для повышения.

Потому что я сделал

angular.element(document).ready(function () {        
    angular.bootstrap(document, [App.Config.Settings.AppName]);
})

для требований к архитектуре.

Ответ 27

Сегодня я столкнулся с подобной проблемой, и проблемы были действительно очень маленькими

 app.directive('removeFriend', function($scope) {
return {
    restrict: 'E',
    templateUrl: 'removeFriend.html',
    controller: function($scope) {
        $scope.removing = false;
        $scope.startRemove = function() {
            $scope.removing = true;
        }
        $scope.cancelRemove = function() {
            $scope.removing = false;
        }
        $scope.removeFriend = function(friend) {
            var idx = $scope.user.friends.indexOf(friend)
            if (idx > -1) {
                $scope.user.friends.splice(idx, 1);
            }
        }
    }
}
});

Если вы заметили вышеприведенный блок, в первой строке вы заметите, что я ошибочно ввел $scope по ошибке. Я удалил эту нежелательную зависимость, чтобы решить проблему.

 app.directive('removeFriend', function() {
return {
    restrict: 'E',
    templateUrl: 'removeFriend.html',
    controller: function($scope) {
        $scope.removing = false;
        $scope.startRemove = function() {
            $scope.removing = true;
        }
        $scope.cancelRemove = function() {
            $scope.removing = false;
        }
        $scope.removeFriend = function(friend) {
            var idx = $scope.user.friends.indexOf(friend)
            if (idx > -1) {
                $scope.user.friends.splice(idx, 1);
            }
        }
    }
}
});

Ответ 28

Еще одна "gotcha": я получал эту ошибку, впрыскивая $timeout, и потребовалось несколько минут, чтобы понять, что у меня есть пробелы в значениях массива. Это не сработает:

angular.module('myapp',[].
  controller('myCtrl', ['$scope', '$timeout ', 
    function ($scope, $timeout){
      //controller logic
    }
  ]);

Проводка на случай, если у какого-либо другого есть такая глупая ошибка.

Ответ 29

Мое дело было хитрое печатание

myApp.factory('Notify',funtion(){
Функция

имеет 'c'!