Angular.js : How to use ng-href in template?

Question

I try to create a simple SPA with 1 index.html which include templates.

I got a problem with ng-href directive:

 myPage<         


        

Answer 1

ngHref is used to dynamically bind angular variables to the href attribute like so:

<a ng-href="#/{{myPathVariable}}"/>Take Me Somewhere</a>

Where in your scope:

$scope.myPathVariable = 'path/to/somewhere';

Then after angular compiles it, it looks like this:

<a ng-href="#/path/to/somewhere" href="#/path/to/somewhere" ... other angular attributes>Take Me Somewhere</a>

If your path is hardcoded into the page (you know where the link should take you on page load), you can just specify it in an href, which is why your third example works. Only use ngHref when you need angular to decide the route dynamically after the JS loads. This prevents your user from clicking links and going to an invalid route before angular has deciphered where the link should point. Documentation here