AngularJS Tutorial #15 - ng-src directive

Hey ninjas, in this AngularJS tutorial, I'll show you why we use the ng-src directive over the typical src attribute when using resources such as images. ng-source makes sure that all dynamic data is loaded into the application before trying to request the assets.

Hey gang, in this AngularJS tutorial, I'll be introducing you to filters and how we can use them to change the way our data is displayed to a user. Filters can be used in conjunction with ng-repeat, or directly on the expression itself. We use Angular filters to do things like ordering a list of items alphabetically, or by type, or to display numbers as a currency.

----- COURSE LINKS:

---------------------------------------------------------------------------------------------
You can find more front-end development tutorials on CSS, HTML, JavaScript, jQuery, WordPress & more on the channel homepage...

========== JavaScript for Beginners Playlist ==========

============ CSS for Beginners Playlist =============

============== The Net Ninja =====================

================== Social Links ==================

[NetNinja]

I say 16th tutorial... I really mean 15th ;)

[SimPwear]

I am going to get my black belt when I hit the last lesson. Thanks for such an awesome series, I am learning a lot sensei!

[wilfredomendez]

For those wondering how to change the text color for the "yellow" belt background, this is how I managed to changed it, enjoy !!!!
<span class="belt" ng-if="ninja.belt === 'yellow'" style="background: {{ninja.belt}}; color:black">{{ninja.belt}} belt</span>
<span ng-if="ninja.belt != 'yellow'" class="belt" style="background: belt</span>

[alexkhalamsky]

Great tutorial, by the way
I am having a lot of fun!

[jenrose]

How would you then implement the image upload function? I tried it with <input type="file", etc. but then it doesn't actually display the image next to the text.

[alexkhalamsky]

Could you define image source as a variable containing as a value a path which includes another variable (name)?

[Jongo]

You didn't commit/push your images folder :(

[michaelzmyers]

why are all the other ninja related things in expressions {{}} and ninja.available isn't? Why does that one not have to be in the expression braces? Great series btw!!

[kandoliyasagar]

Unable to view image. it shows an image icon but not the actual image. Is it because of it has size limitations??

[suraskumarnayak]

Doubt: in ng-src is a directive then why expression tags are used ??

[anish]

Hi @TheNetNinja I am not able to get the images in your GitHub link. Can you please share those images or different images if you don't want to share those? Thanks in advance.

[zeeshanmanzoor]

@Ninja: what if we want to add placeholder thumb for new Ninjas. please cover this one as well. thanks

[muddassirahmed]

why are all the other ninja related things in expressions {{}} and ninja.available isn't? Why does that one not have to be in the expression braces?

[vp]

How to set a default image incase image doesn't exist

[chinfoplaya]

why did u not provide the images for us? :/

[sathishchandran]

how can we display data from database using $http

[ousaidamine]

hi ninja, why the ng-scr not working ??

[ramilmoral]

Don't worry it's still kicking..

[suraskumarnayak]

Doubt: in ng-src is a directive then why expression tags are used ??