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

<a href="http://110chang.com/traininfo/angular-test/">関東地方鉄道運行情報 with Angular.js</a>



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

* 情報が出ている路線だけフィルターできる
* キーワードで絞り込みができる

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

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

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

# フォーム部品との連携

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

テキスト入力に

```html
<input type="text" ng-model="query">
```

出力部分に

```html
<li ng-repeat="line in lines | filter:query">
  {{...}}
</li>
```

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

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

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

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

```js
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
});
```

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

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

# PubSub的なやつ

```js
//送信側
$rootScope.$broadcast('SomethingEvent', data);

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

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

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

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

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

Archive for 2014.02

Angular.jsを試してみる〜JSONを取得して何かする