Angular布局最佳实践

Question

我有一个名为dashboard.html的管理控制台应用程序，它是自己的Angular模块。该应用程序具有一致的布局，包括顶部的n个标题栏、左侧导航栏等。当路由更改时，只有内容容器会得到更新，而其余布局保持不变。

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

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

这是一种常用的方法吗？还是有一种更简洁的方法在单个应用程序中完成，只需更改路由而不是重定向到不同的应用程序？

- altus

Answer 1

您可以使用Angular UIrouter来实现此操作。请查看这个fiddle：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');
    }]);

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

- Naeem Shaikh