CODEWITHSUNDEEP
angularjsangularjs-scope
user880386
user880386

Reputation: 2827

AngularJs: Reload page

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

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

Upvotes: 135

Views: 411081

Answers (13)

alexandrin88
alexandrin88

Reputation: 4400

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

Upvotes: 270

Madhusanka Edirimanna
Madhusanka Edirimanna

Reputation: 1428

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

location.reload();

Upvotes: 2

Sandeep M
Sandeep M

Reputation: 248

I would suggest to refer the page. Official suggestion

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

enter image description here

Upvotes: 0

Skillz
Skillz

Reputation: 350

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

window.location.reload();

Upvotes: 0

Nitin Jadhav
Nitin Jadhav

Reputation: 7336

Angular 2+

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

$window.location.reload();

Upvotes: 2

Gucu112
Gucu112

Reputation: 966

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

Upvotes: 5

AMRESH PANDEY
AMRESH PANDEY

Reputation: 195

<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.

Upvotes: 1

vivanov
vivanov

Reputation: 1522

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.

Upvotes: 1

Florian F.
Florian F.

Reputation: 4700

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.

Upvotes: 52

user3806549
user3806549

Reputation: 1438

 location.reload();

Does the trick. 

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

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

No need for routes or anything just plain old js

Upvotes: 23

Dunc
Dunc

Reputation: 18932

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()" ...

Upvotes: 14

JamesEddyEdwards
JamesEddyEdwards

Reputation: 181

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.

Upvotes: 9

spikeheap
spikeheap

Reputation: 3887

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.

Upvotes: 1

Related Questions