読者です 読者をやめる 読者になる 読者になる

Lambdaカクテル

DESCRIBING: Scala, Akka, P2P, Scheme, Political sth., etc.

AngularJS+Yeoman+Karma+JasmineでDIするには

angularjs プログラミング

どこにも日本語資料がなくて困っていましたぞ!!

さて、例にならってGithubに上げてます。

technical-docs/angularjs-injector.md at master · windymelt/technical-docs · GitHub

でもGithubって気軽に星を投げたりできない。gh-pagesとかに移行してみようかしら。

流れ

  1. テストしたいプログラムを書く
  2. テストしたいモジュールの中で使われているコンポーネントのモックを作る
  3. $injectorを使ってinjectする
  4. 同名のコンポーネントが置換される
  5. テストしやすい

という話。

AngularJSはコンポーネントのインジェクションを行うとき、コンポーネント名の文字列($scopeとか)を取得してDIコンテナから該当するコンポーネントを検索するという手法を使っているらしい。変態だ。以下のように記述するだけで、$scopeに対応するコンポーネントを探してインスタンス化しているのだ。ド変態だ。

angular.module('hoge').service('huga', function ($scope) {...});

この変態ながら便利な仕様にも欠点があって、名前で検索しているが故に、コードをminifyするとAngularはコードが依存するコンポーネントが探し出せなくなり動かなくなってしまうのだ。これを回避する方法がコンポーネントの宣言方法を以下のように変えること。

angular.module('hoge').service('huga', ['$scope', function ($scope) {...}]);

文字列はminifyされないので依存性の記述は守られる。変態だ。