AngularJS Directive - Good practice

Question

AngularJS Directive - Good practice

Navigation

#1 by (5 votes)
#2 by (2 votes)

3

I know that it is possible to create a directive in AngularJS in the following ways:

<div angular></div>
<div class="angular"></div>
<angular></angular>
<!-- directive: angular -->

But what is the best practice? I mean, what is the reason there are four ways? Why should I use one, not another?

At first, I discard the use of class, because it does not make me explicit what the code would be doing - that it is a directive, not a CSS style. To be explicit and should name it as "angular-directive", for example.

Since using as a <angular> element sounds strange to me in terms of semantics.

And to use as a comment, it is also not explicit that this really does something in the eyes of a programmer who sees the code but does not know AngularJS.

That is, initially I would choose <div angular></div> , because it is already common to use custom "data-" attributes in elements, as recommended by W3C.

But what other arguments about the best choice when creating a directive?

javascript angularjs angularjs-directives

asked by anonymous 29.06.2014 / 05:14

2 answers

Spring Framework @Transactional Operation Can we use all versions of css on our site?

score 5 · Answer 1

As I read (and did not test !), the only two methods compatible with older versions of IE are the first two: directive as an attribute declaration and as a class.

<div atributo></div>
<div class="classe"></div>

Furthermore, custom tags ( <elemento></elemento> ) are not considered valid HTML5, however much they work in more modern browsers.

Likewise, custom attributes will also not be accepted unless they are initialized by the "data-" prefix ( <div data-atributo></div> ). However, it is important to note that, if there is interest in validating the code as XHTML5, the minification of attributes ( <div data-atributo></div> ) is not allowed, and it is mandatory to explicitly attribute values, however redundant or unnecessary it may appear ( <div data-atributo="simQueroAtivarEsteAtributo"></div> ).

So far, logic tells us, then, that the "most correct" would be to use the directive format as a class. However, as discussed Jeremy Zerr's in this text , AngularJS's own documentation tells us to use

So, based on this and the rest of the discussion of his page, he organizes a short summary that I found very useful and will translate ( freely)

Guidelines for good practice in the AngularJS Directives

Use your directive as an element name instead of an attribute when you are in control of the template

Use your directive as an attribute rather than an element name when you are adding functionality to an element already   existing

If you actually use a directive as an element, add a prefix to it [and all other directives as elements] to   avoid name conflicts with future versions of HTML5 and with possible   other libraries [Note: this does not make much sense if the names of   directives are in Portuguese]

If validation as HTML5 is a requirement, you will be forced to use all directives as attributes with a "date -" prefix

If validation as XHTML5 is a requirement, the same validation rules as HTML5 apply, however it is still necessary to add a "=" and a value to the end of the attributes.

Use isolated scope when possible, but do not feel defeated if you can not isolate the scope because of the need for a two-way data-bind with an external scope.

score 2 · Answer 2

Four different grammar alternatives have been created to meet the needs of all developers, from those who develop to older versions of Internet Explorer to those who develop applications for iOS and Android 4 with HTML5.

The grammar where you create new elements is very expressive and allows you to create Domain Specific in the HTML. For example tags like <tabset> and <tab> can be organized as in the example below:

      <tabset justified="false">
          <tab heading="Tab 1">
            <div class="detail">
               Conteudo da Tab 1
            </div>
          </tab>
          <tab heading="Tab 2">
            <div class="detail">
               Conteudo da Tab 2
            </div>
          </tab>
      </tabset>

This is the best approach because the HTML code is clear, expressive and concise but although it works on the Tablets and SmartPhones iOS and Android, it does not work in all Browsers.

The most appropriate approach for those who want the HTML page to work in most environments is to use an additional attribute whose name represents functionality.

Example:

      <div tabset justified="false">
          <div tab heading="Tab 1">
            <div class="detail">
               Conteudo da Tab 1
            </div>
          </div>
          <div tab heading="Tab 2">
            <div class="detail">
               Conteudo da Tab 2
            </div>
          </div>
      </div>