Difference between “href” and “ng-href” in AngularJS

Question

I\'ve used both href and ng-href and I couldn\'t see the difference between them.

Why does Angular have the ng-href attribute, and

Answer 1

From the documentation:

Using Angular markup like {{hash}} in an href attribute will make the link go to the wrong URL if the user clicks it before Angular has a chance to replace the {{hash}} markup with its value. Until Angular replaces the markup the link will be broken and will most likely return a 404 error. The ngHref directive solves this problem.

Effectively, the only place you're using it is for links in which you need to rely on a value provided to the DOM by Angular. If you do not require Angular for a part of that link, or you don't plan on using Angular to generate that link, then you do not need to use ngHref.

Answer 2

If you need to bind values from your model you use the directive. For example:

<div ng-init="address='http://stackoverflow.com/questions/37467603'">

  <a ng-href="{{address}}">Dynamic link</a>

  <br/>

  Change the link dynamically: <input type="text" ng-model="address">

</div>

In the example above, the value of address is programmatically bound to the value in the input text box, which you can change.

If you don't need to be dynamic (i.e. react to a change in the model's state), then you can simply stay with href:

<a href="http://stackoverflow.com/questions/37467603"/>Static link</a>