JSFiddle - React, Tailwind, and code Playground

by blesh

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http:////ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
<script src="http://code.angularjs.org/1.0.3/angular-resource.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="MainCtrl">
        <form name="searchForm" ng-submit="submit()">
            <h4>Search</h4>
            <div class="input-append">
                 <input type="text" ng-model="q" placeholder="Enter Search Text" required/>            
                 <button type="submit" class="btn btn-primary">GO</button>
            </div>
        </form>
        <h4>Results</h4>
    </div>
</div>

JavaScript

/* GOOGLE SEARCH in Angular */

var app = angular.module('myApp', ['ngResource']);

app.controller('MainCtrl', function($scope, twitter) {
    $scope.submit = function() {
        $scope.results = twitter.TweetSearch.query({
            q: $scope.q
        });
    };
});

app.factory('twitter', ['ngResource', function($resource) {
    return {
        TweetSearch: $resource('https://api.twitter.com/1.1/search/tweets.json')
    }}]);