AngularDart 0.11.0の変更点 #Dart

AngularDartのv0.11.0が本日リリースされたようです。
v0.10.0からわずか20日でリリース...爆速ですね

今回はそのバージョンアップによる変更点の中で、さくっと試した何点かを簡単に紹介したいと思います。

type -> bind

これはAngularDartというよりは、依存しているパッケージのdiに依るものなのですが、v0.0.39以降、今までDIで使用していたtype()やvalue()、factory()がいずれもDeprecatedになっており、代わりにbind()を使うことになったようです。

AngularDartを0.11.0にする際は、diもv0.0.39以降に更新されているか確認する必要があります。
もしdiが更新されない場合は、明示的にdependenciesに定義するなりしてバージョンを上げましょう。

Shadow DOM-less components

公式ブログのタイトルをそのまま引用しましたが、ようはComponentをShadow DOMとして入れ込むのではなく、親のDOMの一部として表示するためのオプションが追加されました。

以前はapplyAuthorStylesというオプションがあったのですが、Chromeのバージョンいくつからかそのオプションが無効になったので、それの代替手段に当たるものになります。
使い方は簡単で、Componentを定義する際に

@Component (
    useShadowDom: false
)
class Example {
}

と書くと、Shadow DOM-lessになります。
ちなみに、useShadowDomをfalseに指定している場合、このDOM中のみのCSSが定義できないため、アノテーションにcssUrlを指定しているとエラーになります。

bind-* syntaxの追加

公式ブログによるとまだ試験段階だそうですが、一応bind-* syntaxが使えるようになっています。

これは、今まで要素の属性とコンポーネントのバインドを@NgAttrや@NgTwoWayで指定していましたが、これらがDeprecatedになったので、それの代替手段として用意されたものになります。
ただ、単純に@NgAttrを削除するとバインドされなくなってしまうので、結局はコンポーネント内でマッピングする必要があるみたいです。
これについては使い方が間違っているかもなので、もう少し調べてみる必要があるかも。

一応、現状分かっているバインドのやり方を記載しておきます。

コンポーネント側

@Component(
    selector: 'example-component',
    map: const{
        'list': '@list'
    }
)
class Example {

    List<String> list;
}

HTML側

<div>
    <example-component bind-list="cmp.list"></example-component>
</div>

ちなみに、この状態でbind-を削除すると、エラーになります。