Clear History and Reload Page on Login/Logout Using Ionic Framework

I am new to mobile application development with Ionic. On login and logout I need to reload the page, in order to refresh the data, however, $state.go('mainPage') takes the user back to the view without reloading - the controller behind it is never invoked.

Is there a way to clear history and reload the state in Ionic?

Welcome to the framework! Actually the routing in Ionic is powered by ui-router. You should probably check out this previous SO question to find a couple of different ways to accomplish this.

If you just want to reload the state you can use:

$state.go($state.current, {}, {reload: true});

If you actually want to reload the page (as in, you want to re-bootstrap everything) then you can use:

$window.location.reload(true)

Good luck!

I found that JimTheDev's answer only worked when the state definition had cache:false set. With the view cached, you can do $ionicHistory.clearCache() and then $state.go('app.fooDestinationView') if you're navigating from one state to the one that is cached but needs refreshing.

See my answer here as it requires a simple change to Ionic and I created a pull request: https://stackoverflow.com/a/30224972/756177

The correct answer:

$window.location.reload(true);

I have found a solution which helped me to get it done. Setting cache-view="false" on ion-view tag resolved my problem.

<ion-view cache-view="false" view-title="My Title!">
  ....
</ion-view>

Reload the page isn't the best approach.

you can handle state change events for reload data without reload the view itself.

read about ionicView life-cycle here:

http://blog.ionic.io/navigating-the-changes/

and handle the event beforeEnter for data reload.

$scope.$on('$ionicView.beforeEnter', function(){
  // Any thing you can think of
});

In my case I need to clear just the view and restart the controller. I could get my intention with this snippet:

$ionicHistory.clearCache([$state.current.name]).then(function() {
  $state.reload();
});

The cache still working and seems that just the view is cleared.

ionic --version says 1.7.5.

None of the solutions mentioned above worked for a hostname that is different from localhost!

I had to add notify: false to the list of options that I pass to $state.go, to avoid calling Angular change listeners, before $window.location.reload call gets called. Final code looks like:

$state.go('home', {}, {reload: true, notify: false});

>>> EDIT - $timeout might be necessary depending on your browser >>>

$timeout(function () { $window.location.reload(true); }, 100);

<<< END OF EDIT <<<

More about this on ui-router reference.

I was trying to do refresh page using angularjs when i saw websites i got confused but no code was working for the code then i got solution for reloading page using

$state.go('path',null,{reload:true});

use this in a function this will work.

I needed to reload the state to make scrollbars work. They did not work when coming through another state - 'registration'. If the app was force closed after registration and opened again, i.e. it went directly to 'home' state, the scrollbars worked. None of the above solutions worked.

When after registration, I replaced:

$state.go("home");

with

window.location = "index.html"; 

The app reloaded, and the scrollbars worked.

The controller is called only once, and you SHOULD preserve this logic model, what I usually do is:

I create a method $scope.reload(params)

At the beginning of this method I call $ionicLoading.show({template:..}) to show my custom spinner

When may reload process is finished, I can call $ionicLoading.hide() as a callback

Finally, Inside the button REFRESH, I add ng-click = "reload(params)"

The only downside of this solution is that you lose the ionic navigation history system

Hope this helps!

If you want to reload after view change you need to

$state.reload('state',{reload:true});

If you want to make that view the new "root", you can tell ionic that the next view it's gonna be the root

 $ionicHistory.nextViewOptions({ historyRoot: true });
 $state.go('app.xxx');
 return;

If you want to make your controllers reload after each view change

app.config(function ($stateProvider, $urlRouterProvider, $ionicConfigProvider) {

$ionicConfigProvider.views.maxCache(0);

.state(url: '/url', controller: Ctl, templateUrl: 'template.html', cache: false) cache: false ==> solved my problem !

As pointed out by @ezain reload controllers only when its necessary. Another cleaner way of updating data when changing states rather than reloading the controller is using broadcast events and listening to such events in controllers that need to update data on views.

Example: in your login/logout functions you can do something like so:

$scope.login = function(){
    //After login logic then send a broadcast
    $rootScope.$broadcast("user-logged-in");
    $state.go("mainPage");
};
$scope.logout = function(){
   //After logout logic then send a broadcast
   $rootScope.$broadcast("user-logged-out");
   $state.go("mainPage");
};

Now in your mainPage controller trigger the changes in the view by using the $on function to listen to broadcast within the mainPage Controller like so:

$scope.$on("user-logged-in", function(){
     //update mainPage view data here eg. $scope.username = 'John';
});

$scope.$on("user-logged-out", function(){
    //update mainPage view data here eg. $scope.username = '';
});

I tried many methods, but found this method is absolutely correct:

$window.location.reload();

Hope this help others stuck for days like me with version: angular 1.5.5, ionic 1.2.4, angular-ui-router 1.0.0