Html AngularJS+；加载多个页面_Html_Angularjs_Angularjs Directive_Session State Provider

Html AngularJS+；加载多个页面

html angularjs

Html AngularJS+；加载多个页面,html,angularjs,angularjs-directive,session-state-provider,Html,Angularjs,Angularjs Directive,Session State Provider,我是新来安格拉斯的我尝试加载多个页面，因为登录页面是不同的设计（没有左菜单、页眉、页脚、导航栏），但其他页面包含页眉、页脚、导航栏，如下所示例如，我有index.html： <!DOCTYPE html> <html lang="en"> <head> <script src="vendor/theme_files/js/jquery.min.js"></script> </head>

我是新来安格拉斯的

我尝试加载多个页面，因为登录页面是不同的设计（没有左菜单、页眉、页脚、导航栏），但其他页面包含页眉、页脚、导航栏，如下所示

例如，我有index.html：

<!DOCTYPE html>
<html lang="en">
    <head>
        <script src="vendor/theme_files/js/jquery.min.js"></script>
    </head>
    <body class="nav-md" ng-app="myApp" >
        <div class="container body">
            <div class="main_container">
                <!-- left menu -->
                <div left-menu></div>
                <!-- /left menu -->
                <!-- top navigation -->
                <div top-navigation></div>
                <!-- /top navigation -->
                <!-- page content -->
                <div class="right_col" role="main" >
                    <!-- page content -->
                    <div id="right-content" ng-view=""></div>
                    <!--<div ng-view=""></div>-->
                    <!-- footer content -->
                    <div footer-content></div>

                    <!-- /footer content -->
                    <!-- /page content -->
                </div>
            </div>
        </div>
        <script src="vendor/angular/angular.js"></script>
        <script src="vendor/angular-resource/angular-resource.js"></script>
        <script src="vendor/files/angular-route.js"></script>
        <script src="vendor/angular-ui-router/release/angular-ui-router.js"></script>
        <script src="js/app.js"></script>
    </body>
</html>

现在我需要login.html，它与index.html完全不同（不需要索引的页眉、页脚和侧边栏）。如何组合login.html？

不要在索引中设置页面样式。将index.html保持为一个空白容器。然后在各自的html页面中设置登录和其他页面的样式。以ionic tabs应用程序为例，说明应如何完成该结构

var app = angular.module('myApp', ['ngRoute', 'ngStorage', 'lbServices', 'ui.router']);
app.config(['$routeProvider', '$httpProvider',
function($routeProvider, $httpProvider) {

    $routeProvider.when('/login', {
        templateUrl : 'views/login.html',
        controller : 'userController'
    }).when('/register', {
        templateUrl : 'views/register.html',
        controller : 'userController'
    }).when('/offerletter', {
        templateUrl : 'views/offerLetter.html',
        controller : 'offerLetterController'
    }).otherwise({
        redirectTo : '/login'
    });

    $httpProvider.interceptors.push(['$q', '$location', '$localStorage',
    function($q, $location, $localStorage) {

        return {
            'request' : function(config) {
                config.headers = config.headers || {};
                if ($localStorage.token) {
                    config.headers.Authorization = $localStorage.token;
                }
                return config;
            },
            'responseError' : function(response) {
                if (response.status === 401 || response.status === 403) {
                    $location.path('/signin');
                }
                return $q.reject(response);
            }
        };
    }]);

}]);

app.directive('leftMenu', function() {
    return {
        restrict : 'A',
        templateUrl : "views/pages/left-menu.html",
        replace : true
    };
    //
});
app.directive('topNavigation', function() {
    return {
        restrict : 'A',
        replace : true,
        templateUrl : "views/pages/top-navigation.html",
        scope : {
            user : '='
        }
    };
});
app.directive('rightContent', function() {
    return {
        restrict : 'A',
        replace : true,
        templateUrl : "views/pages/content.html"
    };
});
app.directive('footerContent', function() {
    return {
        restrict : 'A',
        replace : true,
        templateUrl : "views/pages/footer.html"
    };
});