[ajanuary]

I don't know that "semantic" is what you mean here.

Semantics in HTML is about exposing the meaning of content through the DOM. Adding data-binding via attributes doesn't change that at all.

    <label>Name <input type="text" [(ng-model)]="model.name"></label>

still encodes just as much semantics as

    <label>Name <input type="text"></label>

I think what you might have meant, as mariusmg mentioned in a sibling comment, is "separation of concerns"? Personally I think that has diminishing returns as your application gets more complex. It's very difficult not to still have tight coupling, just hidden under a layer of indirection.

[jrochkind1]

I think it's more like "syntactic" then semantic.

      <input type="text" ng-model="model.name">

Is syntatically valid HTML, although ng-model may not be a legal attribute name in standard HTML. On the other hand:

      <input type="text" [(ng-model)]="model.name">

Isn't even syntactically valid HTML. It kind of rubs me the wrong way too, although I don't know if it matters in practice, although I'm not sure it doesn't either. It does seem ugly.

[pfooti]

I'm not sure you are correct. According to the w3 spec for HTML attributes [0], html element attribute names must consist of one or more characters other than the space characters, U+0000 NULL, """, "'", ">", "/", "=", the control characters, and any characters that are not defined by Unicode.

Granted, it isn't necessarily what I'd expect to be legal, but it doesn't look illegal either. We may just need to add some logic to HTML colorizing syntax checkers in our IDEs is all.

[0]: http://www.w3.org/TR/html-markup/syntax.html#syntax-attribut...

[joshuacc]

To emphasize what you are saying, on multiple occasions the Angular team has said that they chose this new syntax because it is valid.

[Touche]

It's illegal. Go to your console and type el.setAttribute("(foo)", "bar") and see what happens.

[joshuacc]

No it is not. See the discussion here: https://github.com/angular/angular/issues/133

[Touche]

What there contradicts what I said? I'm aware of innerHTML hacks that make it possible to work around but those are not valid attribute names. I'm not even against the syntax; i like it, but that doesn't change the fact that it is invalid html.

[sangnoir]

Parent quotes the W3 Spec to prove that it's legal, and your response is "it's illegal because $BROWSER say's so"?

I trust the spec more than an implementation.

[jrochkind1]

interesting!

[filoeleven]

Others have pointed out that it is in fact syntactically valid HTML. It's also worth mentioning that this is syntactic sugar, and you can get the same behavior with:

  <input type="text" bindon-ng-model="model.name">

Similarly, property bindings surrounded by brackets "[myprop]" and event bindings surrounded by parens "(myevent)" are equivalent to the following:

  <input type="text" bind-myprop="model.foo" on-myevent="bar()">

All of angular2's template syntax can be replaced by more normal-looking tag properties with "reserved" prefixes that tell Angular what to do with them.[0] The less verbose symbols are probably easier for the eye to parse than the long forms once you're used to them, and either form can be easily analyzed and highlighted by an IDE.

[0]http://victorsavkin.com/post/119943127151/angular-2-template...