Question

In my previous 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接受一个函数，但不会将其称为构造函数，因此在this的定义中使用LogService将不会像您期望的那样行事。我已经改变了你的工厂函数来定义一个构造函数，然后实例化并返回它。

在此处查看有效版本：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允许在多个文件中重新打开模块定义，并且javascript命名空间是完全不必要的，除非该对象对angularJS应用程序不紧密。

混合使用javascript命名空间和DI命名空间会使代码更容易出错，而且更难以管理。

Angularjs - 我注射的错误是什么？

2 个答案: