15

遅延読み込みについてよく読んでいますが、$routeProvider を使用するときに問題に直面しています。

私の目標は、コントローラーを含む JavaScript ファイルをロードし、以前にロードされたこのコントローラーにルートを追加することです。

ロードする JavaScript ファイルの内容

angular.module('demoApp.modules').controller('MouseTestCtrlA', ['$scope', function ($scope) {
    console.log("MouseTestCtrlA");
    $scope.name = "MouseTestCtrlA";
}]);

このファイルは、angular ブートストラップが呼び出されたときに含まれません。つまり、ファイルをロードして、このコントローラーへのルートを作成する必要があります。

最初に、Javascript ファイルをロードする必要がある解決関数の作成を開始しました。しかし、ルート宣言でコントローラーパラメーターを宣言すると、エラーが発生しました:

「MouseTestCtrlA」は関数ではありません。未定義です

設定しようとしている呼び出しは次のとおりです。

demoApp.routeProvider.when(module.action, {templateUrl: module.template, controller: module.controller, resolve : {deps: function() /*load JS file*/} });

私が読んだことから、コントローラーパラメーターは登録済みコントローラーである必要があります

controller – {(string|function()=} – 新しく作成されたスコープまたは登録済みコントローラーの名前 (文字列として渡された場合) に関連付けるコントローラー fn。

そのため、ファイルをロードできるファクトリを作成し、(スタイルを約束します!) 新しいルートを宣言しようとします。

以下のようなものが得られました。ここで、依存関係は、ロードする JavaScript ファイルのパスの配列です。

使用法

ScriptLoader.load(module.dependencies).then(function () {
    demoApp.routeProvider.when(module.action, {templateUrl: 'my-template', controller: module.controller});
});

スクリプトローダー

angular.module('demoApp.services').factory('ScriptLoader', ['$q', '$rootScope', function ($q, $rootScope) {
        return {
            load: function (dependencies)
            {
                var deferred = $q.defer();
                require(dependencies, function () {
                    $rootScope.$apply(function () {
                        deferred.resolve();
                    });
                });
                return deferred.promise;
            }
        }
    }]);

問題

Angular が 'MouseTestCtrlA' を登録済みコントローラーとして解決できなかったことを意味する、この JavaScript エラー「'MouseTestCtrlA' は関数ではありません。定義されていません」がまだあります。

この点について誰か助けてもらえますか?

4

1 に答える 1