yaakaito.org

Angular.jsでcoderwallのバッチ取得してみる

AngularJS, JavaScript

Coderwallのバッチ取得するのはよくみるけど

Angularでやってみた的なのはみないなーと思ったのでやってみた。 といってもjQueryなんかでやるのとそんなに変わらないです。

バッチを表示させるHTMLを書く

とりあえずリストにイメージを突っ込んでいく感じにすることにしました。

1
2
3
4
5
6
7
<div ng-controller="coderwallController">
  <ul>
    <li ng-repeat="badge in badges">
      <img ng-src="{{badge.badge}}" alt="{{badge.description}}" title="{{badge.name}}" />
    </li>
  </ul>
</div>

こんな感じでデータをバインディングします。

データを取得する

jQueryなんかでgetJSONとかするのとそんなに変わらないです。

1
2
3
4
5
6
7
8
function coderwallController($scope, $http) {

  $scope.badges = [];
  $http.jsonp("http://coderwall.com/yaakaito.json?callback=JSON_CALLBACK").success(function(data,status,header,config){
    $scope.badges = data.data.badges;
    console.log($scope.badges);
  });
}

で、取得できました!やりましたね!

全文はgistにあります。