I have a tricky scenario here. My index.html page contains two ui-view sections. One for navigation-bar and the other one for page-body.
When index page is initialized I load menu-guest.html into the navigation-bar view and home.html into the page-body view.
After a successful log-in I change the content of the navigation-bar to menu-user.html and page-body to welcome.html. It works fine.
But there are some general links on the menu pages like "help" which loads exactly the same body content for guest and registered user.
How can I define a route for help content? If user click on the help link I only want to change the body content of my entire webpage because the menu template is loaded fine when (1) init state: root url (/) of my webapp is opened in the browser (2) after successful login: the menu is updated and I do not want to change / reload it until user is logged out. (3) user is logged out: the default, menu-guest.html is loaded into the menu view.
If I remove the line with content of "navigation-bar": { templateUrl: "..." } from "help" route then the menu content is disappeared, i guess that a null page will be loaded by angular.
If I need to hardcode the name of the help template than I need to create two route for help menu: guess-help and user-help. I want to avoid it.
index.html
<!-- Navigation Bar -->
<div ui-view="navigation-bar"></div>
<!-- Page Body -->
<div ui-view="page-body"></div>
route.js
app.config(function($stateProvider) {
$stateProvider
// public pages
.state('root', {
url: "/",
views: {
"navigation-bar": { templateUrl: "app/components/public/navigation-bar/menu-guest.html" },
"page-body": { templateUrl: "app/components/public/home/home.html" }
}
})
.state('log-in', {
url: "/log-in",
views: {
//"navigation-bar": { templateUrl: "app/components/public/navigation-bar/menu-guest.html" },
"page-body": { templateUrl: "app/components/public/log-in/logIn.html" }
}
})
.state('help-general', {
url: "/help-general",
views: {
//"navigation-bar": { templateUrl: "app/components/public/navigation-bar/menu-guest.html" },
"page-body": { templateUrl: "app/components/public/help/help-general.html" }
}
})
// private pages
.state('private/welcome', {
url: "/private/welcome",
data : { requiresLogin: true },
views: {
"navigation-bar": { templateUrl: "app/components/protected/navigation-bar/menu-user.html" },
"page-body": { templateUrl: "app/components/protected/welcome/welcome.html" }
}
});
});
app.run(function($rootScope, $state, loginFactory) {
$rootScope.$on('$stateChangeStart', function(event, toState) {
var isAuthenticationRequired = toState.data && toState.data.requiresLogin && !loginFactory.isLoggedIn();
if (isAuthenticationRequired == true) {
loginFactory.setToState(toState);
event.preventDefault();
$state.go('log-in');
}
});
});