依存性注入地獄、何が期待されていますか？

Question

私は簡単なアプリケーションのためにコンポーネントをいくつかのファイルに分けようとしていますが、角度の依存性インジェクタは私に頭痛を与えています。

Unknown provider: servicesProvider <- services <- maincontroller 

エラーが表示されます。

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



    }; 
}); 

そしてindex.html

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

順序を含めます

私にはうまく見えます。私はこれがおそらく物事を整理する最良の方法ではないことを知っていますが、最初に「こんにちはの世界」を得ることはいいと思います。

ありがとうございました。

Answer 1

コンソールに表示されるエラーメッセージには、明らかに、モジュールにはservices の依存関係はありません。あなたは基本的にあなたの代わりにxrmserviceのservices（モジュール名）を注入するためにしようとしていた（サービス名）

function ($scope, services, utils) { 

が

function ($scope, xrmservice, utils) { 

する必要があり、 maincontrollerコントローラファクトリ関数で間違ったサービス名を注入している

---

加算アル

は、すでにあなたのxrmserviceサービスJSファイルに同じを使用したとして、あなたはjavascriptの縮小に関連する問題に直面したときに、将来的にあなたが戻っていることを変更する必要がないように、DIのインライン配列のアノテーションに従っています。

コントローラ

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

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

Answer 2

あなたがモジュールにそれらを注入しているが、あなたは、これは奇妙ですOK

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


    }; 
}]);