javascript - 依赖注入(inject) hell ，期望什么？

Question

我正在尝试将一个简单应用程序的组件分成几个文件，但 Angular 的依赖注入(inject)器让我头疼，而且我真的不知道期望什么。

Unknown provider: servicesProvider <- services <- maincontroller

这是我遇到的错误。

app.js

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

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

Controller .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>

我觉得不错。我知道这也许不是最好的组织方式，但首先得到一个“Hello world”会很好。

谢谢。

Answer 1

Error message appearing in console clearly says that, services dependency isn't exists in the module.

您在maincontroller Controller 工厂函数中注入(inject)了错误的服务名称，基本上您试图注入(inject)services(模块名称)而不是xrmservice(服务名称)

function ($scope, services, utils) {

应该是

function ($scope, xrmservice, utils) {

<小时/>

附加

请遵循 DI 的内联数组注释，因为您已经在 xrmservice 服务 JS 文件中使用了相同的注释，这样将来当您遇到问题时就不需要返回并更改它javascript 缩小相关问题。

Controller

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

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