依赖注入地狱，期待什么？答案

【问题标题】：Dependency injection hell, what is expected?依赖注入地狱，期待什么？
【发布时间】：2016-10-18 04:55:24
【问题描述】：

我正在尝试将组件分成几个文件以用于一个简单的应用程序，但 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”会很好。

谢谢。

【问题讨论】：

标签： javascript angularjs dependency-injection angularjs-service

【解决方案1】：

控制台中出现的错误消息清楚地表明，services 模块中不存在依赖项。

你在maincontroller控制器工厂函数中注入了不正确的服务名称，基本上你试图注入services（模块名称）而不是xrmservice（服务名称）

function ($scope, services, utils) {

应该是

function ($scope, xrmservice, utils) {

附加

请遵循 DI 的 Inline Array 注释，因为您已经在 xrmservice 服务 JS 文件中使用了相同的注释，因此将来您在遇到与 javascript 缩小相关的问题时无需返回并更改它。

控制器

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

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

【讨论】：

好吧，这很奇怪。我以为我可以在控制器中访问services.xrmservice。谢谢。
np。很高兴知道它有帮助，谢谢:-)

【解决方案2】：

虽然您已将它们注入到模块中，但您需要将它们提供给函数，以便您可以使用注入的模块

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


    };
}]);

【讨论】：