The three types of the directives are:  components, attribute directives, and structural directives. However we're really only going to cover two of the three types of directives— attribute directives and structural directives. The reason for this is because we've already spent an entire chapter covering the first type of directive, and that was components. That's right! Components are actually directives under cover! Specifically, and stated another way (which illustrates how components are differentiated from attribute and structural directives), components are directives that have a template. Of course, this must mean that attribute and structural directives do not have templates.

OK, so what exactly are directives, then? Let's give the term directives a distinct definition to get rid of any possible confusion that this terminology may be causing before we move on to discuss the the next two types of directives. The definition we'll be using is this: Angular directives are constructs that provide specific DOM manipulation operations. DOM (or HTML DOM) is an acronym for Document Object Model, and is not an Angular thing—it is a browser thing. All modern browsers create a DOM whenever a web page is loaded, which is a tree of objects that is accessible by JavaScript. Without the DOM, Angular (and any other web framework that manipulates the DOM) would not exist.

Components, as we've seen in Chapter 6, Building Angular Components, fit our definition of directives because they are indeed constructs that provide specific DOM operations. Not only are their templates injected into our page (replacing their custom HTML tags), but they themselves contain data, property, and event bindings, which further manipulate the DOM.

We've now fully explained components in various ways, and we'll see them in action during the implementation of our wireframes throughout the rest of the chapters that follow.

The remaining two types of directives do not inject any HTML templates in our pages or views because they do not have any templates. However, they do manipulate the DOM—as mandated by our previous definition of directives. Let's now look at what each of these types of directives do.