The ngHref Directive in AngularJS solves the problem of replacing the markup when the link is broken which thus leads the system to return a 404 error. Instead of using markup like {{hash}} in an href attribute which will change or replace the markup value, we should use the ngHref directive since that link can be broken and thus leads to return a System Error.

Syntax

..content..

Example ? ngHref Directive

Create a file "ngHref.html" in your Angular project directory and copy-paste the following code snippet.

   
      

      
   

   
      

         Welcome to Tutorials Point
      
      

         AngularJS | ngHref Directive
      
      

         
Go to TutorialsPoint
      
   

Output

To run the above code, just go to your file and run it as a normal HTML file.

Example 2

Create a file "ngHref.html" in your Angular project directory and copy-paste the following code snippet.

   
      

      
   

   
      

         Welcome to Tutorials Point
      
      

         AngularJS | ngHref Directive
      
      

      link 1 (link, This link will not reload)

      link 2 (link,This link will not reload)

      link 3 (link, Thislink will reload!)

      anchor (nolink)

      link (link, change location)
   

Output

To run the above code, just go to your file and run it as a normal HTML file. You will see the following output on the browser window.