Angular.jsを使えるだけ使ってみようと思い、 結果として拙作の鉄道運行情報からJSONひろって表示するだけのサービスを作った。
表示するだけと言っても、Angular.jsの意味がないので以下のような機能をつけてみた
- 情報が出ている路線だけフィルターできる
- キーワードで絞り込みができる
なお、アニメーションごりごりするのはAngular.js的に推奨されてない模様
HTMLそのものがテンプレートとなる
HTMLタグにng-app、ng-controller等、専用の属性を追加して、変更対象は{{…}}とする
Angular.jsは対象のDOMを走査してよしなにしてくれる
フォーム部品との連携
キーワードでの絞り込み機能で使っている。Angular.jsの特長としてわかりやすい部分
テキスト入力に
<input type="text" ng-model="query">
出力部分に
<li ng-repeat="line in lines | filter:query">
{{...}}
</li>
これしか書いていないのに何か検索ライブラリでも入ってるかのように動く。 すごい！
「渋谷」とか「新宿」で検索すると関連する路線をフィルターできる データとして駅名や駅の所在地の情報を持っているので、それも拾っているようだ
複数のJSONを拾って利用する
外部APIなら$resourceを利用するのが手軽（angular-resource.jsが必要）
並列読み込みの完了検知のために$qサービスを使う
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的なやつ
//送信側
$rootScope.$broadcast('SomethingEvent', data);
//受信側
$scope.$on('SomethingEvent', function(e, data) {
// do something
});
モデルのプロパティからスタイルを生成する
<p ng-style="{'border-left':'4px solid {{line.color}}'}"></p>
プロパティ内部でも{{...}}が使えるようだ
どうでもいいけどanglerだと思ってたら違うのねん