What are the main differences between components and directives in AngularJS 1.5?

Question

I am finding it difficult to understand the real difference between components and directives. I now understand that components are a much easier concept.

So having this in mind, is there any reason to continue to use directives when using AngularJS 1.5?

Maybe I am missing the real context here, but it appears that components provide an easier API.

So what reason would I have to continue using a directive?

Angular 2 states that everything is a component, so working towards an easy migration from 1.5 to 2, would it not make sense to only use components going forward?

In the past I have used directives for creating, for example, an auto lookup textbox, there is no reason why I shouldn't do this now inside a component right? And then I can re-use this component inside other components I create?

Answer 1

Just copying the angular docs, since they put it in the best way I can think.

Understanding Components

In Angular, a Component is a special kind of directive that uses a simpler configuration which is suitable for a component-based application structure.

This makes it easier to write an app in a way that's similar to using Web Components or using Angular 2's style of application architecture.

Advantages of Components:

• simpler configuration than plain directives
• promote sane defaults and best practices
• optimized for component-based architecture
• writing component directives will make it easier to upgrade to Angular 2

When not to use Components:

• for directives that rely on DOM manipulation, adding event listeners etc, because the compile and link functions are unavailable
• when you need advanced directive definition options like priority, terminal, multi-element
• when you want a directive that is triggered by an attribute or CSS class, rather than an element

more reading:https://docs.angularjs.org/guide/component

Answer 2

I will try to explain using a high-level perspective, inspired by this article(Angular 2: The Difference Between Components and Directives). It says Angular 2 but is also useful in the AngularJs context.

Directives

In Computer Science there is the concept of ‘Directive Pragma’. According to Wikipedia:

“In computer programming, a directive pragma (from "pragmatic") is a language construct that specifies how a compiler (or assembler or interpreter) should process its input. Directives are not part of the language proper”

This aligns well with the description given by the AngularJS docs:

“At a high level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element (e.g. via event listeners), or even to transform the DOM element and its children.”

So, what directives basically do, is to give instructions to the (Angular) compiler, in order to alter the DOM or its behavior.

Components

Components in AngularJS are a special directive; they try to mimic web components, as the AngularJS documentation states:

In AngularJS, a Component is a special kind of directive that uses a simpler configuration which is suitable for a component-based application structure.

This makes it easier to write an app in a way that's similar to using Web Components or using the new Angular's style of application architecture.

When to use what?

Personally, I use components unless there is a good reason not to.

Some of those reasons are given in the AngularJS docs for components:

• for directives that need to perform actions in compile and pre-link functions, because they aren't available
• when you need advanced directive definition options like priority, terminal, multi-element
• when you want a directive that is triggered by an attribute or CSS class, rather than an element

Another way to put it:

Directives are the mechanism by which we can attach behavior to elements in the DOM.

Components are a specific type of directive that makes it possible to utilize web component functionality - encapsulated, reusable elements available throughout our application.

Possible conclusion

I think the question is not that good once you understand that a component is a directive. The two concepts are not trying to solve the same problem. Components are rather an extension that allows directives to be used in order to build component-based web applications.

Going deeper

Todd Motto share's his knowledge about this topic in this little GIST.

A Directive decorates the DOM, it adds behavior and extends existing DOM. When you use a .component(), you create DOM, when you use .directive() you decorate DOM, that is the mindset