Angular.jsを使えるだけ使ってみようと思い、
結果として拙作の鉄道運行情報からJSONひろって表示するだけのサービスを作った。

関東地方鉄道運行情報 with Angular.js

表示するだけと言っても、Angular.jsの意味がないので以下のような機能をつけてみた

なお、アニメーションごりごりするのはAngular.js的に推奨されてない模様

HTMLそのものがテンプレートとなる

HTMLタグにng-appng-controller等、専用の属性を追加して、変更対象は{{…}}とする Angular.jsは対象のDOMを走査してよしなにしてくれる

フォーム部品との連携

キーワードでの絞り込み機能で使っている。Angular.jsの特長としてわかりやすい部分

テキスト入力に

1
<input type="text" ng-model="query">

出力部分に

1
2
3
<li ng-repeat="line in lines | filter:query">
  {{...}}
</li>

これしか書いていないのに何か検索ライブラリでも入ってるかのように動く。
すごい!

「渋谷」とか「新宿」で検索すると関連する路線をフィルターできる
データとして駅名や駅の所在地の情報を持っているので、それも拾っているようだ

複数のJSONを拾って利用する

外部APIなら$resourceを利用するのが手軽(angular-resource.jsが必要)
並列読み込みの完了検知のために$qサービスを使う

1
2
3
4
5
6
7
8
9
10
11
12
13
A = $resource(a.json);
B = $resource(b.json);
...
$scope.a = A.query();
$scope.b = B.query();
...
$q.all([
  $scope.a.$promise,
  $scope.b.$promise,
  ...
]).then(function() {
  // do something
});

実際には一部$resourceでひろえなかったので$http.getも使っている
いずれにしても$promiseを返してくれるのでDeferredが捗る

モデルは分離したほうがよさそうだけど $scopeに渡した後watchされてないタイミングがあったり? 隠蔽されている部分が多いし難儀だった

PubSub的なやつ

1
2
3
4
5
6
7
//送信側
$rootScope.$broadcast('SomethingEvent', data);

//受信側
$scope.$on('SomethingEvent', function(e, data) {
  // do something
});

モデルのプロパティからスタイルを生成する

1
<p ng-style="{'border-left':'4px solid {{line.color}}'}"></p>

プロパティ内部でも{{...}}が使えるようだ

どうでもいいけどanglerだと思ってたら違うのねん