Dependency Injektion Hölle, was wird erwartet?

Question

Ich versuche, Komponenten in mehrere Dateien für eine einfache Anwendung zu trennen, aber Winkelabhängigkeit Injektor gibt mir Kopfschmerzen und ich weiß nicht wirklich, was erwartet wird.

Unknown provider: servicesProvider <- services <- maincontroller 

Ist der Fehler, den ich bekomme.

app.js

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

services.js

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

controllers.js

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

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



    }; 
}); 

Und die sind, um in index.html

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

Sieht gut für mich aus. Ich weiß, dass dies vielleicht nicht der beste Weg ist, Dinge zu organisieren, aber es wäre nett, zuerst eine "Hallo Welt" zu bekommen.

Danke.

Answer 1

Fehlermeldung in der Konsole erscheinen, sagt deutlich, dass services Abhängigkeit existiert nicht in dem Modul.

Sie falschen Dienstnamen in maincontroller Controller Factory Funktion gespritzt haben, im Grunde haben Sie versucht services (Modulnamen) anstelle von xrmservice (Servicename)

function ($scope, services, utils) { 

sein soll, zu injizieren

function ($scope, xrmservice, utils) { 

---

Addition al

Do Inline Array Annotation von DI folgen, wie Sie bereits das gleiche in Ihrem xrmservice Service JS-Datei verwendet wurden, so dass in Zukunft müssen Sie das nicht gehen Sie zurück und ändern, wenn Sie Javascript Gesicht minification damit zusammenhängende Fragen .

-Controller

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

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

Answer 2

Obwohl Sie sie in das Modul gespritzt haben, müssen Sie sie an die Funktion geben, so dass Sie die injizierten Module

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


    }; 
}]);