Injection de dépendance enfer, qu'est-ce qui est attendu?

Question

J'essaie de séparer les composants en plusieurs fichiers pour une application simple mais l'injecteur de dépendance d'angular me donne des maux de tête et je ne sais pas vraiment ce qui est attendu.

Unknown provider: servicesProvider <- services <- maincontroller 

Est-ce l'erreur que j'obtiens.

app.js

//Application definition with injected dependencies 
var app = angular.module('leadcapacity', ['services', 'utils', 'customfilters', 'controllers']); 

de

var services = angular.module('services', []); 

services.service('xrmservice', 
[ 
    '$http', function($http) { 

     var oDataUrl = Xrm.Page.context.getClientUrl() + '/XRMServices/2011/OrganizationData.svc/'; 
     var service = {}; 

     service.query = function(entitySet, query) { 
      return $http.get(oDataUrl + entitySet + '?' + query); 
     }; 

     return service; 
    } 
]); 

de controllers.js

var ctrls = angular.module('controllers', ['utils', 'services']); 

ctrls.controller('maincontroller', 
    function ($scope, services, utils) { 



    }; 
}); 

Et l'inclure dans l'ordre index.html

<script src="service.js"></script> 
<script src="controllers.js"></script> 
<script src="app.js"></script> 

Cela me semble bien. Je sais que ce n'est peut-être pas la meilleure façon d'organiser les choses, mais obtenir un "Hello world" d'abord serait bien.

Merci.

Answer 1

message d'erreur qui apparaît dans la console indique clairement que, services dépendance est existe pas dans le module.

Vous avez injecté le nom de service incorrect dans maincontroller fonction usine de contrôleur, essentiellement que vous essayez de d'injecter services (nom du module) au lieu de xrmservice (nom du service)

function ($scope, services, utils) { 

devrait être

function ($scope, xrmservice, utils) { 

---

Addition al

Do suivre l'annotation Array Inline de DI, comme vous étiez déjà utilisé le même dans votre fichier JS service xrmservice, de sorte qu'à l'avenir, vous ne avez pas besoin de revenir en arrière et changer que lorsque vous faites face à javascript questions minification connexes .

Contrôleur

ctrls.controller('maincontroller', [ '$scope', 'xrmservice', 'utils', 
    function ($scope, xrmservice, utils) { 

     //code goes here 
     //.... 
    }; 
}]); 

Answer 2

Bien que vous les avez injecté dans le module, vous devez leur donner à la fonction de sorte que vous pouvez utiliser les modules injectés

ctrls.controller('maincontroller', 
    ['$scope', 'services', 'utils', function ($scope, services, utils) { 


    }; 
}]);