Все контроллеры AngularJS не загружаются с LazyLoad

Question

Я пытаюсь лениво загрузить свои контроллеры для моего приложения AngularJS, которое я создал вместе с requireJS. Я создал собственную библиотеку "lazyLoad", которая создает объект разрешения в маршрутах app.config() (также я использую ui-router). Если я кодирую состояние (без моей библиотеки), чтобы оно выглядело так, чтобы оно работало

define(['angular', 'lazyLoader', 'uiRouter'], function(angular, lazyLoader, uiRouter){

    var app = angular.module('myApp', ['ui.router']);

    app.config(function ($stateProvider, $urlRouterProvider, $controllerProvider, $compileProvider, $filterProvider, $provide) {


        window.lazy = {
            controller: $controllerProvider.register,
            directive: $compileProvider.directive,
            filter: $filterProvider.register,
            factory: $provide.factory,
            service: $provide.service
        };

        $urlRouterProvider.otherwise('/');

        $stateProvider
            .state('campaigns', {
                url:'/campaigns',
                views: {
                    "top-nav"  : {
                        templateUrl: 'views/home/top-nav.html',
                        resolve : {
                            load : ['$q', '$rootScope', function($q, $rootScope){
                                var d = $q.defer();
                                require(['../app/controllers/header-controller'], function() {
                                    $rootScope.$apply(function(){
                                        d.resolve();
                                    });
                                });
                                return d.promise;
                            }]
                        }
                    },
                    "fullpage": {
                        templateUrl: 'views/home/index.html',
                        resolve : {
                            load : ['$q', '$rootScope', function($q, $rootScope){
                                var d = $q.defer();
                                require(['../app/controllers/home-controller'], function() {
                                    $rootScope.$apply(function(){
                                        d.resolve();
                                    });
                                });
                                return d.promise;
                            }]
                        }
                        //controller: 'home-controller'
                    }
                }
            });

    });

    return app;

});

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

define(['angular', 'lazyLoader', 'uiRouter'], function(angular, lazyLoader, uiRouter){

а также

.state('home', lazyLoader.route({
    url:'/',
    views: {
        "top-nav"  : {
            templateUrl: 'views/home/top-nav.html',
            controllerUrl: '../app/controllers/header-controller'
        },
        "fullpage": {
            templateUrl: 'views/home/index.html',
            controllerUrl: '../app/controllers/home-controller'
        }
    }
}));

lazyLoader.js

define(function () {
    'use strict';
    function LazyLoader() {}
    LazyLoader.prototype.route = function(config){
        var controllerPath;
        if(config && config.views){
            var singleView = Object.keys(config.views);
            for(var i in singleView){
                var viewName = singleView[i];
                controllerPath = config.views[viewName].controllerUrl;
                delete config.views.controllerUrl;
                config.views[viewName].resolve = {
                    load : ['$q', '$rootScope', function($q, $rootScope){
                        var d = $q.defer();
                        require([controllerPath], function() {
                            $rootScope.$apply(function(){
                                d.resolve();
                            });
                        });
                        return d.promise;
                    }]
                };
            }
        }
        return config;
    }
    return new LazyLoader();
});

Пример контроллера

define(['app/module'], function (module) {
    lazy.controller('header-controller', ['$scope', function ($scope) {
        // stuff here
    }]);
});

Кстати, я планирую реализовать что-то лучше, чем прикрепить ленивую переменную к окну.

Когда я кодирую маршрутизатор, как в первом примере, он работает. Когда я использую свой lazyLoader, одно из двух представлений загружает свой контроллер, запускается загрузка файла контроллера второго представления (console.logs в начале показывает это), но он не может разрешить "модуль" в примере выше.

ссылка на ошибку: AngularJS Error

Опять же, эта проблема возникает только при использовании моего lazyloader, который производит тот же объект разрешения, который я жестко запрограммировал для версии, которая работает.

Я искал высоко и низко, и там много ресурсов, но я не смог найти ничего, что решило бы эту проблему.

Любой совет приветствуется!

Answer 1

Вы слишком много мучаетесь, чтобы загружать контроллеры и службы. Существует простой подход к отложенной загрузке файлов с помощью ocLazyLoad. Эта статья может помочь вам решить ту же проблему. https://routerabbit.com/blog/convert-angularjs-yeoman-spa-lazyload/

Что вы должны сделать, это

Добавьте ссылку на ocLayzLoad и обновленную ссылку на файлы JS для загрузки по требованию из файла app.js или.html их представлений.

`bower install oclazyload --save-dev`

Теперь загрузите модуль "oc.lazyLoad" в приложении. Обновить файл app.js

angular
      .module('helloWorldApp', [
        'ngCookies',
        'ngResource',
        'ngRoute',
        'ngSanitize',
        'oc.lazyLoad',
])

Загрузите файл JS, добавив ссылку на файл JS в файл.html.

<div oc-lazy-load="['scripts/controllers/about.js', 'scripts/services/helloservice.js']">
     <div ng-controller="AboutCtrl as about">
            Your html goes here
     </div>
</div>

Если вы используете Grunt, обновите Gruntfile до uglyfy, переименуйте имя файла и обновите ссылки в конечном файле.html или.js.

Answer 2

По определению модуля "myApp", вы не должны возвращаться app переменная вместо myApp?

И чтобы не подвергать ленивый окну, вы можете определить его как свойство app переменная, таким образом, когда вы определяете новые функции, вам требуется app во-первых, и вы можете использовать его:

app.js:

app.lazy = {
        controller: $controllerProvider.register,
        directive: $compileProvider.register,
        filter: $filterProvider.register,
        factory: $provide.factory,
        service: $provide.service
    };
...
return app;

controller.js:

define(['app'], function (app) {
    app.lazy.controller('header-controller', ['$scope', function ($scope) {
        // stuff here
    }]);
});