Angularjs 布局的最佳实践

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

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

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

---

这是一种普遍使用的方法，还是在单个应用程序中有一种干净的方法可以做到这一点，只需更改路由而不重定向到不同的应用程序

您可以使用路由器来执行此操作

看看这把小提琴

angular.module（'myApp'，['ui.state']））
.config（['$stateProvider'，'$routeProvider'，
函数（$stateProvider，$routeProvider）{
$stateProvider
.状态（“测试”{
摘要：没错，
url:“/test”，
观点：{
“主要”：{
模板：“你好！！！”+
'' +
''
}
}
})
.state（'test.subs'{
url:“”，
观点：{
'view1@test': {
模板：“Im视图1”
},
'view2@test': {
模板：“Im视图2”
}
}
});
}])
.run（['$rootScope'，'$state'，'$stateparms'，函数（$rootScope，$state，$stateparms）{
$rootScope.$state=$state；
$rootScope.$stateParams=$stateParams；
$state.transitiono（'test.subs'）；
}]);

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

   <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');
    }]);