Reloading page in single page application

Issue

I am in the middle of building a single page application. I am in a situation in which I have a slider in one tab and implemented a google map api in another tab. I have implemented the slider using bootstrap carousel. Now since this is a single page application when I am routing from one tab to another tab, slider is not working neither google map is coming up. And after reloading the page everything is working fine.

I am trying find an alternate solution for this one. I am trying to reload the tab once again once it’s clicked.

<li class="nav-item">
   <a ng-click="reloadRoute()" class="nav-link" href="#/contact">Contact Us</a>
</li>

And in controller this is what I am trying

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

But it’s not working.
After following the post and also the documentation looks like it’s not possible to reload a single page in single page application once the entire application is loaded. Is there any alternate solution for this ? I am using AngularJS version 1.5.9

Solution

It would be wiser to learn how to integrate Google maps and the slider with the AngularJS framework than to reload the entire page.

If you must reload the page, use $window.location.reload(true).

For more information, see MDN Web API Reference – Location.reload

Answered By – georgeawg

Answer Checked By – Timothy Miller (AngularFixing Admin)

Leave a Reply

Your email address will not be published.