Help us understand the problem. What is going on with this article?

Angular2のevent bindngとproperty bindingの記法がdash-case(kebab-case)からcamelCaseに変更されていた。

More than 3 years have passed since last update.

1ヶ月前のBreaking changeなので周回遅れ感はあるが、Angular.ioのDart版docにはまだ反映されていないのでメモしておく。
TypeScript版に合わせてDart版が改訂される時にはこれも反映されているだろう。
https://angular.io/docs/ts/latest/guide/displaying-data.html
https://angular.io/docs/dart/latest/guide/displaying-data.html

この変更により、例えばAngularのcore directiveであるngIf, ngForなどのselectorがng-ifからngIfng-forからngForといったように変更されている。

詳細は以下。
https://github.com/angular/angular/blob/master/modules/angular2/docs/migration/kebab-case.md

この変更の理由としてdesign docが公開されており、ざっくり言うと、

Event bindingをdash-caseで書き((my-event)="exp()")camelCaseのevent名に変換するルールでは、dash-caseのevent名が定義された際にbindingできない。そのためdash-case to camelCase変換は止めたとのこと。

Property bindingもまたCSS selectorがcase insensitiveであることに起因するbindingの問題を解決するために、Angularでbindingするattribute nameはcase sensitiveとして扱い、dash-case to camelCase変換は止めたとのこと。

詳細は以下。
https://docs.google.com/document/d/1UMxTIUBTIUZNfOqwMhkLg0ANFSBtLIK9JsIu77EZaBA/edit?ts=564f7dd4

Polymerでcomponentを書いているとAttributeのdash-caseとPropertyのcamelCaseの書き分けをつい忘れてしまい、AttributeをcamelCaseで書いてデバッグで無駄な時間を使ってしまう経験が何度かあるので、その点でもこの変更は歓迎。ちなみにcamelCaseで定義されたものをうっかりdash-caseで書くとTemplateCompilerがちゃんとエラーを吐いてくれるのが嬉しい。

ntaoo
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away