AngularJS ng-href Directive Last Updated : 11 Jul, 2025 Comments Improve Suggest changes Like Article Like Report The ng-href directive is used when we have an angular expression inside the href value. If href attribute is used then the problem is that if in case the link is clicked before AngularJS has replaced the expression with its value then it may go to the wrong URL and the link will be broken and will most likely return a 404 error while ng-href directive checks that the link is not broken even if the link is clicked before the code evaluation by AngularJS. Syntax: <element ng-href="addr"> Content ... </element> Parameter value: addr: It refers to the string containing the angular expression.Example 1: This example describes the use of the ng-href Directive in AngularJS, where the ng-init directive is used to initialize AngularJS Application data, & contains the URL. HTML <!DOCTYPE html> <html> <head> <title> AngularJS ng-href Directive </title> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </script> <style> body { text-align: center; font-family: Arial, Helvetica, sans-serif; } </style> </head> <body ng-app="" style="text-align:center"> <div ng-init="url = 'https://www.geeksforgeeks.org/'"> <h1 style="color:green">GeeksforGeeks</h1> <h2>ng-href Directive</h2> <p>Go to <a ng-href="{{url}}">GeeksforGeeks</a> </p> </div> </body> </html> Output: Example 2: This is another example that describes the ng-href Directive in AngularJS. HTML <!DOCTYPE html> <html ng-app=""> <head> <title> AngularJS ng-href Directive </title> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"> </script> <style> body { text-align: center; font-family: Arial, Helvetica, sans-serif; } h1 { color: green; } </style> </head> <body ng-controller="gfg"> <h1>GeeksforGeeks</h1> <h3>ng-href Directive</h3> <a ng-href="{{ webpage }}"> GeeksforGeeks </a> <script> function gfg($scope) { $scope.webpage = "https://www.geeksforgeeks.org/"; } </script> </body> </html> Output: Comment More infoAdvertise with us Next Article AngularJS ng-if Directive V Vishal Chaudhary 2 Follow Improve Article Tags : Web Technologies AngularJS AngularJS-Directives Similar Reads AngularJS ng-if Directive The ng-if Directive in AngularJS is used to remove or recreate a portion of the HTML element based on an expression. The ng-if is different from the ng-hide directive because it completely removes the element in the DOM rather than just hiding the display of the element. If the expression inside it 2 min read AngularJS ng-focus Directive The ng-focus Directive in AngluarJS is used to apply custom behavior when an element is focused. It can be used to show/hide some element or it can pop up an alert when an element is being focused. It is supported by <a>, <input>, <select> and <textarea> elements. Syntax: 1 min read AngularJS ng-model Directive The ngModel directive is a directive that is used to bind the values of the HTML controls (input, select, and textarea) or any custom form controls, and stores the required user value in a variable and we can use that variable whenever we require that value. It also is used during form validations. 4 min read AngularJS ng-mouseup Directive The ng-mouseup Directive in AngularJS is used to apply custom behavior when a mouseup event occurs on a specific HTML element. It can be used to show a popup alert when the mouse button is pressed. The order of a mouse click is Mousedown, Mouseup, Click. It is supported by all HTML elements. Syntax: 2 min read AngularJS ng-src Directive The ng-src Directive in AngularJS is used to specify the src attribute of an <img> element, ie., it overrides the original src attribute for an <img> element. This attribute must be used if we have the Angular code inside of the src element. It ensures that the wrong image is not produce 2 min read AngularJS ng-app Directive The ng-app Directive in AngularJS is used to define the root element of an AngularJS application. This directive automatically initializes the AngularJS application on page load. It can be used to load various modules in AngularJS applications. The ng-app directive declares only once in the HTML doc 1 min read Like