I am using angularjs for building a admin side page of one of my application.Data is fetched using webservices. At the time of login am using session to store values get from login api. Values are stored in $localstorage.token and $#localstorage.currentUser And $localstorage.current user is used in home page to display user details. The thing is details are displayed only after refreshing the entire page after logged into that account. Is there any solution to get the data without manually refreshing the page.
In my index page,
<ul class="dropdown-menu dropdown-menu-right">
<li class="dropdown-header">
{{currentUserDetails.user.full_name}}
</li>
<li class="divider"></li>
<li class="link">
<a href="#">
Profile
</a>
</li>
<li class="divider"></li>
<li class="link">
<a href="" ng-click="logout()">
Logout
</a>
</li>
</ul>
In my Controller
if(response){
$localStorage.LoggedInuser = response;
// $window.location.reload();
$state.go('index');
}else{
$scope.error_message = "Invalid username or password.";
}
Thnaks in advance
In my experience, the best and most sane thing you can do is have child states. For example you will have a state called 'login' which will be your login page. A simple form to log in. Once the login is successful, you will send them to another state, lets say 'app.index'. 'index' here is a nested state. The 'app' state will be abstract and will contain the layout of your application (the navbar, the menus and whatever shit is shared across the whole app, except login). This way, you will handle everything gracefully with states and you will be able to have different "layouts" without having to redirect the user to some other page with javascript (which would be the case if you had login.html and index.html). This is how your routes will look like:
$stateProvider.state('login', {
url: '/login',
templateUrl: 'auth/login.html',
controller: 'LoginCtrl'
}).state('logout', {
url: '/logout',
controller: 'LogoutCtrl'
});
//this is the abstract state
//index/index.html contains the menus, navbars and general layout
//it also contains a subview where you will load your content
$stateProvider.state('app', {
url: '/app',
templateUrl: 'index/index.html',
abstract: true
});
//app.usersIndex is the index users
//it loads on top of app, in its subview.
$stateProvider.state('app.usersIndex', {
url: "/users",
templateUrl: "user/index.html",
controller: 'UserIndexCtrl'
})
As for your html, you will have an index.html file which is your main file. There you will have a ui-view tag where you will load your main states (login or app). In the case of app, you will have inside another ui-view tag to load it's child states. ui-router nested states