遅延読み込みについてよく読んでいますが、$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' は関数ではありません。定義されていません」がまだあります。
この点について誰か助けてもらえますか?