pirosikick's diary

君のハートにunshift

Angular2.0のDI

javascript angular.js

Angular2.0について、Angular.jsのブログに出ていた。ここ半年間くらいAngular.jsを使って不便に思っていたところが結構改善されるようで非常に嬉しい。

びっくりしたのが、ドキュメントがしっかりしてて、Angular2.0がどういうデザインになるかちゃんとまとまってること。で、DIのデザインついてのドキュメントを読んでみたのでメモ。

要点抜き出してみた

configフェーズがなくなる

混乱のもとだった。シンプルにする
具体的にはmodule.config()、module.constant()、module.provider()が廃止
- constant→value、provider→factory

Remove the global module registry

今まで依存関係を定義するのに２ステップ必要だった
1. 依存関係をモジュール名で定義する(angular.module('hoge', ['a', 'b']))
2. 依存関係のモジュールのファイルを先にロードしておく
どっちかを忘れるってことが容易に想像がつく
angular.moduleが常に新しいインスタンスを返すようになる
angular.bootstrap(document.body, [moduleA, moduleB])使って手動でbootstrap、<body ng-app>はできなくなるっぽい

Hierarchical Injectors

SingletonじゃなくてもOKにする、遅延ロード
今までは全てがSingletonで、bootstrapが実行される前に全てのコードがロードされる
（もともとのinjectorの動きがよくわからんから、あんまり理解できなかった。。。）

Private module

node-diに実装予定だが、そんなに重要な機能と思ってないから必要になるまで後回しにしてるらしい
- 現在ある、モジュール間のトークン名（service, factory, valueの名前）の衝突を回避できない問題と、別のモジュールから自由にvalueやserviceにアクセスできてしまう問題のソリューション

Property Injection

こういうのができるようになるらしい

module.value('config', {
  hoge: {
    fuga: {
      'fuga'
    }
  }
});

// 今までだと'config'でinjectするところを、
// ドットで'config.hoge.fuga'と局所的に取得可能
module.factory('something', ['config.hoge.fuga', function (fuga) {

}]);

ES6 Modules Integration

ES6のmoduleを使う
サンプルコード見た方がわかりやすい

Asynchronous Injection

creazy ideaって書いてるからすごく気になるけど、よくわからなかった。。
- ここにコードがある

Annotations

@Injectとか@Provideとかのコメントで、DIする
- https://dl.dropboxusercontent.com/u/36607830/talks/ng-conf-di-v2.pdf
ES6にはアノテーションは含まれておらず、traceur使うのが嫌な人にはヘルパー関数を提供するらしい

まとめ

Traceur compilerとかnode-diとかdi.jsとか使ってみよ
全てがAngular.jsに乗ってないといけない状態はかなり改善されそう。
ブラックボックス感が強くて理解できなかったところが、シンプルになることで理解しやすくなりそう。
取っ付き易くなりそう

Vue.jsに乗り換えようとしてたけど、あー早く使いたいー。