JSFiddle - React, Tailwind, and code Playground

by Sajeetharan Sinnathurai

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<div ng-app="dataApp">
    <div ng-controller="HistoryController">
        <div ng-hide="loaded">Loading...</div>
        <div ng-show="loaded">
            <input type="text" ng-model="val" />
            <button class="btn-default" ng-click="getData(val);">Go</button>
            <ul>
                <li ng-repeat="item in revisions">{{item.user}} - {{item.comment}}</li>
            </ul>
        </div>
    </div>
</div>

JavaScript

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

app.factory('Wiki', function ($q, $http) {
    return {
        loadData: function (title) {
            
            var deferred = $q.defer(),
            config = {
                params: {
                    action: "query",
                    prop: "revisions",
                    format: "json",
                    rvlimit: 50,
                    titles: title,
                    callback: "JSON_CALLBACK"
                }
            },
            url = "http://en.wikipedia.org/w/api.php?";

            $http.jsonp(url, config).success(function(data) {
                var pages = data.query.pages;
                for (var pageid in pages) {
                    deferred.resolve(pages[pageid].revisions);
                    break;
                }
            });
            
            return deferred.promise;
        }
    };
});

app.controller('HistoryController', function($scope, Wiki) {
    $scope.loaded = false;
    $scope.getData = function(val) {
        Wiki.loadData(val).then(function(data) {
            $scope.loaded = true;
            $scope.revisions = data;
        });
    }
    $scope.getData('obama');
});