AngularJS + загрузить несколько страниц

Я новичок в 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?

Источник

1 ответ

Не стилизуйте свою страницу в индексе. Держите index.html как пустой контейнер. затем введите свой логин и другие страницы в соответствующие HTML-страницы. Используйте приложение "Ионные вкладки" в качестве примера того, как должна быть построена структура.

Источник
Другие вопросы по тегам