AngularJs: Reload page

Question

<a ng-href="#" class="navbar-brand" title="home" data-translate>PORTAL_NAME</a>

I want to reload the page. How can I do this?

Alexandrin Rus · Answer 1 · 2021-07-09T11:08:52.887

269

You can use the reload method of the $route service. Inject $route in your controller and then create a method reloadRoute on your $scope.

$scope.reloadRoute = function() {
   $route.reload();
}

Then you can use it on the link like this:

<a ng-click="reloadRoute()" class="navbar-brand" title="home" data-translate>PORTAL_NAME</a>

This method will cause the current route to reload. If you however want to perform a full refresh, you could inject $window and use that:

$scope.reloadRoute = function() {
   $window.location.reload();
}

**Later edit (ui-router):**

As mentioned by JamesEddyEdwards and Dunc in their answers, if you are using angular-ui/ui-router you can use the following method to reload the current state / route. Just inject $state instead of $route and then you have:

$scope.reloadRoute = function() {
    $state.reload();
};

edited Jul 09 '21 at 11:08

answered Feb 19 '14 at 15:55

Alexandrin Rus

4,470
2
16
29

2

This is a good answer if you're desperate to Angularise the reload. – spikeheap Feb 19 '14 at 15:59
How can I change this behavior globally instead of adding an action to all links – OMGPOP Aug 16 '15 at 04:58
@OMGPOP What exactly do you mean by globally for all links? – Alexandrin Rus Aug 16 '15 at 22:49
i mean, for all links you need to do this. is it possible to config once for all links? – OMGPOP Aug 18 '15 at 03:42
@AlexandrinRus this give's me the following [$rootScope:infdig] 10 $digest() iterations reached. Aborting! – alphapilgrim Jan 29 '16 at 18:10
@AlexandrinRus $route is part of ng.route.IRouteService?? – cracker Jun 23 '16 at 10:24
Brilliant! This worked like a charm, and it's so simple! – David Morton Sep 09 '16 at 12:35

Florian F. · Answer 2 · 2016-06-03T17:57:30.483

52

window object is made available through $window service for easier testing and mocking, you can go with something like:

$scope.reloadPage = function(){$window.location.reload();}

And :

<a ng-click="reloadPage"  class="navbar-brand" title="home"  data-translate>PORTAL_NAME</a>

As a side note, i don't think $route.reload() actually reloads the page, but only the route.

edited Jun 03 '16 at 17:57

answered Feb 19 '14 at 15:59

Florian F.

4,700
26
50

2

I recommend using `$window` instead of `window`. – Jeroen Jun 03 '16 at 08:04
Thanks for your contribution. Would you explain us why ? – Florian F. Jun 03 '16 at 17:47
1

Yes, sorry. It's best explained by [the `$window` docs](https://docs.angularjs.org/api/ng/service/$window), mainly it's because `reloadPage` would be (better) testable when it uses `$window`. – Jeroen Jun 03 '16 at 17:56

score 23 · Answer 3 · answered Aug 27 '15 at 12:14

23

 location.reload();

Does the trick.

<a ng-click="reload()">

$scope.reload = function()
{
   location.reload(); 
}

No need for routes or anything just plain old js

answered Aug 27 '15 at 12:14

user3806549

1,428
1
17
25

2

love the simplicity! – Shawn de Wet Mar 07 '16 at 04:17
It breaks karma/jasmine tests because it does a page full reload and it is not mockable. By using the `$window` provider it is possible to mock in tests – Bruno Vasconcelos Dec 23 '20 at 00:57

score 14 · Answer 4 · edited May 23 '17 at 12:17

14

Similar to Alexandrin's answer, but using $state rather than $route:

