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.

+ Source files on GitHub –
+ Atom text editor –

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

For more front-end development tutorials & to black-belt your coding skills, head over to

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

Twitter – @TheNetNinja –


  1. 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 ../foldername/filename.extention . 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 .

  2. Hi Shaun! I have a question. In a previous video you had said that using an expression inside a src attribute wouldn't work and you need to use the ng-src attribute. However, it seems to be working fine here. Can you explain why it works here but previously didn't?


  3. Whenever i make a change in my code, i get a 404 error, and the page is stuck on /directory, if i go back to localhost:8000 which is my server it works

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

  5. 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!!

  6. Why did you need to create the scope property and pass data through via html attributes? why not use the NinjaController scope?


Please enter your comment!
Please enter your name here