Angularjs - 我在注射方面做错了什么？

Question

在我之前的问题中，我得到了一个关于注入依赖关系的热门答案，在测试它时，一切都很好。然后我重构了代码，想启动应用程序实现，但注入停止了：(http://jsbin.com/alemik/1/edit

除了jsbin之外，以下是来源：

var ABCS = angular.module("ABCS", []);
ABCS.Configuration = angular.module('ABCS.Configuration', []);
ABCS.Controllers = angular.module('ABCS.Controllers', []);
ABCS.Modules = angular.module("ABCS.Modules", []);
ABCS.Services = angular.module("ABCS.Services", []);
ABCS.run(["$rootScope", "$location", "ABCS.Services.LogService",
         function ($rootScope, $location, logger) {
             logger.log("app start");
         }]);
ABCS.Configuration.factory("Environment", function () {
    return {
        logOutputElementId: "output",
        hasConsole: console && console.log
    }
});
//Log service
ABCS.Services.LogService = function (config) {
    this.log = function (message) {
        if (typeof (config.Environment.logOutputElementId) === "string") {
            document.getElementById(config.Environment.logOutputElementId).innerHTML += message + "<br/>";
        }
        else if (config.Environment.hasConsole) {
            console.log(message);
        }
        else {
            alert(message);
        }
    };
};
ABCS.Services.LogService.$inject = ["ABCS.Configuration"];
ABCS.Services.factory("ABCS.Services.LogService", ABCS.Services.LogService);

我想念什么？为什么ABCS.Services.LogService不能在当前结构中注入。

感谢

Answer 1

当您有几个模块时，您需要确保声明模块的依赖关系。这告诉依赖项注入器在查找提供程序时查看这些模块。

var ABCS = angular.module("ABCS", [
    'ABCS.Services', 'ABCS.Configuration', 'ABCS.Controllers',
    'ABCS.Modules', 'ABCS.Services'
]);

我不得不再做一些调整才能让它发挥作用：

• 依赖项注入器不会注入整个模块，因此ABCS.Services.LogService.$inject = ["ABCS.Configuration"];不起作用。我已经将其更改为ABCS.Services.LogService.$inject = ["ABCS.Configuration.Environment"];，并调整了相关的工厂，以符合您的命名约定
• factory接受一个函数，但不会将其作为构造函数调用，因此在LogService的定义中使用this不会像你期望的那样起作用。我已经更改了你的工厂函数，定义了一个构造函数，然后将其实例化并返回

请在此处查看工作版本：http://jsbin.com/alemik/2/edit

Answer 2

在我看来，这就是angularJS做事的方式（尽管我保留了所有的DI定义）：

angular.module("ABCS", ['ABCS.Services', 'ABCS.Configuration', 'ABCS.Controllers', 'ABCS.Modules', 'ABCS.Services']);
angular.module('ABCS.Configuration', []);
angular.module('ABCS.Controllers', []);
angular.module("ABCS.Modules", []);
angular.module("ABCS.Services", []);
angular.module("ABCS").run(["$rootScope", "$location", "ABCS.Services.LogService",
         function ($rootScope, $location, logger) {
             logger.log("app start");
         }]);
angular.module('ABCS.Configuration').factory("ABCS.Configuration.Environment", function () {
    return {
        logOutputElementId: "output",
        hasConsole: console && console.log
    };
});
angular.module("ABCS.Services").factory("ABCS.Services.LogService",["ABCS.Configuration.Environment",function (environment) {
  function LogService() {
    this.log = function (message) {
        if (typeof (environment.logOutputElementId) === "string") {
            document.getElementById(environment.logOutputElementId).innerHTML += message + "<br/>";
        }
        else if (environment.hasConsole) {
            console.log(message);
        }
        else {
            alert(message);
        }
    }
  }
  return new LogService();
}]);

angularJS允许在多个文件中重新打开模块定义，除非对象与angularJS应用程序不紧密，否则javascript名称空间是完全不必要的。

混合使用javascript名称空间和DI名称空间使代码更容易出错，而不是更易于维护。