angularjs – 布局的角度最佳实践

2023年4月18日 305次阅读

我有一个名为dashboard.html的管理仪表板应用程序,它由自己的角度模块启动.此应用程序具有一致的布局,顶部有n标题栏,左栏导航等.当路径更改时,只更新内容容器,其余布局不受影响.

我的问题是登录页面,布局完全不同,没有标题栏和导航.

目前我通过创建具有自己模块的login.html文件来解决此问题,当用户成功登录时,我将它们重定向到dashboard.html应用程序.

这是一种常用的方法,还是通过改变路由而不是重定向到不同的应用程序,在单个应用程序中进行干净的方式？

最佳答案 您可以使用角度UIrouter来执行此操作.

看看这个小提琴,http://jsfiddle.net/thardy/eD3MU/.

   <div ui-view="main"></div>



angular.module('myApp', ['ui.state'])
.config(['$stateProvider', '$routeProvider',  
    function ($stateProvider, $routeProvider) {
        $stateProvider
            .state('test', {
                abstract: true,
                url: '/test',
                views: {
                    'main': {
                         template:  '<h1>Hello!!!</h1>' +
                                    '<div ui-view="view1"></div>' +
                                    '<div ui-view="view2"></div>'
                    }
                }
            })
            .state('test.subs', {
                url: '',
                views: {
                    'view1@test': {
                        template: "Im View1"
                    },
                    'view2@test': {
                        template: "Im View2"
                    }
                }
            });
    }])
    .run(['$rootScope', '$state', '$stateParams', function ($rootScope,   $state, $stateParams) {
        $rootScope.$state = $state;
        $rootScope.$stateParams = $stateParams;
        $state.transitionTo('test.subs');
    }]);

您可以在应用程序中创建主视图和子视图,对于您的应用程序,您可以为登录和仪表板页面创建主视图,然后您可以根据需要在仪表板页面中加载子视图.

点赞