Javascript 动态加载控制器

我正在尝试设置一个angular应用程序，它将根据路由动态加载控制器。我正在关注这一点，但我无法让它发挥作用。我还对教程代码做了一些适合我的小修改，但我认为这不是问题所在

我把几乎所有的代码流都放在这里，所以如果您想跳过它，错误就在最后的代码片段中

注意：随着我的进步，我已经更改了代码片段

index.html基本文件（我删除了ng app和ng controller参数，因为我意识到我使用RequireJS手动调用它们）：

routeResolver.js

'use strict';

define([], function () {

    var routeResolver = function () {

        this.$get = function () {
            return this;
        };

        this.route = function () {

            var resolve = function (baseName, path, secure) {
                if (!path) path = '';

                var routeDef = {};
                routeDef.templateUrl = path + baseName + '.html';
                routeDef.controller = baseName + 'Controller';
                routeDef.secure = (secure) ? secure : false;
                routeDef.resolve = {
                    load: ['$q', '$rootScope', function ($q, $rootScope) {
                        var dependencies = [path + baseName + 'Controller.js'];
                        return resolveDependencies($q, $rootScope, dependencies);
                    }]
                };

                return routeDef;
            },

            resolveDependencies = function ($q, $rootScope, dependencies) {
                var defer = $q.defer();
                require(dependencies, function () {
                    defer.resolve();
                    $rootScope.$apply()
                });

                return defer.promise;
            };

            return {
                resolve: resolve
            }
        };

    };

    var servicesApp = angular.module('routeResolverServices', []);

    //Must be a provider since it will be injected into module.config()    
    servicesApp.provider('routeResolver', routeResolver);
});

'use strict';

define(['routeResolver'], function () {

    var app = angular.module('littleBuddha', ['routeResolverServices']);

    app.config(['$routeProvider', 'routeResolverProvider', '$controllerProvider', 
                '$compileProvider', '$filterProvider', '$provide',
        function ($routeProvider, routeResolverProvider, $controllerProvider, 
                  $compileProvider, $filterProvider, $provide) {

            console.log('test');

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

            var route = routeResolverProvider.route;

            $routeProvider
                .when('/login', route.resolve('Login', '/app/components/login/'))
                .otherwise({ redirectTo: '/login' });

        }
    ]);

    return app;
});

app.js

'use strict';

define([], function () {

    var routeResolver = function () {

        this.$get = function () {
            return this;
        };

        this.route = function () {

            var resolve = function (baseName, path, secure) {
                if (!path) path = '';

                var routeDef = {};
                routeDef.templateUrl = path + baseName + '.html';
                routeDef.controller = baseName + 'Controller';
                routeDef.secure = (secure) ? secure : false;
                routeDef.resolve = {
                    load: ['$q', '$rootScope', function ($q, $rootScope) {
                        var dependencies = [path + baseName + 'Controller.js'];
                        return resolveDependencies($q, $rootScope, dependencies);
                    }]
                };

                return routeDef;
            },

            resolveDependencies = function ($q, $rootScope, dependencies) {
                var defer = $q.defer();
                require(dependencies, function () {
                    defer.resolve();
                    $rootScope.$apply()
                });

                return defer.promise;
            };

            return {
                resolve: resolve
            }
        };

    };

    var servicesApp = angular.module('routeResolverServices', []);

    //Must be a provider since it will be injected into module.config()    
    servicesApp.provider('routeResolver', routeResolver);
});

'use strict';

define(['routeResolver'], function () {

    var app = angular.module('littleBuddha', ['routeResolverServices']);

    app.config(['$routeProvider', 'routeResolverProvider', '$controllerProvider', 
                '$compileProvider', '$filterProvider', '$provide',
        function ($routeProvider, routeResolverProvider, $controllerProvider, 
                  $compileProvider, $filterProvider, $provide) {

            console.log('test');

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

            var route = routeResolverProvider.route;

            $routeProvider
                .when('/login', route.resolve('Login', '/app/components/login/'))
                .otherwise({ redirectTo: '/login' });

        }
    ]);

    return app;
});

最后，AppController.js：

'use strict';

define(['app'], function (app) {

    //This controller retrieves data from the customersService and associates it with the $scope
    //The $scope is ultimately bound to the customers view due to convention followed by the routeResolver

    app.register.controller('AppController', function ($scope, USER_ROLES, AuthService) {

        $scope.currentUser = null;
        $scope.userRoles = USER_ROLES;
        $scope.isAuthorized = AuthService.isAuthorized;

        $scope.setCurrentUser = function (user) {
            $scope.currentUser = user;
        };

    });

    return app;

});

