Angular JS links in hash mode not behaving right

Question

Having some issues with links in my page in my angular application.

So just quick overview :

I have html 5 mode turned off

here is my routing set up

  $routeProvider
    .when('/',{
      templateUrl: '/views/search.html',
      controller : 'SearchCtrl'
    })
.when('/result',{
  templateUrl: '/views/result.html',
  controller : 'resultCtrl'
})
.when('/no-result',{
  templateUrl: '/views/no-result.html',
  controller : 'noResultCtrl'
})
.otherwise({
  redirectTo: '/'
});

$locationProvider.html5Mode(false);

The issue I found is the behaviour of the url

If I just type in my domain, the page loads fine to the following url

Domain/# and the view loads correctly and loads the controller as well

But then lets say I have a a href in my page I want to link back to homepage

As follows

<a ng-href="/" class="link-dark">Link </a>

it changes the url to Domain/# but the view and controller do not load.

but if I change the url to

<a ng-href="/#/" class="link-dark">Link </a>

it loads correctly.

Is this normal behaviour something just seems off ?

yse thats normal. hrefs should be <a href="#/"> and the when should be like .when('/',{ — Kalhan
– Kalhan, Commented Dec 16, 2014 at 10:02

z.a. · Accepted Answer · 2014-12-16 10:10:55Z

0

this is the normal behavior. If you use something like Angular Ui-router you can actually use state without having to use # signs.

answered Dec 16, 2014 at 10:10

z.a.

2,7973 gold badges15 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Farhan Chauhan · Accepted Answer · 2014-12-16 10:14:55Z

0

Use Angular Ui Router.. Which solves your problem without any extra effort and gives many other functionality for routing.

answered Dec 16, 2014 at 10:14

Farhan Chauhan

5851 gold badge5 silver badges14 bronze badges

Comments

sam · Accepted Answer · 2014-12-16 10:31:40Z

0

Here is an excellent article explaining how the angular routing work with the hashbang use (#). http://sidazad.tumblr.com/post/92336467073/demystifying-angularjs-routing-html5-and

You will see that yes, it is the normal behavior.

To explore a bit further, I will say that you can customize angular to remove the hashbang but I would recommend you keep it if you want to be able to go to any page of your application by URL. If you choose to remove this hashbang for instance, you would have to add an endpoint on your server that would return the main page of your application for each call to an url like '/something' instead '/#/something'. Don't hesitate to ask if I am not clear enough.

answered Dec 16, 2014 at 10:31

sam

3,5412 gold badges37 silver badges43 bronze badges

Collectives™ on Stack Overflow

Angular JS links in hash mode not behaving right

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related