Should every "component" on a page be a directive in angularJS

Question

When creating angularJS applications is it best practice to create almost all of your "components" into directives? when i say components i mean any grouping of HTML elements that perform a function. examples:

Login:

 - <input type="text" name="username" />
 - <input type="password" name="password" />
 - <button>Login</button>

Event:

 - <h3>Title</h3>
 - <input type="date" name="eventStart" />
 - <p>This is an event description</p>

Blog Post:

 - <h3>Title</h3>
 - <small>Blog meta - Blog Author</small>
 - <p>This is a post blah blah blah</p>

http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background Directives are one of the most exciting features of angularjs that help to reduce the amount of code you write. For every reusable code piece you can write directives. — vipulsharma, Jul 20 '13 at 12:29
@vipulsharma, I think the OP is quite familiar with the *what* and *when*, and is interested in *why*. — Eliran Malka, Jul 21 '13 at 08:02

John Tseng · Accepted Answer · 2013-07-21T13:21:06.290

Directives allow you to reuse code. I would certainly put everything that is reused into a directive. To avoid repeating yourself, you should use directives. I would even go as far as to say that even if you're not repeating yourself, i.e. the code is only in one place, you should also make it into a directive.

Directives that are used only in one place does not reduce code, but it does separate concerns. I see directives as analogous to classes. Instead of a huge block of code, class scoping enforces that classes be standalone blocks. Likewise, creating directives with their own scope makes them standalone blocks that interact with their surroundings in a limited way.

ngInclude is a little different. I would see it as the equivalent of eval, or C's #include. You do get a little separation, but everything shares the same scope, and it's easy to have parts that are intertwined, but not look like they are unless they are inspected.

As for YAGNI, I think that this is a different issue. YAGNI is talking about adding features. I am talking more about code structure than about adding anything additional. I see the same code, but organized a little differently. Sure directives take a little work to write, but like classes, they can also be light weight and created easily (in terms of the amount of thought required).

good point on the DRY principle, but how is it separating concerns? plus, you should be ware of the YAGNI (You Ain't Gonna Use It). — Eliran Malka, Jul 21 '13 at 08:04
@EliranMalka Good points. I've updated my answer to address both separation of concerns and also YAGNI. — John Tseng, Jul 21 '13 at 13:21

score 0 · Answer 2 · answered Jul 21 '13 at 10:29

Unless there is a element of re-usable behavior i would implement the samples you have provided with partial templates (ng-include + ng-template) and Controllers.

So my login template would become

<script type="text/ng-template" class="template" id="login">
 <div ng-controller='LoginController'>
   <input type="text" name="username" />
   <input type="password" name="password" />
   <button>Login</button>
 </div>
</script>

It can now be reused anywhere using

<div ng-include='login'>

I think login and blogpost can be easily implemented using above approach. For event i am not sure depends upon how much behavior is encapsulated.

Some places where i have found directive useful are

Wrapping a jquery control to make it usable in Angular.
Doing DOM manipluation.
Adding extra behaviour existing html element. For example making html input element to support custom validation (UI + behavior)
And of course defining new html elements which high level of usabililty.

Should every "component" on a page be a directive in angularJS

2 Answers2