angular js

AngularJs Tutorial 7 — Creating a Simple Component using Directives (with a Charts example)

Its been a while. (seriously!), its like getting awake from incubation chamber and write another angularjs tutorial!!

And, today we gonna see AngularJs Directives.

Why should i use Directives?!

  • Reusable components!
  • NEVER manipulate DOM from your Angular controller/anywhere except via directive

They are…  “A powerful tool for modifying the DOM”. As we know, AngularJs does the compilation stuffs of DOM and any other event related to it and if we directly add some event (like we do using jQuery) is seriously wrong. We surely end up messing AngularJs.

To handle this, Angular Js Directive provides a methods such $compile, and whatever we mention their will get compiled by AngularJs itself.

AngularJs Compilation Cycle:

Compile function:

  • Used for template DOM manipulation ,
  • Provided by directive, (Hence manipulations that apply to all DOM clones of the template associated with the directive.
  • Ex: Manipulation of tElement = template element)

Link function:

  • Used for registering DOM listeners and as well as updating the DOM.
  • It is executed after the template has been cloned — e.g., inside an <li ng-repeat…>, the link function is executed after the <li> template (tElement) has been cloned (into an iElement) for that particular <li> element.
  • Ex: $watch expressions on the scope, manipulation of iElement = individual instance element

Now, getting back to our example, but  before that I’m not gonna start teaching from “Hello directive”. Eventhough AngularJs documentation sucks, go through it anyway, we will get a basic idea. http://docs.angularjs.org/guide/directive

Now, lets see the AngularJs directive using ChartJs

And here is the Repo : https://github.com/sk8terboi87/Just-Anguled

1) jade/views/charts/index.jade

2) coffee/kickstart.coffee 

3) coffee/directives/piechartDirective.coffee


As you can see:

(1) We just created a directive element called trackr-piechart using an Element.

(Note: You can even create element like <div trackr-piechart=''></div>, but, as conventation to be followed according to AngularJs,

  • Use an element when you are creating a component that is in control of the template.
  • Use an attribute when you are decorating an existing element with new functionality.
  • Also, make sure to keep a ‘prefix’ for your directive element, (if in case, may be in future HTML 8 or 9 and there already existing an element ‘<piechar..’> might clash with ours. so go with prefix! 🙂

)

And, we have passed ‘title’ and ‘data’ to the directive

(2) Injection and defining our chart module

(3) In Piechart directive, we have used

  • @chartModule – using the chart module we have created to make a directive (watch the naming convention of the directive with the element, it matters!)
  • scope – Making it isolated scope. so can can use many ‘piechart’ individual components multiple times in a page.
  • restrict – Restricting only to ‘E’ means element.
  • templateUrl – We are keeping the template separate, though you can keep it here itself. Might look ugly if the template starts to grow
  • link – Whatever mentioning here will be added to the link cycle of AngularJs

Thats it. Add some data in our controller and which it make a beautiful piechart. Easy peasy!!!

(Experiment: copy and paste many <trackr-piechart> and provide different data they will work independently thats how a component should be!!! (Thank the isolated scope)

Now, the disadvantage of isolated scope is, you cannot directly tie the controller to our chart directive.

(4) coffee/directives/linechartDirective.coffee

For this, checkout our second linechart example

Setting ng-model

As you can use, we tie the input title to the directive template and added a $watch in our directive to know anything changes. Thats it!!!

Check it out —> https://github.com/sk8terboi87/Just-Anguled.git

References:

  1. http://chartjs.devexpress.com/Demo
  2. http://docs.angularjs.org/guide/directive
  3. http://stackoverflow.com/a/12570008/1172872

Leave a Reply