AngularJS Directives Tutorial

We, at Fundoo Solutions are proud to announce the launch of our University Section where we will be discussing and posting some interesting tutorials, tips and tricks and case studies from our experiences. We are rolling out the Tutorial section with an indepth dive  into AngularJS Directives. Yes, we now have a step by step AngularJS Directives Tutorial!

AngularJS Directives are AngularJS’ way of creating custom reusable components. For this tutorial, we just expect you to be familiar with AngularJS basics, as well as be comfortable with syntax and scopes and other terms we might use throughout the tutorial.

For the purpose of the tutorial, we cover:

  • What is a directive
  • Some basics dos and dont’s & useful tips
  • Creating a simple rating widget that shows ratings
  • Allows clicking and changing the rating
  • Lets controllers register callbacks that are notified when the user selects a rating

Here’s what it will look like by the time we are done with it:

AngularJS Directives Tutorial – A Rating Widget

By the end of the tutorial you’ll have fair enough idea of how directives in AngularJS work and we are pretty sure you’ll start coding your own custom directives soon after.

Can’t wait to get started? We too, so here is the link for AngularJS Directives Tutorial.

AngularJS Directives Tutorial!

Abhiroop PatelAngularJS Directives Tutorial
  • http://twitter.com/eugeniyoz OZ

    Too complex example for start.

    • http://theshyam.com/ Shyam Seshadri

      Sorry you feel that way. What parts would you suggest we improve?

  • Arun Mittal

    This is great work, much better then angular docs. thing that i was looking to understand is missing. i am not able to understand the usage of controller attribute in the object that directive returns.

    • http://theshyam.com/ Shyam Seshadri

      Thanks for the insight. We’ll look to have one on when to use that in a future post!

    • http://theshyam.com/ Shyam Seshadri

      We will look at doing one on structuring advanced directives in one of the following posts!

  • Alan

    This is the best introductory tutorial on Directives that I’ve found on the internet !!
    I finally start to get Directives.
    You start simply and build with nice examples.
    Any chance that you could do a similar tutorial on Testing?
    Many thanks.

    • http://theshyam.com/ Shyam Seshadri

      Hi Alanm

      Thank you for the comment! Glad we could help.

      We will definitely look at doing one on unit testing in AngularJS in one of the future posts

      Thanks!

  • Naresh

    The best tutorial on Directive along with eventHandler and update function on parentScope at controller level.

    This step by step presentation is superb. Enjoyed every bit of it, where not only bonus point discussed over eventHandling, but additional importance were stressed over object passing with key value pair to the parentScope function “scope.onRatingSelected’. Absolutely great…

    Shyam:
    On template, instead of “star”(u2605), It is possible to use “pic/button” or clickable item? Not sure how to handle it via css and modify the template

    (I’m new to client side and even poor on css)

    template: ” +
    ” +
    ‘u2605′ +
    ” +
    ”,

    Thanks, Shyam.