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

Question

我试图根据路线动态加载模板和控制器（在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');
});

我了解控制器需要在应用程序的开头出现，但我无法使用resolve语句编写正确的promise。

有人可以通过简单的承诺帮助我解决问题，该承诺会根据路线返回控制器名称的字符串吗？

Answer 1

我能够通过不将控制器包含在路由中来使其工作。相反，我将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"

（或任何适当的控制器）