Подтвердить что ты не робот

AngularJS Динамическая загрузка контроллера

Я много читаю о ленивой загрузке, но при использовании $routeProvider я столкнулся с проблемой.

Моя цель - загрузить файл javascript, содержащий контроллер, и добавить маршрут к этому контроллеру, который был загружен ранее.

Содержимое моего javascript файла для загрузки

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

Этот файл не включается при вызове angular bootstap. Это означает, что я должен загрузить файл и создать маршрут к этому контроллеру.

Сначала я начал писать функцию разрешения, которая должна загрузить файл Javascript. Но объявление моего параметра контроллера в объявлении маршрута дало мне ошибку:

'MouseTestCtrlA' не является функцией, получил undefined

Вот вызов, который я пытаюсь установить:

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

Из того, что я прочитал, параметр контроллера должен быть зарегистрированным контроллером

controller - {(string | function() =} - Контроллер fn, который должен быть связан с вновь созданной областью или именем зарегистрированного контроллера, если он передан как строка.

Итак, я пишу factory, который должен иметь возможность загрузить мой файл, а затем (обещать стиль!). Я попытаюсь объявить новый маршрут.

Он дал мне что-то вроде ниже, где зависимости - это массив путей файлов javascript для загрузки:

Использование

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

Script загрузчик

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

Проблема

У меня все еще есть эта ошибка javascript. "MouseTestCtrlA" не является функцией, получил undefined ", что означает, что angular не смог разрешить" MouseTestCtrlA "в качестве зарегистрированного контроллера.

Может ли кто-нибудь помочь мне в этом вопросе?

4b9b3361

Ответ 1

Повторное чтение этой статьи http://ify.io/lazy-loading-in-angularjs/ предложило сохранить экземпляр $contentProvider внутри Angular App.

Я придумал этот код в своем приложении app.js

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

Он позволяет мне написать мой контроллер, как ожидалось, в файле внешнего javascript:

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

Надеюсь, это поможет!