1

This is my JS (I set html5Mode to True and I am using $http $window and $location:

.config(['$locationProvider', function($locationProvider){
    $locationProvider.html5Mode(true); // Important. Needed for URLs.
}])

.controller("MainCtrl", ["$http", "$window", "$location", function($http, $window, $location) {

The base tag is also set, like so:

<base href="/">

This is my html page:

<div>
    <ul class="nav nav-pills">
        <li><a href="/">Home &#x25BC;</a></li>
        <li><a href='/post'>Post</a></li>
        <li><a href="/settings">Settings</a></li>
        <li><a href ng-click="ctrl.logoutUser()">Logout</a></li>
    </ul>
</div>

The issue is, when I click any of the links, the URL updates but the page does not refresh. If I remove $location from my controller then it works properly, but I need $location to grab the URL from my JS for other purposes. Is there a way for me to stop AngularJS from preventing to refresh the webpage?

SilentDev
  • 20,997
  • 28
  • 111
  • 214

2 Answers2

1

One solution is to add target='_self' to the anchor tags, like so:

<li><a href="/" target='_self'>Home &#x25BC;</a></li>

The answer was taken from this SO post: Angularjs Normal Links with html5Mode

Community
  • 1
  • 1
SilentDev
  • 20,997
  • 28
  • 111
  • 214
0

For those using ui-router, always try to use 

ui-sref="stateName.childState"

instead of href="myurl", this will prevent reloading issue.

reference: https://github.com/angular-ui/ui-router/wiki/quick-reference#ui-sref

Ganesh Vellanki
  • 412
  • 8
  • 18