（Angular 2 の alpha.13 に基づいた内容です。）

昨日 ng-japan に参加した際に Angular 2 に触ってみたのですが、If とか Foreach の書き方が謎だったので調べてみました。

ちなみに Viewport Directive というのは、以前 Template Directive と呼ばれていた Angular 2 の 3 種類の Directive のうちの一つで、HTML に新しい DOM を挿入するものです。If, Foreach はこれに当たります。

書き方のバリエーション

If は、以下のどれでもいいそうです。

<template [if]="foo">
  <p>Show me!</p>
</template>

<p template="if: foo">Show me!</p>

<p *if="foo">Show me!</p>

Foreach も、以下のどれでもいいそうです。

<template foreach #foo [in]="foos">
  <li>{{foo.text}}</li>
</template>

<li template="foreach #foo in foos">{{foo.text}}</li>

<li *foreach="#foo in foos">{{foo.text}}</li>

え、なにそれ、どういうこと？

`<template></template>` への正規化と microsyntax

If, Foreach などの実装は https://github.com/angular/angular/tree/2.0.0-alpha.13/modules/angular2/src/directives にあるので読んでみました。

If は if という属性があるかとその値しか見ていないし、Foreach も（概ね） foreach と in という属性があるかと in の値しか見てません。ということは、Directive がテンプレートの処理を開始する前に、一番上の <template></template> の形式に正規化されているということです。

ViewSplitter なるもので、以下の変換をしているようです。

* から始まる属性値を template 属性に。例えば *foreach="#foo in foos" -> template="foreach #foo in foos"
template="" の属性値（microsyntax）をパースし、<template></template> を作ってその属性を設定。例えば template="foreach #foo in foos" -> <template foreach #foo [in]="foos"></template>

なので、上の例だと下のものから順に上に変換されているイメージです。

2 の microsyntax のパースの部分は、ドキュメントだけ読むとよく意味がわかりませんが、コードやテストを読んだところ、結局一定のルールに従って <template></template> に設定するための複数の属性を取り出すよ、ということのようです。

Viewport Directive の仕組み

<template></template> の書き方の面白いところは、ただの属性なので順番はどうでもいいという点です。以下のどれでもいいわけですね。

<template foreach #foo [in]="foos"></template>
<template foreach #foo [in]="foos"></template>
<template #foo foreach [in]="foos"></template>
<template #foo [in]="foos" foreach></template>
<template [in]="foos" foreach #foo></template>
<template [in]="foos" #foo foreach></template>

ちなみに #foo は implicit variable というらしく、Directive の方では \$implicit という名前の local を設定すればそこに値を渡せる模様。

結論

他人の書いた Viewport Directive を使うときは安心して *foreach="" のような形式が使えます。要素が複数の時は <template></template> で囲む必要がありますが。

自分で Viewport Directive を作るときは、例の microsyntax でいい感じに書けるように、使う属性をうまく決める、という感じでしょうか。

とりあえずすっきり。