0

Я новичок в angularjs.AngularJS + загрузка нескольких страниц

Я попытался загрузить несколько страниц, потому что страница входа в систему отличается дизайном (без левого меню, заголовка, нижнего колонтитула, навигационной панели), но на других страницах есть inculde header, footer, navbar, как это.

Например, у меня есть 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?

ответ

0

не вставляйте свою страницу в индекс. Храните index.html как пустой контейнер. затем введите свой логин и другие страницы на соответствующих страницах html. Используйте приложение «Ионные вкладки» в качестве примера того, как должна выполняться структура.