🧊

Angular.jsでTwitter Search APIを使う

いま流行りのAngular.jsのサンプルです。

参考：AngularJS Twitter Search - YouTube

この動画で、TwitterのSerach APIを使ったサンプルが紹介されてました。

ブコメを見て気付きましたが、いまこのサンプル動きません。
1年で動かなくなるなんて・・・！

Angular.js

前にHandlebars.jsを使って、jQueryでTwitter APIを叩くサンプルを作ったんですけど、それより簡単に書けます。

参考：Handlebars.jsとTwitter Search APIを使ったサンプル - console.lealog();

とは言えHtml的になんだか気持ち悪い書き方になるのはどうにかならんのか・・・。

Html

<!DOCTYPE html>
<html ng-app="Twitter">
<script src="http://code.angularjs.org/angular-1.0.0rc4.min.js">
<script src="http://code.angularjs.org/angular-resource-1.0.0rc4.min.js">
<body>
<div ng-controller="TwitterCtrl">
  <form>
    <input type="text" ng-model="searchTerm">
    <button ng-click="doSearch()">Search</button>
  </form>
  <table>
    <tr ng-repeat="tweet in twitterResult.results">
      <td>{{tweet.text}}</td>
    </tr>
  </table>
</div>
</body>
</html><200b>

ng-hogeがポイントらしい。
クリックイベントとかあんまり書きたくないなぁ・・。

そしてやっぱりViewを構成するとこは{{}}なんやねー。

JavaScript

angular.module('Twitter', ['ngResource']);

function TwitterCtrl($scope, $resource) {
  $scope.twitter = $resource('http://search.twitter.com/:action',
    {action:'search.json', q:'angularjs', callback:'JSON_CALLBACK'},
    {get:{method:'JSONP'}}
  );

  $scope.doSearch = function () {
      $scope.twitterResult = $scope.twitter.get({q:$scope.searchTerm});
  };
}<200b>;<200b>

この@importみたいな書き方も見慣れたなぁ。
これはもうどんどん書くことなくなってくな！

なんかはてなブログのSyntaxHighlightが調子悪くて変なタグが混じるんですけど・・・！