依赖注入地狱，期望什么？

Question

我正在尝试将组件分成几个文件以用于一个简单的应用程序，但是 angular 的依赖注入器让我很头疼，我真的不知道期望的是什么。

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>

我觉得不错。我知道这可能不是组织事物的最佳方式，但先获得 "Hello world" 会很好。

谢谢。

Answer 1

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

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

function ($scope, services, utils) {

应该是

function ($scope, xrmservice, utils) {

额外

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

控制器

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

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

Answer 2

虽然你已经将它们注入到模块中，但你需要将它们提供给函数，这样你才能使用注入的模块

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


    };
}]);

依赖注入地狱，期望什么？

Dependency injection hell, what is expected?

javascript

dependency-injection

angularjs

angularjs-service