Question

我是angularjs的新手。

我尝试加载多个页面，因为登录页面设计不同（没有左侧菜单，页眉，页脚，导航栏），但其他页面都有这样的包含页眉，页脚，导航栏。

例如，我有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>

app.js：

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"
    };
});

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

Answer 1

不要在索引中设置您的页面样式。将index.html保持为空白容器。然后在各自的html页面中设置您的登录和其他页面的样式。使用ionic tabs app作为结构应如何完成的示例。

AngularJS +加载多个页面

1 个答案: