What is the best way of formatting a lot of html attributes in angular html code? [closed]

Question

Sometime some Angular directive needs a lot of arguments. In my current project I encounter a lot of different ways of formatting such code.

Which type of formatting should be used in Angular project?

1

<abc-table-widget aaa="aaa"
                  bbbb="bbbb"
                  widget="tableWidget"
                  ccc-id="{{ ccc.data.id }}"
                  ddd-id="{{ ddd.data.id }}"
                  eee-active="currentTab === TAB_EEE"
                  behavior="ACCORDION"
                  resource-type="{{ getResourceType() }}">
</abc-table-widget>

2

<abc-table-widget 
    aaa="aaa"
    bbbb="bbbb"
    widget="tableWidget"
    ccc-id="{{ ccc.data.id }}"
    ddd-id="{{ ddd.data.id }}"
    eee-active="currentTab === TAB_EEE"
    behavior="ACCORDION"
    resource-type="{{ getResourceType() }}">
</abc-table-widget>

3

<abc-table-widget aaa="aaa" bbbb="bbbb" widget="tableWidget" 
    ccc-id="{{ ccc.data.id }}" ddd-id="{{ ddd.data.id }}"
    eee-active="currentTab === TAB_EEE" behavior="ACCORDION" 
    resource-type="{{ getResourceType() }}"></abc-table-widget>

4

<abc-table-widget aaa="aaa" bbbb="bbbb" widget="tableWidget" ccc-id="{{ ccc.data.id }}" ddd-id="{{ ddd.data.id }}" eee-active="currentTab === TAB_EEE" behavior="ACCORDION" resource-type="{{ getResourceType() }}"> </abc-table-widget>

Answer 1

That's basically a question of your own preferences. To be honest I would suggest you to forget about your 3rd and 4th example very quickly.

I think your 2nd solution is the way to do it. Making so many tabs for your arguments like in example 1 seems to be quite a bit overhead.

If you take a look at the HTML-Coding-Guidelines from w3schools, you can see that they do the same.

http://www.w3schools.com/html/html5_syntax.asp

EDIT: Nothing like that is on w3schools.com but here: http://www.quepublishing.com/articles/article.aspx?p=24011&seqNum=3