web-dev-qa-db-ja.com

AngularJSコントローラーの動的ロード

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

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

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

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

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

まず、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;
            }
        }
    }]);

問題

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

誰かがこの点で私を助けてくれますか？

angularjsangularjs-routing
15
t00f

この記事を読み直す http://ify.io/lazy-loading-in-angularjs/$contentProviderインスタンス内Angularアプリ。

私はapp.jsでこのコードを思いついた

demoApp.config(function ($controllerProvider) {
     demoApp.controller = $controllerProvider.register;
});

これにより、外部のjavascriptファイルに期待どおりにコントローラーを書き込むことができます。

angular.module("demoApp").controller('MouseTestCtrlA', fn);

これが役立つことを願っています！

26
t00f