AngularJS のコンポーネント名には「使えない文字列」がある
AngularJS では、アプリケーションを構造化するために「コンポーネント」という仕組みを採用している。たとえば hoge という名前のコンポーネントを作るとしたら、JavaScript 側はこんな感じで記述する。
angular.module('myApp').component('hoge', {
// コントローラやテンプレートの指定など
});
この場合、HTML 側のタグはこうなる(restrict: 'E' の場合)。
<hoge></hoge>
ところが、コンポーネント名を data- から始めると、HTML 側のタグは以下のようになり、HTML5 のカスタムデータ属性と同じになってしまい、具合が悪い。
<data-hoge></data-hoge>
そのため、AngularJS ではこの data- の部分を削除(=ノーマライズ)したものをコンポーネント名とみなす仕様になっている。よって、上記のタグは冒頭に書いた JavaScript なら問題なく使える。ノーマライズについては、公式の Developer Guide の Derective のページ にこんな記述があった。
The normalization process is as follows:
- Strip x- and data- from the front of the element/attributes.
- Convert the : , - , or _ -delimited name to camelCase.
つまり、「要素・属性名の前方から、x-
と data-
を削除」する、そして「:
、-
、_
区切りされた名称をキャメルケースに変換」する、というわけだ。
本記事のタイトルには便宜上「使えない文字列」と書いたが、「使われない文字列」もしくは「削除・変換される文字列」のほうが正しいと言える。