web-dev-qa-db-fra.com

Erreur AngularJS: $ injector: fournisseur inconnu

J'essaie de créer mon propre service en suivant l'exemple de la documentation de la méthodologie d'usine. Je pense cependant avoir fait quelque chose de mal parce que je continue à avoir l'erreur de fournisseur inconnu. Ceci est mon code pour mon application, y compris la déclaration, la configuration et la définition de la fabrique.

EDIT j'ai maintenant ajouté tous les fichiers pour aider à dépanner

EDIT Les détails complets de l'erreur sont ci-dessous les problèmes semblent être avec getSettings, car il cherche getSettingsProvider et ne le trouve pas

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 j'utilise 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 diriger dans la bonne direction? J'ai fait de mon mieux pour suivre la documentation et en parcourant SO, la plupart des problèmes qui y sont liés sont beaucoup plus approfondis et plus difficiles à comprendre pour moi. C'est la première fois que je crée un service.

javascriptangularjsangularjs-service
53
richbai90

Votre module angular 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 pour 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 ressembler à 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 ne lie pas à une balise HTML, mais à la balise body. Essayez également d'inclure vos scripts personnalisés à la fin de la page HTML car il s'agit d'une pratique standard à suivre pour des raisons de performances.

J'espère que cela résoudra votre problème d'injection de base.

32
Kunal Shewale

aussi l'une des raisons populaires peut-être vous manque-t-il d'inclure le fichier de service dans votre page

<script src="myservice.js"></script>
38
Hasan Daghash
app.factory('getSettings', ['$http','$q' /*here!!!*/,function($http, $q) {

vous devez déclarer TOUTES vos dépendances OR aucune et vous avez oublié de déclarer $ q.

modifier:

controller.js: login, ne retourne pas ""

9
mpm

Cette erreur apparaît également lorsqu’on injecte accidentellement $ scope dans leur usine:

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

J'ai passé quelques heures à essayer de résoudre le même problème. Voici comment 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 associer votre service à votre nouveau module dans le fichier services.js ET bien sûr, vous devez utiliser ce nouveau module lors de la création de votre module principal d'application (app.js) ET également déclarer l'utilisation du service dans le contrôleur. vous voulez l'utiliser dans.

3
Habil Kantur

J'avais ce problème et il s'est avéré que j'avais inclus mon contrôleur dans ui.router et dans le modèle html comme dans

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

et

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

Veuillez "inclure" à la fois le contrôleur et le (s) module (s) où se trouvent le contrôleur et les fonctions appelées dans le contrôleur.

module(theModule);
1
fresko

Comme il s'agit de la première question Stackoverflow qui apparaît sur Google lors de la recherche de Error: $injector:unpr Unknown Provider, je vais l'ajouter ici.

Assurez-vous que dans votre index.html les modules/dépendances ne sont pas chargés après leur utilisation.

Par exemple, dans mon code customFactory.factory.js commence comme ceci:

angular
   .module("app.module1")
   .factory("customFactory", customFactory);

Cependant, le fichier index.html ressemblait à ceci:

    <script src="/src/client/app/customFactory.factory.js"></script>
    <script src="/src/client/app/module1.module.js"></script>

Où cela aurait dû ressembler à ceci:

    <script src="/src/client/app/module1.module.js"></script>
    <script src="/src/client/app/customFactory.factory.js"></script>

Puisque customFactory.factory.js est déclaré comme faisant partie de module1, il doit être chargé avant customFactory.

0
mrOak

@ user2310334 Je viens d'essayer ceci, un exemple TRÈS basique:

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.

0
Franz1986

Dans mon cas, j'ai ajouté un nouveau service (fichier) à mon application. Ce nouveau service est injecté dans un contrôleur existant. Je n'ai pas manqué l'injection de nouvelles dépendances de service dans ce contrôleur existant et n'ai pas déclaré mon module d'application pas plus d'un endroit. La même exception est levée lorsque je réexécute mon application Web et le cache de mon navigateur n'est pas réinitialisé avec un nouveau code de fichier de service. J'ai simplement actualisé mon navigateur pour obtenir ce nouveau fichier de service pour le cache du navigateur, et le problème avait disparu.

0
Thomas.Benz

Assurez-vous de charger le contrôleur outsideapp.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 déplacer AuthCtrl vers outsideapp.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
        });
}))
0
o0omycomputero0o