(From JimTheDev's SO answer here.)

$scope.reloadState = function() {
   $state.go($state.current, {}, {reload: true});
}

<a ng-click="reloadState()" ...

edited May 23 '17 at 12:17

Community

1
1

answered Oct 16 '14 at 10:36

Dunc

18,404
6
86
103

score 9 · Answer 5 · answered Nov 06 '14 at 17:13

9

If using Angulars more advanced ui-router which I'd definitely recommend then you can now simply use:

$state.reload();

Which is essentially doing the same as Dunc's answer.

answered Nov 06 '14 at 17:13

JamesEddyEdwards

131
1
3

score 5 · Answer 6 · answered Aug 20 '17 at 00:36

My solution to avoid the infinite loop was to create another state which have made the redirection:

$stateProvider.state('app.admin.main', {
    url: '/admin/main',
    authenticate: 'admin',
    controller: ($state, $window) => {
      $state.go('app.admin.overview').then(() => {
        $window.location.reload();
      });
    }
  });

score 2 · Answer 7 · edited Jan 14 '20 at 18:53

2

Angular 2+

I found this while searching for Angular 2+, so here is the way:

$window.location.reload();

edited Jan 14 '20 at 18:53

neowinston

7,584
10
52
83

answered Mar 28 '19 at 15:38

Nitin Jadhav

6,495
1
46
48

1

this isn't specific to angular, by the way, its javascript way. – Nitin Jadhav Mar 28 '19 at 15:38

score 2 · Answer 8 · answered Jul 17 '20 at 06:44

2

This can be done by calling the reload() method in JavaScript.

location.reload();

answered Jul 17 '20 at 06:44

Madhusanka Edirimanna

1,318
10
9

score 1 · Answer 9 · answered Feb 19 '14 at 15:57

1

It's easy enough to just use $route.reload() (don't forget to inject $route into your controller), but from your example you could just use "href" instead of "ng-href":

<a href=""  class="navbar-brand" title="home"  data-translate>PORTAL_NAME</a>

You only need to use ng-href to protect the user from invalid links caused by them clicking before Angular has replaced the contents of the {{ }} tags.

answered Feb 19 '14 at 15:57

spikeheap

3,827
1
32
47

$route is part of ng.route.IRouteService?? – cracker Jun 23 '16 at 10:25

score 1 · Answer 10 · edited Aug 19 '16 at 14:55

On Angular 1.5 - after trying some of the above solutions wanting to reload only the data with no full page refresh, I had problems with loading the data properly. I noticed though, that when I go to another route and then I return back to the current, everything works fine, but when I want to only reload the current route using $route.reload(), then some of the code is not executed properly. Then I tried to redirect to the current route in the following way:

$scope.someFuncName = function () {
    //go to another route
    $location.path('/another-route');
};

and in the module config, add another when:

.config(['$routeProvider', function($routeProvider) {
     $routeProvider.when('/first-page', {
         templateUrl: '/first-template',
         controller: 'SomeCtrl'
     }).when('/another-route', {//this is the new "when"
         redirectTo: '/first-page'
     });
}])

and it works just fine for me. It does not refresh the whole page, but only causes the current controller and template to reload. I know it's a bit hacky, but that was the only solution I found.

an easier way might be `var reload = $location.url(); $location.url(''); $timeout(function() { $location.url(reload); });`; no need to create random routes. But it'd be interesting to see what code doesn't re-evaluate for you. It looks like even `redirectTo`s and `resolve` functions [re-execute on a normal `$route.reload()`](http://jsfiddle.net/502jz9fx/1/) (look at the console.log's). — Hashbrown, Sep 24 '18 at 01:31

score 1 · Answer 11 · answered Jan 11 '17 at 11:13

<a title="Pending Employee Approvals" href="" ng-click="viewPendingApprovals(1)">
                    <i class="fa fa-user" aria-hidden="true"></i>
                    <span class="button_badge">{{pendingEmployeeApprovalCount}}</span>
                </a>

and in the controller

 $scope.viewPendingApprovals = function(type) {
                if (window.location.hash.substring(window.location.hash.lastIndexOf('/') + 1, window.location.hash.length) == type) {
                    location.reload();
                } else {
                    $state.go("home.pendingApproval", { id: sessionStorage.typeToLoad });
                }
            };

and in the route file

.state('home.pendingApproval', {
        url: '/pendingApproval/:id',
        templateUrl: 'app/components/approvals/pendingApprovalList.html',
        controller: 'pendingApprovalListController'
    })

So, If the id passed in the url is same as what is coming from the function called by clicking the anchor, then simply reload, else folow the requested route.

Please help me improve this answer, if this is helps. Any, suggestions are welcome.

This took me one month to figure it out why is page not reloading — sam, Apr 14 '17 at 09:50

score 0 · Answer 12 · edited Jul 01 '20 at 04:06

0

This can be done by calling the reload() method of the window object in plain JavaScript

window.location.reload();

edited Jul 01 '20 at 04:06

KevinG

882
3
16
33

answered Jun 30 '20 at 20:53

Skillz

308
4
10

Sandeep M · Answer 13 · 2020-07-15T04:56:15.860

0

I would suggest to refer the page. Official suggestion

https://docs.angularjs.org/guide/$location

edited Jul 15 '20 at 04:56

answered Jul 15 '20 at 04:47

Sandeep M

248
3
6

AngularJs: Reload page

13 Answers13

Linked