pirosikick's diary

君のハートにunshift

Angular2.0のDI

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

  • 今まで依存関係を定義するのに2ステップ必要だった
    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

Asynchronous Injection

Annotations

まとめ

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

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