Why and how to use directives in AngularJS?

Question

JavaScript

I am currently studying Angular and, frankly, I don’t understand what directives are for and where to apply them. In my current understanding, this is just a piece of code and a template, but then why not use, for example, ng-inject and work in it using a controller. In general, tell me please, experienced people, where and how and in what form it is correct and reasonable to apply directives? It will be doubly useful if you also include links to examples.

Answer 1

what are directives for?

For everything. Directives give you a tool that allows you to isolate UI elements into self-contained components, extend HTML, add new elements with their own behavior, extend the behavior of existing elements with new attributes ... Angular directives served as the prototype of the web component standard, this is a very flexible thing that allows you to completely get rid of selections of elements and hanging logic on it, due to which the code is greatly simplified.
Wherever possible, the entire UI should be built on a hierarchy of directives, as if you were just typesetting. I would even say that using only a controller, as for example can be seen in the examples for ngRoute / uiRouter and a template is bad, controllers and templates can be used, but only in order to determine which directives will be used within this route / state and pass there parameters. That is, to the maximum, push everything into directives. True, this can be difficult to do at first, therefore it is better to gradually increase the degree of fragmentation of the UI into directives. The main difficulty is to make the directives independent of the context of use. Well, or explicitly define this context (the require parameter of the directive can specify that directive A can be used or should be used only in context B).
Are you talking about the Galpian plugin or is it about ng-include? if the latter, like a combination of ng-include + ng-controller, then that's the type... for the lazy ones. With the help of these two directives, we can create some kind of element, attach behavior and a template to it, yes, but it will not be isolated, it will not be possible to reuse it. If you need it temporarily, and you're too lazy, then you can do it, but it's better to make a full-fledged directive, then it can be reused within the project and eliminate duplication. Well, again, the option with ng-include + ng-controller can be covered only by E2E tests, which is not convenient. Directives are simply and conveniently covered by unit tests, which makes maintaining the system much easier and cheaper.
Look at polymer, this is what directives should be in angular (and in angular2 it is almost the same), there are more restrictions and it is more clear how to use web components and, as a result, directives.