Angular Info

Beta.15のリリースと記事の紹介

どうも、らこです。今週はAngular 2.0.0のBeta.15がリリースされました。まずは主な変更点を紹介します。


Beta.15

テンプレートキャッシュの実装

feat(compiler): Add an implementation for XHR that uses a template ca… · angular/angular@a596b88

コンポーネントのtemplateUrlで指定されたテンプレートを、コンポーネントのロードより先に読み込んでキャッシュしておくための機能が実装されました。
karmaなどのテスト時にネックとなるファイル読み込みのXHRの発生を抑制し、templateUrlでテンプレートを読み込むコンポーネントを同期的に処理できます。
ただし、まだキャッシュをセットする側の機構が貧弱なのでアプリケーションサイドでは使いづらいです。
アプリケーションランドでのプリキャッシュ機構は将来的に実装するらしいので、それを待ちましょう。

テンプレートのキャッシュにはCACHED_TEMPLATE_PROVIDERCachedXHR、そしてwindow.$templateCacheを使います。

CACHED_TEMPLATE_PROVIDER:

後述のCachedXHRをInjectするためのProviderです。 angular2/platform/browserでexportされています。

CachedXHR:

内部にキャッシュを持ち、実際にはXHRを行わずにすべてをキャッシュから返すクラスです。

ただしキャッシュをセットすることはCachedXHRでは担っておらず、次の$templateCacheが実際にテンプレートのキャッシュを管理しています。

window.$templateCache:

windowに生やすグローバル変数です。次のように使います。

function setTemplateCache(cache): void {
  (<any>window).$templateCache = cache;
}

function createCachedXHR(): CachedXHR {
  setTemplateCache({'test.html': '<div>Hello</div>'});
  return new CachedXHR();
}

テスト中での具体的な使用例は次のコードを読むと参考になるでしょう

angular/xhr_cache_spec.ts at master · angular/angular

ngForのローカル変数にfirstが追加された

feat(ngFor): Support convenience view local in ngFor · angular/angular@ccff175

ngForが提供する変数に、ループの1件目かどうかを表すfirstが追加されました。

<div *ngFor="#item of items; #isFirst=first">{{isFirst.toString()}}</div>

余り知られていない気がしますが、lastとかindexとかevenとかoddとか元々あります。

オフラインコンパイル

まだユーザーランドには降りてきていないですが、内部的にはオフラインコンパイルが可能な機構になってきています。
おそらくangular-cliとcodelyzerが近日中に対応するので、その様子を見て使い方を勉強できそうです。

その他

ngUpgrade側でngOnInitの連携がうまくいってなかったバグなどいくつかが修正されてます。
詳しくはチェンジログを参照してください


今回はいくつかのサイトや記事も紹介します。

5thingsAngular

5thingsAngular - Get weekly updates on 5 things Angular

thoughtram blogでお馴染みのPascal Prechtが個人で始めたサイトです。
毎週月曜日(日本時間で火曜日)に、一週間の間に起きたAngular関連のトピックを5つ紹介してくれます。
RSSやメール購読など可能なので、ぜひチェックしてみてください。

5 Rookie Mistakes to Avoid with Angular 2

5 Rookie Mistakes to Avoid with Angular 2

GooglerのKara EricksonがAngular公式ブログに書いた記事です。
初心者が陥る5つのミスについて書かれています。


最後に私のイベントの宣伝です。

ng-sake #2

ng-sake #2 - connpass

酒好きのためのAngularミートアップ、ng-sakeのチケットがまだ余っています。
来週の水曜日なのでぜひいらしてください。

ng-conf extended Tokyo

ng-conf extended Tokyo - connpass

ng-confをライブビューイングする会です。全然集まりませんが当日参加でもいいのでゴールデンウィークの予定が無い方はぜひ遊びに来てください


土曜日には大阪でAngular 2ハンズオンが開催されます。私もメンターとして参加しますので良いイベントになるよう努力します。

それでは。