Angular 2.0 メモ

ng-europe での発表を見て湧いてきた疑問を、GitHub で公開されている Angular 2.0 用のレポジトリを見ながらこんな感じかな、と書いてみました。いろいろ間違ってると思いますし、そもそも公開までにどんどん変わるでしょうからまったく信頼性のない情報です。

これを書いてて Design Docs の新しいのも公開されていることに気がついたので、読んだら更新するかもしれません。

情報ソース

ng-europe のビデオ

GitHub で参考になるプロジェクト

どれも数ヶ月前から更新されていないことを考えると、最新の開発状況は公開されていないようです。ng-europe で発表された属性のバインディング記法なんかは出てこないので、他の部分も最新のものとはいろいろ変わっているでしょう。

• angular/projects: Angular 2.0 アプリの参照実装です。
• angular/di.js
• angular/templating
• angular/router

angular/angular

Angular 2.0 の開発は angular/angular で行なわれている模様。1.x は angular/angular.js です。紛らわしい・・・。

見た所こちらは、まだ実装途中という感じです。router とかもないし。本当にスクラッチから実装してる・・・。

Design Docs

まだ全然読んでません・・・。 最終更新日でソートして上の方を読むのが、一番よくわかりそうです。

New: AtScript

• ES6 に型アノテーション、@ アノテーションなどを追加したもの。
• Traceur Compiler のオプションをいくつか有効にすれば使える。
• Angular 2.0 ではそれぞれ DI や directive 定義などに利用する。
• AtScript なしでも書けることは書ける？アノテーションを既存文法で書く。

RIP contollers

• ComponentDirective という、directive の一種で代替。
• ComponentDirective とテンプレートが一対一という WebComponents 的な世界観？
• Router によって template とセットで設定される模様。HTML 要素名としては出てこない？（angular/projects）

RIP DDO

• Directive 定義はただの class に。
• アノテーションでメタ情報を付与。
• @ComponentDirective: 前述
• @TemplateDirective: つけられた DOM 要素自体をテンプレートにしてしまう。ng-repeat など。
• @DecoratorDirective: DOM 要素に機能を付加。ng-show, ng-style など

RIP $scope

• $scope の prototype 継承的なものはなくなる？
• ComponentDirective に対応するテンプレートで使えるのは、その ComponentDirective のプロパティ・メソッドだけ。
• 子テンプレートでは親 ComponentDirective プロパティ・メソッドは使えない模様。子 ComponentDirective では親 ComponentDirective を DI できるので、間接的に親を参照できるので問題ないか。
• イベント: 親、子供を DI すれば直接通信可能なので不要？
• $watch: Object.observe() を使う？アノテーションで属性監視用関数を用意できる？

RIP angular.module

• ES6 Module を使う。独自のモジュールシステムは不要とのこと。
• controller, service, dicrective の登録は不要に。型または @Inject で型を指定し DI される。
• 型で DI されるということは、class ベース。インスタンス化しない（状態を持たない）ものは、ES6 Module でただ import してそのまま使えば良い？
• 1.x の Provider によって config フェーズで設定する、みたいなのはなくなる模様。

RIP jqLite

• ブラウザの API を使おう。今は昔よりだいぶいい。

New: General binding syntax

• ng-style, ng-click などの代わりに、DOM 要素のプロパティやイベントハンドラに直接プロパティやメソッドをバインドする。angular/projects では確認できず。
• (click)=“”, [checked]=“”
• 属性ではなくプロパティ（JS で触る方のやつ）。

New: Directive query mechanism

• directive で親や子の directive インスタンスを DI するための仕組み？
• 親は一つ、子は配列で取れる。子の増減などの変更を監視できる。
  （DI で入ってくるとはいえ、インターフェイスが密結合になりそうでちょっと心配。）