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 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名稱空間會使代碼更易於出錯，而不是易於維護。