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

Question

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?

score 124 · Accepted Answer · edited May 23 '17 at 12:10

124

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!

edited May 23 '17 at 12:10

Community

1
1

answered Aug 08 '14 at 15:17

JimTheDev

3,469
1
23
26

I want to bundle all css/js files pulled from remote server in index.html. But I'd prefer to only reload these if there's been a change. How should I structure this? – mylord Dec 01 '14 at 18:02
Not sure if I understand you @mylord. Are you talking about live reload? Maybe you are interested in the Html5 offline cache / manifest as discussed here: http://tmkmobile.wordpress.com/2012/03/04/html5-offline-solution/ I think you might be trying to do something other than the original intent of the question. – JimTheDev Dec 01 '14 at 18:15
13

$state.go($state.current, {}, {reload: true}); this solution does not works for me. – hackp0int May 03 '15 at 14:05
@IamStalker can you provide any further information or perhaps a codepen/fiddle/plunk as an example? – JimTheDev May 12 '15 at 21:45
9

`$state.go($state.current, {}, {reload: true});` doesn't work if `cache:true` (which is the default if cache is omitted) in state definition. Tested in #ionic 1.0.0-RC2 and 1.0.0. See my answer. – ABCD.ca May 13 '15 at 20:57
with '$state.go($state.current, {}, {reload: true});' the view gets refreshed but the side menu and the header disappears! – Afflatus Nov 13 '15 at 07:37
For me, the first answer gets caught in loop and the second throws an error. – alphapilgrim Jan 29 '16 at 18:14
how to do this in ionic2? – Basit Mar 01 '16 at 13:22

score 25 · Answer 2 · edited May 23 '17 at 12:10

25

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

edited May 23 '17 at 12:10

Community

1
1

answered May 13 '15 at 20:58

ABCD.ca

2,365
3
32
24

1

Good stuff. I don't actually use this in my ionic app so I appreciate the followup with the caching functionality. Looks like your PR is going to go into 1.0.1. Once that is released I'll make a note in my original post crediting you and prompting people to take a look. – JimTheDev May 14 '15 at 18:46

score 18 · Answer 3 · answered Aug 19 '14 at 10:43

18

The correct answer:

$window.location.reload(true);

answered Aug 19 '14 at 10:43

EpokK

38,062
9
61
69

1

This answer has been flagged as low quality. Could you try to explain why it is the correct answer? – Jorge Leitao Aug 19 '14 at 11:50
1

Because it uses `$window` instead of `window` – EpokK Aug 19 '14 at 12:13
You are correct in that if you go with the .location.reload syntax it makes sense to use $window. I've changed my answer above just so that we're consistent for future readers. The $state.go syntax may be useful as well in certain cases. – JimTheDev Aug 19 '14 at 14:32
Only this answer has helped me, not the ticked one – Michal Dec 14 '15 at 08:47
I used to like that approach, but some people reported that it causes infinite loop of reloads on some devices (Android 4.4, Chrome). – Oleg Cheremisin Feb 24 '16 at 07:16

score 18 · Answer 4 · answered Aug 22 '15 at 13:50

18

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>

answered Aug 22 '15 at 13:50

Rajeshwar

2,290
4
31
41

disable cache view make a significant lose of performance you should avoid this options. instead you can handle ionicView events. see: http://stackoverflow.com/questions/25192172/force-view-to-reload-in-ionic-framework/33708463#33708463 – ezain Nov 14 '15 at 12:45
@ezain, Could you please let me know how does the performance gets affected? – Rajeshwar Nov 15 '15 at 07:53
@Rajeshwar, when the cache system is enabled, Ionic maintains all DOM generated by the view hidden and when a change view occurs you not need to recalculate the DOM. If you have a heavy DOM and you need to generate it in all transition change you can appreciate lags in the transition animations. If you only reason for disable cache is reload the controller use the ionicView events. – ezain Nov 15 '15 at 14:00
@ezain, There are so many ways implementing this feature of disabling cache. I tried almost all of them, nothing worked for me. And this one gave me what i need. And i don't see any considerable lagging while loading that page, even though the page is little big. So i preferred this way than the other ways. – Rajeshwar Nov 15 '15 at 15:06

ezain · Answer 5 · 2016-01-10T15:43:50.100

11

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
});

edited Jan 10 '16 at 15:43

answered Nov 14 '15 at 12:35

ezain

1,445
1
16
32

This seems like the best approach. – markau Jan 10 '16 at 03:41
specifically you can check if the state is from cache, and if so, call some of your APIs to refresh it: `$scope.$on('$ionicView.beforeEnter', function(scopes, states) { if (states.fromCache) { ... } }` – jakub.g Apr 06 '16 at 16:41
@jakub.g if you don't want to cache a view you can disable the cache for this specific view, is more simple. – ezain Apr 07 '16 at 10:15

glaucomorais · Answer 6 · 2022-03-18T16:39:58.120

6

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.

edited Mar 18 '22 at 16:39

answered Jun 05 '16 at 13:28

glaucomorais

317
3
9

An addendum: When the state has parameters, you must define them in view/state identification. Check this pastebin: http://pastebin.com/2CaGYpnz – glaucomorais Jun 05 '16 at 14:56
Erros in your code Correct version $ionicHistory.clearCache([$state.current.name]).then(function() { $state.reload(); }); – Kirill A Nov 23 '16 at 12:49
Just missing a parenthesis – user623396 Nov 03 '17 at 07:29

Majid Mallis · Answer 7 · 2016-12-20T21:15:35.487

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.

score 0 · Answer 8 · edited Oct 14 '15 at 09:01

0

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.

edited Oct 14 '15 at 09:01

IKavanagh

6,089
11
42
47

answered Oct 14 '15 at 08:56

Krishnaraj

1

score 0 · Answer 9 · answered Dec 29 '15 at 00:17

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.

score 0 · Answer 10 · answered Jul 05 '16 at 15:55

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!

score 0 · Answer 11 · answered Feb 05 '17 at 23:38

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);

score 0 · Answer 12 · answered Apr 14 '17 at 15:57

0

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

answered Apr 14 '17 at 15:57

Mohammed BOUTCHEKKOUCHT

57
4

Dev · Answer 13 · 2017-09-11T19:44:50.633

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 = '';
});

grabtasker · Answer 14 · 2016-04-21T10:02:28.073

-1

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

edited Apr 21 '16 at 10:02

answered Apr 15 '16 at 05:06

grabtasker

57
10

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

14 Answers14

Linked