Search code examples
javascriptangularjsngroute

Reloading page in single page application


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