AngularJS 基于路由动态加载控制器和模板

AngularJS Dynamically Load Controller and Template based on Route

我正在尝试根据路由动态加载模板和控制器（在 Angular 1.6 中），从当前目录架构中提取。

    app
    |__login.module.js
    |__home.controller.js
    |__login.factory.js
    |__home.view.html
    |__404.view.html
    |__index.html

目前，以下代码可以提取正确的模板，但控制器不会加载：

    angular.module('common.auto-loading-routes', []).config(function($routeProvider){

    function getTemplate(routeParams){
        var route = (routeParams.current) ? routeParams.current.params.route : routeParams.route;
        var directory = route.split('/');
        directory = directory.filter(function(entry) { return entry.trim() != ''; });
        var page = directory[directory.length - 1];
        directory.splice(-1,1);
        directory = directory.join('/');
        return directory + '/' + page +'.view.html';
    }

    function getController(routeParams){
        //I think I need a promise here, but I don't know how to write it
        routeParams = routeParams.route.split('/').join('.');
        return routeParams + 'controller';
    }

    $routeProvider.when('/:route*', {
        controller: function($routeParams) { //does not work
            return getController($routeParams);
        },
        templateUrl: function($routeParams) { //works
            return getTemplate($routeParams);
        },
        resolve: {
            check: function($route, $http, $location){
                return $http.get(getTemplate($route)).then(function(response){
                    if (response.status !== 404){
                        return true;
                    } else {
                        $location.path('404');
                    }
                });
            }
        }
    }).otherwise('/404');
});

我知道控制器需要在应用程序启动时出现，但我无法使用 promise 语句编写正确的 resolve。

有人可以帮我纠正一个简单的承诺，即 returns 基于路由的控制器名称字符串吗？

我能够通过完全不在路由中包含控制器来使其工作。相反，我将 ng-controller 属性放在我正在加载的视图中。

这成功了！

angular.module('common.auto-loading-routes', []).config(function($routeProvider){

    function getTemplate(routeParams){
        var route = (routeParams.current) ? routeParams.current.params.route : routeParams.route;
        var directory = route.split('/');
        directory = directory.filter(function(entry) { return entry.trim() != ''; });
        var page = directory[directory.length - 1];
        directory.splice(-1,1);
        directory = directory.join('/');
        return directory + '/' + page +'.view.html';
    }

    $routeProvider.when('/:route*', {
        templateUrl: function($routeParams) { //works
            return getTemplate($routeParams);
        },
        resolve: {
            check: function($route, $http, $location){
                return $http.get(getTemplate($route)).then(function(response){
                    if (response.status !== 404){
                        return true;
                    } else {
                        $location.path('404');
                    }
                });
            }
        }
    }).otherwise('/404');
});

在该视图的 HTML 中，我只是放置

ng-controller="home.controller"

（或任何合适的控制器）

AngularJS 基于路由动态加载控制器和模板

AngularJS Dynamically Load Controller and Template based on Route

angularjs

angular-routing

dynamic-routing