首页 文章

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

提问于
浏览
0

我试图根据路线动态加载模板和控制器(在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 .

有人可以帮我解决一个简单的承诺,根据路线返回控制器名称的字符串吗?

1 回答

  • 0

    我完全没有将控制器包含在路由中,从而使其工作 . 相反,我将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"
    

    (或任何适当的控制器)

相关问题