python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
ng href directives in angularjs

ng-href directives in angularjs

The ng-href is a angular directive just like href tag both are working same. The ng-href directive is standard way to use angularjs and bind it dynamically URLs to user data. 

If not, your href are broken when they contain interpolation directives.

for example. The hreftag will look like in angular

    <a href="{{ username }}" target="_self"  title="{{username}} >Facebook Page</a>

for example. in angular ng-href  directive will look like.

    <a ng-href="{{username}}" target="_self" title="{{username}}">My Facebook Page..</a>

The detail example of ng-href  directive as given below.

<!DOCTYPE html>
<head lang="en">
    <meta charset="utf-8">

    <script type="text/javascript" src=""></script>
    <script type="text/javascript">
        var ng = angular.module("app", []);

        ng.controller("controller", function ($scope) {
            $scope.username = "anilsinghkushinagar";

<body ng-app="app">
    <div ng-controller="controller">
        <div>Click on below links.</div>
            <a ng-href="{{username}}" title="{{username}}" target="_self">My Facebook Page..</a>
            <a href="{{ username }}">Facebook Page</a>


The output look like below.


Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - and
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like Powered by Blogger.
ASK Questions