Question

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

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

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

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

Answer 1

您可以使用角度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');
    }]);

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

布局的角度最佳实践

1 个答案: