I'm building a MEAN application and having troubles dealing with ui-router . I have an index.html
where i have the template of the entire website with a header, sidebar and a content where i place <div ui-view>
. In this file I also load every javascript necessary like angular, ui-router, bootstrap, ocLazyLoad, etc .
Every partial view are placed in index.html
content with ui-router states. My ui-router is configured this way:
myApp.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: '../views/home.html',
resolve: {
deps: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load([{
name: 'myApp',
files: [
'js/controllers/homeCtrl.js'
]
}]);
}]
}
})
});
Up to now I have everything controlled. My problem is this: How can i create a state login.html
that does not have the header and the sidebar, because if the user is not logged in i don't want to show any options but login. How is the safest and best way to achieve this?
Thanks in advance.
My website shared the same case with you. What I did is I have 2 states: login and home. Login state will point to the login page and home state will point to home.html. Here is example of home.html:
<div id="wrapper" ng-class='{"toggled" : $root.toggle }'>
<div ng-include="'components/sidebar/sidebar.html'"></div>
<div ng-include="'components/navbar/navbar.html'"></div>
<div id="page-content-wrapper">
<div class="container-fluid">
<!-- <ui-breadcrumbs displayname-property="data.displayName" abstract-proxy-property="data.proxy" ></ui-breadcrumbs> -->
<ui-breadcrumbs displayname-property="data.displayName" template-url="components/breadcrumb/uiBreadcrumbs.tpl.html"></ui-breadcrumbs>
<div ui-view="home"></div>
</div>
</div>
</div>
So all the states that after the user login should be the children state of home
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.