AngularJS Erreur: $injecteur:unpr Inconnu Fournisseur

Je suis en train de construire mon propre service, en suivant l'exemple dans la documentation de l'usine de la méthodologie. Je pense que j'ai fait quelque chose de mal mais parce que je continue à mettre l'inconnu fournisseur d'erreur. C'est mon code de mon application, y compris la déclaration, de la configuration et de l'usine de définition.

MODIFIER
J'ai maintenant ajouté tous les fichiers pour vous aider à résoudre

MODIFIER
Les détails de l'erreur ci-dessous sont les questions semble être avec getSettings, comme il est à la recherche de getSettingsProvider et ne peut pas trouver il

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

Ce sont tous les fichiers que j'ai dans mon application actuellement

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;
    };
}]);

Et voici comment je me sers de ce service dans mon contrôleur

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';
                });
            });
        }
    };
});

Et si c'est pertinent voici le code 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>

Quelqu'un peut me pointer dans la bonne direction? J'ai fait de mon mieux pour suivre la documentation, et en regardant à travers de SORTE que la plupart des questions connexes sont beaucoup plus en profondeur, et de plus en plus difficile pour moi de comprendre. C'est ma première fois de la création d'un service.

L'erreur est de fournir vous avec l'inconnu fournisseurs de nom? Il y a généralement une valeur de chaîne dans l'erreur.
Dans votre console, vous devez être en mesure de cliquer sur l'inconnu fournisseur de message d'erreur, qui vous mènera à une Angulaires page vous donnant plus d'informations sur l'erreur. Il pourrait être utile pour vous de poster cette info dans votre question.
Désolé de ne pas avoir tous les détails au début, j'essayais de garder la question concise, cependant j'ai maintenant fourni tous les détails que j'ai sur la question
u peut marquer si le problème est résolu ?
Pour ceux qui viennent sur ce problème (le premier dans Google), cette réponse à une question similaire il fixe pour moi: stackoverflow.com/a/25193243/556006

InformationsquelleAutor richbai90 | 2014-05-29

Angulaire de votre module doit être initialisé correctement. L'objet global app doit être défini et initialisé correctement pour injecter le service.

Veuillez voir ci-dessous un exemple de code de référence:

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;
  });
}]);

Exemple de code HTML devrait être comme ceci:

<!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>

Veuillez noter que le contrôleur n'est pas contraignant à une balise HTML, mais à la balise body. Aussi, s'il vous plaît essayez d'inclure vos scripts personnalisés à la fin de la page HTML que c'est une pratique standard à suivre pour des raisons de performances.

J'espère que cela va résoudre votre problème d'injection.

Je ne vois pas ce que vous avez fait dans votre échantillon que je n'ai pas fait et montré dans cette question, pouvez-vous être plus précis svp?
J'ai mis à jour la réponse avec les commentaires appropriés. J'espère que cela va résoudre votre problème.
Merci, vous me sauver, j'ai passé 12 heures à la recherche et le problème était que ['$routeProvider', était manquant entre app.config et function

InformationsquelleAutor Kunal Shewale

38

aussi l'un des motifs populaires peut-être que vous manquez d'inclure le service de fichier dans votre page
```
<script src="myservice.js"></script>
```
- Merci!!!! J'ai passé d'innombrables heures à cause de cela.
- une heure de surfer sur les résultats, et ici vous allez. Stupide erreur. Merci.
InformationsquelleAutor Hasan Daghash
9
```
app.factory('getSettings', ['$http','$q' /*here!!!*/,function($http, $q) {
```
vous devez déclarer TOUS vos dépendances OU aucun et vous avez oublié de déclarer q$.

edit:

controller.js : connectez-vous, ne pas revenir ""
- Je vois que j'ai manqué, donc j'ai mis à jour mon code pour inclure, mais toujours obtenir la même erreur. J'ai mis à jour la question de donner une meilleure vue de tout mon code
- avez-vous mis le contenu de app.js,directive.js et service.js ? parce que je ne peux pas deviner ce qui est à l'intérieur de ces fichiers.
- J'ai ajouté tous les fichiers
InformationsquelleAutor mpm

Cette erreur est également visible lorsque l'on accidntally injecte $portée dans leur usine:

