Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

AngularJS ng-src directive

Suggested Videos
Part 1 - What is AngularJS
Part 2 - Angular modules and controllers
Part 3 - Controllers in AngularJS




In this video we will discuss the use of ng-src directive in AngularJS




Let us understand this with an example : We want to display the name of the country, capital and it's flag.

angular ng-src vs src

AngularJS Code : The controller builds the country model. The flag property of the country object has the path of the image.


var myApp = angular
                .module("myModule", [])
                .controller("myController", function ($scope) {
                    var country = {
                        name: "United States of America",
                        capital: "Washington, D.C.",
                        flag: "/Images/usa-flag.png"
                    };
                    $scope.country = country;
                });

HTML Code : In the view we are binding country.flag property with the src attribute of the image element.


<!doctype html>
<html ng-app="myModule">
<head>
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/Script.js"></script>
</head>
<body>
    <div ng-controller="myController">
        <div>
            Country : {{ country.name }}
        </div>
        <div>
            Capital : {{ country.capital }}
        </div>
        <div>
            <img src="{{country.flag}}"
                 alt="{{ country.name + ' Flag' }}"
                 style="height:100px; width:200px" />
        </div>
    </div>
</body>
</html>

When you view the page in the browser, the country details and the flag are displayed as expected. The problem with the img src attribute is that we get a 404 error. To see the error, launch the developer tools.

Let's now understand the reason for the 404 error
As soon as the DOM is parsed, an attempt is made is to fetch the image from the server. At this point, AngularJS binding expression that is specified with the src attribute is not evaluated. Hence 404 (not found) error.

To fix the 404 error use the ng-src directive : ng-src attribute ensures that a request is issued only after AngularJS has evaluated the binding expression

AngularJS tutorial for beginners

6 comments:

  1. Hi Venkat,
    First, thank you for sharing your knowledge. Great tutorials

    Second, I am an Asp.net c# developer. should I move to AspNet MVC to be able to use angularjs

    ReplyDelete
  2. Great tutorials, I'm learning a lot with them! Really thank you!

    ReplyDelete
  3. Sir please tell me how intellisense work in angular js?

    ReplyDelete
  4. No ,I do not think to use AngularJS ,we should move to ASP NET MVC. We can use angularJS without using MVC. This is my perception

    Venkat will clarify on this.

    Thanks,

    Pallab Panda

    ReplyDelete
  5. For getting intellsence just add the angular.js in the file that u are using.

    ReplyDelete
    Replies
    1. To get intellisense just drag and drop the angular.js file to the page where code need to be entered.
      At that time it will add following statement which is rerenceing to angular
      ///

      after that intellisense will be available automatically

      Delete

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.