Angular 布局的最佳实践

Question

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

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

目前我正在通过使用自己的模块创建一个 login.html 文件来解决这个问题，当用户成功登录时，我将它们重定向到 dashboard.html 应用程序。

这是一种通用的方法，还是有一种在单个应用程序中执行此操作的简洁方法，只需更改路由而不重定向到不同的应用程序？

Answer 1

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

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