AngularJS introduced the concept of directives in the development of single-page applications. The purpose of directives is to encapsulate the DOM-related logic and allow us to build user interfaces by composing them. This way, we are able to extend the syntax and the semantics of HTML. Initially, like most innovative concepts, directives were viewed controversially because they predispose us to write invalid HTML when using custom elements or attributes without the data- prefix. However, over time, this concept has gradually been accepted and has proved that it is here to stay.

Another drawback of the implementation of directives in AngularJS is the different ways we can use them. This requires an understanding of the attribute values, which can be literals, expressions, callbacks, or microsyntax. This makes tooling essentially impossible.

The latest versions of Angular keep the concept of directives, but take the best parts from AngularJS and add some new ideas and syntax...