编辑

---

现在我找到了问题所在。在app.js中，app.config函数从未被调用，因此寄存器参数从未被应用，路由也从未被计算。实际上，

console.log（'test'）

从未打印。

我认为这是因为您没有在routeResolver中初始化路由

请注意，在本教程中，他们使用routeConfig立即运行routeResolver。我看不到您在哪里初始化this.route函数

在本教程中：

    this.route = function (routeConfig) {

        var resolve = function (baseName, path, secure) {
                if (!path) path = '';

                var routeDef = {};
                routeDef.templateUrl = routeConfig.getViewsDirectory() + path + baseName + '.html';
                routeDef.controller = baseName + 'Controller';
                routeDef.secure = (secure) ? secure : false;
                routeDef.resolve = {
                    load: ['$q', '$rootScope', function ($q, $rootScope) {
                        var dependencies = [routeConfig.getControllersDirectory() + path + baseName + 'Controller.js'];
                        return resolveDependencies($q, $rootScope, dependencies);
                    }]
                };

                return routeDef;
            },

            resolveDependencies = function ($q, $rootScope, dependencies) {
                var defer = $q.defer();
                require(dependencies, function () {
                    defer.resolve();
                    $rootScope.$apply()
                });

                return defer.promise;
            };

        return {
            resolve: resolve
        }
    }(this.routeConfig);

你的：

    this.route = function (routeConfig) {

        var resolve = function (baseName, path, secure) {
            if (!path) path = '';

            var routeDef = {};
            routeDef.templateUrl = path + baseName + '.html';
            routeDef.controller = baseName + 'Controller';
            routeDef.secure = (secure) ? secure : false;
            routeDef.resolve = {
                load: ['$q', '$rootScope', function ($q, $rootScope) {
                    var dependencies = [path + baseName + 'Controller.js'];
                    return resolveDependencies($q, $rootScope, dependencies);
                }]
            };

            return routeDef;
        },

        resolveDependencies = function ($q, $rootScope, dependencies) {
            var defer = $q.defer();
            require(dependencies, function () {
                defer.resolve();
                $rootScope.$apply()
            });

            return defer.promise;
        };

        return {
            resolve: resolve
        }
    };

请注意，在您的示例中，此函数未执行

因此，我认为您需要使用routeConfig对象运行此函数，以使其定义并工作

编辑：即使您不想要routeConfig对象（这似乎是您的目标），您仍然需要在不传递任何参数的情况下运行该函数

我最后的想法：

对不起，我帮不上忙了。我将尝试两个以上的建议，恐怕这就是我的答案

你说app.config永远不会被调用。这可能与加载顺序有关。在main.js中试试这个

require(
    [
        'ngRoute',
        'app',
        'routeResolver',
        'constants',
        'AppController',
        'AuthService',
    ],
    function () {
      angular.element(document).ready(function() {
          angular.bootstrap(document, ['littleBuddha']);
      });
    }
);

或者，它从来没有被呼叫过，因为

define(['routeResolver'], function () {

意味着它首先尝试加载routeResolver。如果routeResolver中存在一些异常，那么它将无法运行设置应用程序的功能。在这种情况下，我建议您进行调试，看看您在加载时实际通过routeResolver.js的程度

这让我不知所措，当我陷入这样的困境时，我通常先让一个版本完全像演示一样工作，然后一步一步地回到我真正想要的，看看它什么时候停止工作

---

祝你好运，对不起，我帮不上什么忙。

实际上，在本教程中，他们使用该命令调用routeConfig函数并在其中设置路径。随后在app.js文件中使用命令

var route=routeResolverProvider.route调用this.route

和

$routeProvider.when（'/login'，route.resolve（'login'，'/app/components/login/'））

调用。无论如何，我尝试了你的解决方案，但没有任何改变。在我看来，this.route应该在声明时立即初始化，现在也不需要函数采用routeConfig。把你的问题中的代码更新到你现在正在使用的，也许考虑做一个演示和编辑的Sunkr。我更新了我的问题。然而，作为一名php开发人员，这对我来说是全新的，而且变得相当复杂。即使我能让它工作，我也不认为我能完全理解为什么。我想我会用ocLazyLoad再次尝试，看起来更直观。我一次又一次地更新，直到发现问题。现在我知道它在哪里，但我不知道如何解决它。。。