angular.module('m', [])
    .factory('util', function ($scope) { //<-- this '$scope' gives 'Unknown provider' when one attempts to inject 'util'
       //...
    });

cela m'a bien aidé

InformationsquelleAutor Dfr

3

Passé quelques heures à essayer de résoudre le même. C'est la façon dont je l'ai fait:

app.js:
```
var myApp = angular.module( 'myApp', ['ngRoute', 'ngResource', 'CustomServices'] );
```
CustomServices est un nouveau module que j'ai créé et placé dans un fichier séparé appelé 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 )
```
Vous devez lier votre service pour votre nouveau module dans l'services.js fichier ET bien sûr, vous devez utiliser ce nouveau module dans la création de votre application principale du module (app.js) ET également déclarer l'utilisation du service dans le contrôleur que vous souhaitez utiliser.

InformationsquelleAutor Habil Kantur

Je recevais ce problème et il s'est avéré que j'avais inclus dans mon contrôleur à la fois dans l'interface utilisateur.routeur et dans le modèle html comme dans

.config(['$stateProvider',
  function($stateProvider) {
    $stateProvider.state('dashboard', {
      url: '/dashboard',
      templateUrl: 'dashboard/views/index.html',
      controller: 'DashboardController'
    });
  }
]);

<section data-ng-controller="DashboardController">

InformationsquelleAutor Leo

1

Veuillez inclure", à la fois Contrôleur et le module(s) où le contrôleur et les fonctions appelées dans le Contrôleur.
```
module(theModule);
```
InformationsquelleAutor fresko

@ user2310334
J'ai juste essayé de cela, un exemple TRÈS simple:

Fichier 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>

Le fichier 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);
}]);

Et il fonctionne. L'essayer.

InformationsquelleAutor Franz1986

Assurez-vous que vous chargez contrôleur à l'extérieurapp.config. Le code suivant peut provoquer cette erreur:

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
        })
}))

Pour corriger cette erreur, nous devons aller de l'AuthCtrl à à l'extérieurapp.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
        });
}))

InformationsquelleAutor o0omycomputero0o

0

Dans mon cas, j'ai ajouté un nouveau service (fichier) pour mon application. Que nouveau service est injecté dans un contrôleur existant. Je n'ai pas manquer les nouveaux services de l'injection de dépendances dans le contrôleur existant et de ne pas déclarer mon application module de pas plus d'un endroit. La même exception est levée lorsque je ré-exécuter mon application web et mon cache du navigateur n'est pas réinitialisé avec un nouveau service fichier des codes. J'ai simplement actualisé mon navigateur pour obtenir ce nouveau service fichier de cache du navigateur, et le problème a disparu.

InformationsquelleAutor Thomas.Benz
0

Puisque c'est la première Stackoverflow question qui s'affiche sur Google lors de la recherche pour Error: $injector:unpr Unknown Provider je vais ajouter ici.

Assurez-vous que dans votre index.html tous les modules/dépendances ne sont pas en cours de chargement après ils sont nécessaires.

Par exemple dans mon code customFactory.factory.js commence comme ceci:
```
angular
   .module("app.module1")
   .factory("customFactory", customFactory);
```
Cependant l'index.html ressemblait à ceci:
```
    <script src="/src/client/app/customFactory.factory.js"></script>
    <script src="/src/client/app/module1.module.js"></script>
```
Où il devrait l'ai vraiment regardé comme ceci:
```
    <script src="/src/client/app/module1.module.js"></script>
    <script src="/src/client/app/customFactory.factory.js"></script>
```
Depuis customFactory.factory.js est déclaré dans le cadre de module1, il doit être chargé avant customFactory

InformationsquelleAutor mrOak
-2

Lorsque vous êtes à l'aide de l'interface utilisateur-routeur, vous ne devez pas utiliser ng-controller n'importe où. Vos contrôleurs sont automatiquement instanciés pour une ui-view lorsque leurs états appropriés sont activés.
- Ce n'est pas strictement vrai. C'est juste une bonne pratique pour les vues que l'utilisation d'un contrôleur unique. Que faire si vous voulez charger une vue qui utilise plusieurs contrôleurs?
InformationsquelleAutor Malav Panchal

Vous devez vous connecter pour publier un commentaire.