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 を使用すると、複数のファイルでモジュール定義を再度開くことができます。また、オブジェクトが angularJS アプリケーションに厳密でない限り、JavaScript の名前空間はまったく不要です。

JavaScript 名前空間と DI 名前空間を混在させると、コードのエラーが発生しやすくなり、保守しにくくなります。

于 2013-02-04T19:58:15.870 に答える