[angularjs] 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?

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

window.location.reload();

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.

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

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

location.reload();

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.

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

Angular 2+

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

$window.location.reload();

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

 location.reload(); 

Does the trick.

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

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

No need for routes or anything just plain old js

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.

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.

I would suggest to refer the page. Official suggestion

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

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