0

在我之前的问题中，我得到了一个关于注入依赖项的热门答案，当我对其进行测试时，一切都运行良好。然后我重构了代码并想启动应用程序实现，但注入停止工作:( 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。

谢谢

4

2 回答 2

2

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

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

于 2013-02-04T19:34:08.157 回答
1

在我看来，这就是 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 命名空间使代码更容易出错，而不是更易于维护。

于 2013-02-04T19:58:15.870 回答