AngularJS change the default behavior of the anchor tag or <a> element.
In HTML <a> tag reload the page when its href attribute is empty, but AngularJS ignore the page reloading when a user clicks on the anchor <a> tag with href attribute is empty.
Syntax for <a> Anchor directive in AngularJS:
<div ng-app=""><a href="">content</a></div>
Sample coding for <a> Anchor directive in AngularJS:
Tryit<!DOCTYPE html><html><head><title>Wikitechy AngularJS Tutorials</title><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/
angular.min.js"></script></head><body><p>Click the two links below:</p><a href="">I am anchor tag inside HTML</a><div ng-app=""><a href="">I am anchor tag inside AngularJS</a></div></body></html>
The <a> tag inside HTML:
<a href="">I am anchor tag inside HTML</a>
The <a> tag inside AngularJS:
<div ng-app=""><a href="">I am anchor tag inside AngularJS</a></div>
Code Explanation for <a> Anchor directive in AngularJS:
The <a> tag with empty href attribute is defined inside the HTML Document.
The ng-app=”” is used to create the root element (div) for the AngularJS Application.
The <a> tag with empty href attribute is defined inside the AngularJS Application.
Sample Output for <a> Anchor directive in AngularJS:
When user try to click the anchor tag inside the HTML that will be reload the same page.
When user try to click the anchor tag inside the AngularJS, there is no action for the event.
