My First JsFiddle: Twitter Search

by Rinas

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular-resource.min.js"></script>
<!doctype html>
<html ng-app='Twitter'>
    <head></head>
    <body>
        <div ng-controller="TwitterCtrl">
            <form class='form-horizontal'>
                <input type="text" ng-model='searchTerm'>
                <button class="btn" ng-click="doSearch()"><i class='icon-search'></i> Search</button>
            </form>
                <hr>
            <table class="table table-hover">
               <tr ng-repeat="tweet in twitterResult.results">
                   <td><img ng-src="{{tweet.profile_image_url}}" class="img-rounded" alt="200x75" style="width: 200px; height: 75px;"></td>
                   <td>{{tweet.text}}</td>
               </tr>
            </table>
                    <pre>Total: {{twitterResult.results.length}}</pre>
                    <pre>{{twitterResult.results | json}}</pre>
        </div>
    </body>

</html>

JavaScript

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

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

    $scope.doSearch = function(){
        $scope.twitterResult = twitter.get({q:$scope.searchTerm});
        console.log($scope.twitterResult.results);
    };

}