Angular Info

Angular 2 RC.2がリリースされました

追記 : CHANGELOG以外の情報を追加しました。

どうも、らこです。ようやくRC.2がリリースされたので変更点を確認しましょう。
1ヶ月以上の間に多くの変更が盛り込まれたので数は多いですが、破壊的変更はほとんどないので、
落ち着いて移行していきましょう

angular/CHANGELOG.md at master · angular/angular


Angular 2 RC.2 変更点

CHANGELOG.mdを見ればわかるようにとんでもない変更の数なので、分類してまとまりごとに見ていきましょう。
まず、アプリケーション開発に関係のあるものだけを抽出すると次のようになります

Bug Fixes

  • bootstrap: Swap coreBootstrap() and coreLoadAndBootstrap() arguments (f95a604)
  • compiler: Support for comment finishing with multiple dashes (60a2ba8), closes #7119
  • compiler: have CSS parser support nested parentheses inside functions (ceac045), closes #7580
  • Control: Support select multiple with Control class (#8069) (84f859d)
  • facade: change EventEmitter to be sync by default (#8761) (e5904f4)
  • forms: rename old forms folder to forms-deprecated (515a8e0)
  • forms: update accessor value when native select value changes (7a2ce7f), closes #8710
  • forms: update value and validity when controls are added (50acb96), closes #8826
  • forms: separate ngModelGroup from formGroupName (5c0cfde)
  • http: Set response.ok (9234035), closes #6390 #6503
  • metadata: Allow spacing in multiple selectors (#7418) (b2e804c)
  • ngSwitch: use switchCase instead of switchWhen (#9076) (e1fcab7)
  • Request: Change Request.text’s return type to string (b2e0946), closes #8138
  • router: Added pushState fallback for IE 9 browser. (bab6023), closes #6506 #7929
  • testing: add discardPeriodicTasks to be used with fakeAsync (#8629) (0cb93a4), closes #8616
  • upgrade: allow deeper nesting of ng2 components/directives (#8949) (48bf349)
  • upgrade: allow functions for template and templateUrl (#9022) (a19c4e8)
  • upgrade: Ensure upgrade adapter works on angular.js 1.2 (#8647) (cbc8d0a)
  • upgrade: fallback to root ng2 injector when element is compiled outside the document (#86 (db82906)
  • upgrade: make bindings available on $scope in controller & link function (#8645) (6cdc53c)

Features

  • ChangeDetectorRef: make detectChanges() correct (6028368), closes #8599
  • common: DatePipe supports ISO string (abc266f), closes #7794
  • common/datePipe: change date formatter to use correct pattern closes #7008 (#8154) (324f014), closes #7008 [(#8154](https://github.com/(/issues/8154)
  • compiler: Add support for <ng-container> (0dbff55)
  • ComponentResolver: Add a SystemJS resolver for compiled apps (#9145) (a6e5ddc)
  • core: add a component resolver that can load components lazily using system.js (1a0aea6)
  • core: introduce support for animations (5e0f8cf), closes #8734
  • core/linker: add SimpleChanges type to lifecycle_hooks to simplify OnChanges signature (0a872ff), closes #8557
  • debug: collect styles and classes for the DebugElement (155b882)
  • enableDebugTools: return ComponentRef (4086b49)
  • forms: add the submitted flag to NgForm and NgFormModel directives (420e83a), closes #2960 #7449
  • forms: allow ngModel to register with parent form (4ed6cf7)
  • forms: compose validator fns automatically if arrays (61960c5)
  • forms: support setting control name in ngModelOptions (a191e96)
  • forms: add easy way to switch between forms modules (22916bb)
  • http: added withCredentials support (95af14b), closes #7281 #7281
  • http: automatically set request Content-Type header based on body type (0f0a8ad), closes #7310
  • http: implement Response.prototype.toString() to make for a nicer error message (89f6108), closes #7511
  • http: set the statusText property from the XMLHttpRequest instance (3019140), closes #4162
  • NgTemplateOutlet: add context to NgTemplateOutlet (164a091), closes #9042
  • NgZone: isStable (587c119), closes #8108
  • security: allow data: URLs for images and videos. (dd50124)
  • security: allow url(…) style values. (15ae710), closes #8514
  • security: Automatic XSRF handling. (4d793c4)
  • add minified bundles (9175a04)
  • security: expose the safe value types. (50c9bed), closes #8568
  • security: support transform CSS functions for sanitization. (8b1b427), closes #8514
  • security: warn users when sanitizing in dev mode. (3e68b7e), closes #8522
  • shadow_css: add encapsulation support for CSS @supports at-rule (cb84cbf), closes #7944
  • ViewEncapsulation: default ViewEncapsulation to configurable (f93512b), closes #7883

だいぶ絞りましたがまだ多いですね。1件ずつ見ていくとキリがないのでグループごとにまとめていきます


コア機能関連

  • facade: change EventEmitter to be sync by default (#8761) (e5904f4)

EventEmitter によるイベントの伝播が、デフォルトで同期処理になりました。
標準のHTML要素からのイベントと同じ振る舞いをするようになり、@Output との区別をしなくてよくなりました。

NgZoneisStable プロパティを持ちます

コンポーネント関連

  • compiler: Support for comment finishing with multiple dashes (60a2ba8), closes #7119

<!-- --> のように複数のダッシュ記号で閉じられたコメントが許容されるようになりました

  • compiler: have CSS parser support nested parentheses inside functions (ceac045), closes #7580

コンポーネントが読み込むCSS内で入れ子の関数が許可されました

  • ChangeDetectorRef: make detectChanges() correct (6028368), closes #8599

私のPRです。
ChangeDetectorRef#detectChanges() が、 detach 状態でも動作するように修正されました

  • compiler: Add support for <ng-container> (0dbff55)

コンパイル後にHTMLコメントになりDOMに影響しない <ng-container> が導入されました。
テンプレート内で階層構造だけを作りたいときに使えます。例えば ngSwitch で無駄なdivタグを作らなくてよくなります。

  • core/linker: add SimpleChanges type to lifecycle_hooks to simplify OnChanges signature (0a872ff), closes #8557

ngOnChanges メソッドに渡される引数の型が SimpleChanges 型になりました。
実体は{[key:string]: SimpleChange} のタイプエイリアスです

  • metadata: Allow spacing in multiple selectors (#7418) (b2e804c)

これも私のPRです。
@ViewChildren@ContentChildren に文字列でテンプレート変数を渡すときにカンマ区切りの中にスペースを許容するようになりました

  • shadow_css: add encapsulation support for CSS @supports at-rule (cb84cbf), closes #7944

ViewEncapusulation.Emulated がCSSの @supports に対応しました。

  • ViewEncapsulation: default ViewEncapsulation to configurable (f93512b), closes #7883

これも私のPRです。
Component デコレータに encapsulation プロパティを設定しなかった時のデフォルトの設定を変更できるようになりました。
CompilerConfig から変更可能です

  • ComponentResolver: Add a SystemJS resolver for compiled apps (#9145) (a6e5ddc)
  • core: add a component resolver that can load components lazily using system.js (1a0aea6)

SystemJSを使ったダイナミックなコンポーネントの読み込みをサポートするための仕組みが整いつつあります。

  • core: introduce support for animations (5e0f8cf), closes #8734

Animation APIが実装されました。詳しくは後述。

HTTP関連

  • http: Set response.ok (9234035), closes #6390 #6503
  • Request: Change Request.text’s return type to string (b2e0946), closes #8138
  • http: added withCredentials support (95af14b), closes #7281 #7281
  • http: automatically set request Content-Type header based on body type (0f0a8ad), closes #7310
  • http: implement Response.prototype.toString() to make for a nicer error message (89f6108), closes #7511
  • http: set the statusText property from the XMLHttpRequest instance (3019140), closes #4162

RequestOptionsBaseRequestOptionswithCredentials プロパティが追加されたことと、
post()put() などの第2引数 body がany型となり、その型によって自動的にContent-Typeを設定してくれるようになったのが重要です。
今までワークアラウンドで解決していた部分が不要になるでしょう。

ルーター関連

Router v3が出ていますのでRC.2に含まれているルーター関連のコミットはほとんど意味ないです。

ブラウザがPushStateに対応していない時のフォールバックが追加されました

パイプ・ディレクティブ関連

  • ngSwitch: use switchCase instead of switchWhen (#9076) (e1fcab7)

ngSwitchWhenngSwitchCase に改名されました。JavaScriptのswitch文と合わせた形です。

  • common: DatePipe supports ISO string (abc266f), closes #7794

これも私のPRです。
DatePipeが Date.fromISOString で受け入れ可能な ISO形式の文字列を許容するようになりました

DatePipeに渡すフォーマットが正しく動作するようになりました

  • NgTemplateOutlet: add context to NgTemplateOutlet (164a091), closes #9042

ngTemplateOutlet にcontext を渡せるようになりました

<template [ngTemplateOutlet]="templateRefExpression" [ngOutletContext]="objectExpression"></template>

Forms関連

  • Control: Support select multiple with Control class (#8069) (84f859d)
  • facade: change EventEmitter to be sync by default (#8761) (e5904f4)
  • forms: rename old forms folder to forms-deprecated (515a8e0)
  • forms: update accessor value when native select value changes (7a2ce7f), closes #8710
  • forms: update value and validity when controls are added (50acb96), closes #8826
  • forms: separate ngModelGroup from formGroupName (5c0cfde)
  • forms: add the submitted flag to NgForm and NgFormModel directives (420e83a), closes #2960 #7449
  • forms: allow ngModel to register with parent form (4ed6cf7)
  • forms: compose validator fns automatically if arrays (61960c5)
  • forms: support setting control name in ngModelOptions (a191e96)
  • forms: add easy way to switch between forms modules (22916bb)

@angular/common の中の Forms APIはすべて deprecatedになりました。
ngFormngModel などの基本的な機能はデフォルトで読み込まれるので気にする必要はありませんが、
FormBuilder などのモデルドリブンフォームのAPIは @angular/forms から読み込むようになっていきます。

機能的には、select要素がmultipleをサポートできるようになったことや、
ngModel を設定している時に ngControl を使わなくてよくなりました。
また、 ngForm や ngFormModelが submitted フラグを持つようになりました。

テスト・デバッグ関連

  • enableDebugTools: return ComponentRef (4086b49)

enableDebugToolsComponentRef を返すようになったので、 bootstrap()の戻り値のPromiseの中で使いやすくなりました。

bootstrap(App)
  .then(enableDebugTools);
  .then(cmpRef => {
      ...
  });
  • testing: add discardPeriodicTasks to be used with fakeAsync (#8629) (0cb93a4), closes #8616

discardPeriodicTasks 関数が追加されました。 fakeAsync 中で残っているピリオディックなタスクを破棄します。

  • debug: collect styles and classes for the DebugElement (155b882)

DebugElement がstylesとclasssを持つようになりました。

セキュリティ関連

  • security: allow data: URLs for images and videos. (dd50124)
  • security: allow url(…) style values. (15ae710), closes #8514
  • security: Automatic XSRF handling. (4d793c4)
  • security: expose the safe value types. (50c9bed), closes #8568
  • security: support transform CSS functions for sanitization. (8b1b427), closes #8514
  • security: warn users when sanitizing in dev mode. (3e68b7e), closes #8522

ようやく落ち着きを見せてきたセキュリティ対応です。
data:image/png のような値が許可されたり、スタイルの url() 関数が許可されたり、CSS中の関数のバリデーションが緩和されたりしています。
また、ProdModeじゃない時にはセキュリティに引っかかったときにwarningメッセージが出てくるようになりました

アップグレード関連

  • upgrade: allow deeper nesting of ng2 components/directives (#8949) (48bf349)

ng2 > ng1 > ng2 のような複雑な入れ子構造で正しく動くようになります

  • upgrade: allow functions for template and templateUrl (#9022) (a19c4e8)

ng1側のディレクティブの templatetemplateUrl が関数の場合にその戻り値をテンプレートとして扱うようになりました

  • upgrade: Ensure upgrade adapter works on angular.js 1.2 (#8647) (cbc8d0a)
  • upgrade: make bindings available on $scope in controller & link function (#8645) (6cdc53c)

Angular 1.2に対応しました。 bindToController がないときにはディレクティブのcontroller関数やlink関数で $scope から
ng2 componentからのデータバインディングが可能になりました

  • upgrade: fallback to root ng2 injector when element is compiled outside the document (#86 (db82906)

ui-routerのように、ディレクティブを外部でコンパイルしたものをドキュメントに挿入した時に、
挿入されたディレクティブがルートのInjectorを参照するようにフォールバックが追加されました

その他

各パッケージごとにbundleされたumd.jsが同梱されます


また、CHANGELOG以外にも公式ブログでのアナウンスもされているので一緒に紹介します。

RC2 Now Available

Animation APIのサポート

ついにAnimation APIが実装されました。ドキュメントも用意されています。

Animations - ts

このドキュメントはng-confでもAnimationを担当した@teropa氏によるものです。
gitアニメーション付きでわかりやすくてよいです。

Forms API

RC.2に新しいForms APIの一部が実装されています。オプトインになっているので試したい方は @angular/forms を使ってみましょう。

多くのプルリクエストの消化

100以上のPRがマージされ、多くのバグが修正され、大きく改善されました

Web Workerサポート

RCリリースの際に一度ドロップしていたWeb Workerサポートが完全復帰しました。

今後の予定

RCは今後もいくつか続き、最終的には2.0.0 Finalを目指していきます。
数ヶ月以内に辿り着きそうとのことで、FormsやRouterも含めて期待していきましょう。


いかがでしたでしょうか。
大きく変わったのはForms周りくらいで、あとはちょっと便利な機能が増えたりバグが直ったりと嬉しい変更ばかりです。
新しいForms APIに関してはまだ未完成なので今後も要チェックです。しばらくは今までどおりのAPIを使っていてもいいでしょう。
RC.3は来月以降とのことなのでゆっくり慣らしていけるはずです。

Router v3も細かい修正が重なっているので、落ち着いたところでまた変更点を紹介します。
それではまた。