AngularJS ng src directive Video Lecture - Learn and Understand AngularJS

this is part 4 of angularjs tutorial in
this video we'll discuss the use of ng -
source directive in angular using a
binding expression with the image source
attribute results in a 4-0 for error
let's understand this with an example
here I have an asp.net web application
project to this project I have added
this images folder and within the folder
we have the United States of America
flag we want to display this image on a
web page so here I have HTML page 1 dot
HTML within this page I am going to use
an image element and set the source
attribute for now I'm going to hard-code
the source attribute value where is the
image present it's present in this
images folder and this image is fooled
as present within the root directory of
the project so for slash images for
slash USA - flag dot PNG so the part we
are specifying here is the relative path
and I am also going to set the style
attribute I'm going to set the height to
100 pixels and width to 200 pixels
let's close the image element and when
we refresh this page we should see the
flag on the web page now here we have
hard-coded the source attribute value of
the image element now let's say we want
to set this dynamically and we want to
do that using angularjs the way we do
that is by using binding expressions in
angular so for that we first need to
build the model for this view so I'm
going to go to the script dot J's file
this file is present within the scripts
folder this is the same file that we
worked with in the previous video
session all I have done so far is
removed the code that was already there
within this controller function so
within this controller function I'm
going to create a country object and
this country object is going to have
three properties name of the country
capital and its flag path so name of the
country is going to be United States of
America capital
is going to be Washington DC and we want
the flag part so the property is flag
and the part is going to be four slash
images four slash USA - flag dot P and J
so we have our object here we need to
attach this to the scope object so we
are passing the scope object as a
parameter to this controller function so
dollar scope dot country equals country
so we have our controller ready and
within our view notice for this
development in our we have specified my
controller as the controller using ng -
controller directive so within this
development I'm going to include three
more developments so the first div is
going to display the name of the country
and to display the name of the country
I'm going to use the angularjs binding
expression and what is our model the
model is country and it has got the name
property which is going to display the
name of the country and that similarly
we want to display the country capital
and the image so capital is going to be
country dot capital and we want to
display the image so I'm going to use
the image element so I'm going to copy
and paste this right here so instead of
hard-coding the source attribute value
I'm going to specify that dynamically
using a binding expression so let's use
the end Eligius binding expression and
the part for the flag is going to come
from flag property of the country object
okay and we have our style attribute
along with the source attribute I'm also
going to specify the alt attribute again
I'm not hard going to hard code the
value instead I'm going to use a binding
expression so the alternate text is
going to be country dot name so that
should return as United States of
America and since it is the United
States of America flag I'm going to up
and this word flag with a space in front
of it so that will be at the alternate
text just in case if the image is not
loaded for some reason you know this
alternate text will be displayed all
right so let's save our changes
and let's go ahead and reload this page
look at that we get the name of the
country the capitol and the flag as
expected but then look at the console
tab right here within the developer
tools we have one error and look at the
error that we get for zero for not found
so let's understand the reason for this
for zero for the image is displayed fine
so why are we getting this for zero for
error the reason for this for zero for
error is because we are using a binding
expression with the image source
attribute so here we have the source
attribute we are using the angular JS
binding expression so why do we get that
for zero for if we use an angular
binding expression with the source
attribute of the image element that's
because as soon as the Dom is in our
parse at that point a request is issued
to load that image from the server at
that point the angular JS binding
expression is not evaluated so it's
using this in our double curly brace
country dot flag and closing double
curly brace as the path to load the
image from and you know we don't have an
image at that path in fact that's not a
valid path so that's why we get this 4 0
4 error now the obvious question that
comes to our mind is if the image can't
be found at that part then how is it
displaying the image that we see right
here now the reason we are seeing this
image because a second request is made
you know to load that image after the
binding expression that we have
specified as the value for the source
attribute is evaluated okay so in effect
there are two requests made to the
server to load that image one is loaded
as soon as the Dom is parsed at that
point the binding is expression is not
evaluated so obviously you know which is
an invalid path here it can't find the
image so we get that
4:04 error that we see in the developer
tools and after this binding expression
is evaluated you know we get the correct
path from the model which is for slash
images for slash USA - flag PNG and at
that point after the binding expression
is evaluated you know the image is
loaded without any problem and that's
how we see this image right here so in
effect there are two requests that are
made to the server let's actually prove
that I have fiddler running already here
let's go ahead and delete all the
traffic that is captured and what I'm
going to do is press ctrl R to reload
the page and now when we go back to the
filter look at that we have four zero
four here and look at the URL to which
it has made the request localhost colon
we have a port number there and forward
slash look at the path it is using
country dot flag that is nothing but you
know the property that we have specified
here within the binding expression
that's not a valid part so it obviously
can't load an image from that part and
that's the reason why we get that four
zero four and after that there is
another request and that request is made
to in a localhost colon same port number
four slash images four slash USA - flag
dot PNG and that request is made after
this angle Aegis binding expression is
evaluated okay so two requests going to
the server so how do we resolve this to
resolve this we use ng - source
attribute locate the directive in
angular terms this ng - source directive
is going to ensure that a request is
issued only after angularjs has
evaluated the binding expression that
means it's going to solve two problems
one we will not get that for 0 for error
anymore and only one request is made to
load that image let's actually prove
that again with an example so instead of
issuing in our the source attribute I'm
going to specify ng - source attribute
save the changes and let's reload this
page look at that the image is displayed
fine
and obviously within the console window
we don't have any error let's go back to
fiddler and look at the request right
here there is only one request made to
load that image okay so that's why you
know whenever you use angular binding
expression you should use ng - source
directive as opposed to the source
attribute and let's also quickly look at
this alt attribute right here so here we
are using a binding expression for the
alt attribute so this will be displayed
in case if the image can't be loaded for
some reason
so let's actually change the image path
to something like USA - flag one dot PNG
and let's reload this page look at that
the image can't be loaded and you know
the alternate text is displayed USA flag
thank you for listening and have a great
day