AngularJS Tutorial #18 - Custom Directives

Yo ninjas, in this AngularJS tutorial, I'll be showing you how to create a custom directive and using it to apply specific behaviour to your project. Custom directives can be used to create pretty much whatever functionality you need in your Angular app, and are great because they can be reused anywhere.

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 ==================

[BenMWard]

Your tutorials are *really* helpful and I'm baffled by the lack of views... this set of 25 tutorials was honestly the least intimidating and most logical flow for introducing angular that I've seen yet, and helped me tons. Thank you!!

[somanylizards]

I've been jumping from site to site to find what you simply laid out in like 8 minutes. Thank you, you are awesome!

[johnbuchmann]

This series IMO is the best non-intimidating series I've seen, and a great start before digging deeper. Wish I had seen this first before doing other harder-to-understand series.

[WiLL-bysw]

one of the best instructor for sure! Thanks man!

[fabriziobertoglio]

Thanks, learning Angular is amazing. Incredible that you could find on youtube explanation for any doubt that come to your mind

[zaheetbatada]

best tutorial man, even afer 4 years of making the video series on it, its still helpful ! thanks a lot <3 can u make more on this please?

[ben.aka.bigben]

I watched few, your explanation was the cleanest and most direct. cheers!

[chengjinfei]

Your tutorials are really helpful man .

[atamishali]

Probably the best one on directives. Good work.

[puasoft]

Helpful info as always.

It turns out the controller can also be declared controller: 'NinjaController' to merge the two functions into 1. :)

[zxrlwpe]

great angular`s explanations. thanks for the best tutorial!

[nerdiloo]

your explanation is gold! Sadly in 2018 I have to build/maintain some code using AngularJS instead later versions which I prefer. Now I don't have to worry about gluing patches of hair on my head. THANK YOU.

[VV-hkix]

So thanks of you, you explained in a very nice and fast paced way. Thank you so much once again

[cardenat]

Very good and useful tutorial, thanks a lot.

[LovisaSandhu]

Love these tutorials, thanks Net Ninja!
I was wondering if we have to set the random $scope each time we add/remove items in our data array or is there a way to adjust the Math.floor(Math.random() * 4) so it automatically updates to how many items there are?

[ZeWitchKid]

i was stuck, i watched this, now im not stuck, so i subbed!

[salmahassan]

very helpful tutorial, thank you .
but excuse me i have a 2 questions :
1) in the example which you did in the tutorial you made a random ninjas directive to get random ninjas, ok why didn't make it by make another html file with its controller, then inject it in the main html file by ng-include directive ? does directive way save time or easier ? or there are another reasons ?
2) i want to ask about file paths .. i know that if the file which i want to get in the same level, i will just write filename.extention ... and i it is in another folder and i am in another one . but i found the paths in angular and node doesn't work in the same way for ex in angular app i have home.html and partialHome.html in the same folder "views" so i thought that i can write
<ng-include src=" ' partialHome.html ' "></ng-include>
but it doesn't work .. but when i write
<ng-include src=" 'views/partialHome.html ' "></ng-include>
it worked .. why ? is there another technique to get path in angular and node ?
if so, , how can i search about that ?
and thank you very much .

[vishekkumar]

how the ninjas[random] is accessible in random.html as we have defined random in app.js

[NadimMadani]

Hello. Instead of multiplying by 4 I tried to multiply Math.random() by the length of the ninjas array. I assumed this would work since $scope was passed into the function but I am noticing that $scope.ninjas is undefined? Why is that and what would be the best way to get the length of the array?

[AMITRIKKUINDIA]

Hi for me img is not showing in browser there are no errors logged in console but when I inspected through elements image tag was showing like <img> there was no source inside?