7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 22Length: 2 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

7.1 What Is A Directive?

This video will provide a primer and introduction to directives, along with how Angular deals with them, covering the compile and link phases of its bootstrap process.

7.1 What Is A Directive?

Directives are a fundamental concept in Angular. They're described on angularjs.org as a way to teach HTML new tricks. And I think that's a pretty good way of putting it. They're a way to add behavior and functionality directly to HTML. Angular provides us with some useful directives out of the box, and we've seen a few already. But in this video we're gonna take a deeper look at what Angular does when it comes across a directive in your code. In the next video, we're going to be building our own directive. So it's important to understand what's going on because directives are a complex idea. First, how does Angular recognize a directive? Directives such as ngRepeat have CamelCase names, but the directive can be invoked by translating the CamelCase name into snake case, the colon, dash or underscore. You can also prefix the directive with x dash or data dash which can help with validator compliance. Angular will recognize any one of ng:repeat, ng-repeat, ng_repeat, x-ng-repeat, and data-ng-repeat as being the ngRepeat directive. So when we create a directive, we'll give it a CamelCase name and Angular will do the rest to figure out which directive we're referring to. But what does Angular do when it comes across and matches a directive? First let's backtrack. After the page has loaded, and the browser has had a chance to pass your HTML into a DOM. Angular our steps in, it traverses the DOM in what's called the compile phase, where it collects all the directives it can find. When it's done, it executes the first two bits of logic associated with the directives it's found. This is also called compiling, but this time think of it as compiling just the piece of DOM associated with your directive. Not every directive has a compile step but the ones that do handed the piece of DOM tree the directive was found on. This is called the template DOM. And the compile step has the opportunity to modify this template before the next stage of the process, linking. The link step, which is present in almost every directive, is where you do most of the real business of your directive. Like attaching event handlers because it's given an instance of the template from the compile step, a real element that's present on the page. For example, the ng click directive wouldn't need to do much in the compile phase but in it's link step, it would attach a click event handler to the element it was given. And then carry out the action you specify in the value of the directive attribute when it was clicked. In fact, we're going to do just this in the next video when we correct our own ng click directive. The reason for this separation into two steps is complicated and you can find a more detailed explanation on the angular website. But for now, we don't need to worry about it. As I mentioned, creating directive systems is a complex part of Angular and I strongly recommend reading the full documentation online. In the next video, we're going to create our own ng click directive, just using the link step to keep things simple. Most the time, you won't need to use the compile step, but if you do then the Angular Google group can help you out when you get stuck. So that's build a directive.

Back to the top