JSFiddle - React, Tailwind, and code Playground

by Donal Devine

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-sanitize.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-resource.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
<script src="http://js.devexpress.com/SharedStatic/DevExtreme/14_1/js/jquery-2.1.1.min.js"></script>
<script src="http://cdn3.devexpress.com/jslib/14.1.3/js/dx.webapp.js"></script>
<script src="http://cdn3.devexpress.com/jslib/14.1.3/js/dx.all.js"></script>
<body ng-app="myCalc" ng-controller="AppCtrl">
    <form>
        <br/>
        <br/>Parameter 1:
        <input type="text" ng-model="param1" />
        <br/>
        <br/>Parameter 2:
        <input type="text" ng-model="param2" />
    </form>
    <br/>
    <br/>
    <div data-dx-button="{
        text: 'Sample GET',
        clickAction: click
    }"></div>
    <br/>
    <div>Sum: {{data}}</div>
    <br/>
</body>

JavaScript

(function (angular) {
    'use strict';
    angular.module('myCalc', ['dx', 'ngRoute'])

        .controller('AppCtrl', function ($scope, $http, $templateCache) {
        $scope.click = function (url) {
            $scope.url = url;

            $http.get($scope.url, {
                params: {
                    param1: $scope.param1,
                    param2: $scope.param2

                },
                cache: $templateCache
            }).
            success(function (data) {
                $scope.data = data;
            }).
            error(function (data) {
                $scope.data = data || "Request failed";
            });
        };
    })


        .config(function ($routeProvider, $locationProvider) {
        $routeProvider.when('http://localhost:8000/calc', {
            templateUrl: 'index.html',
            controller: 'AppCtrl'
        });
        // configure html5 to get links working on jsfiddle
        $locationProvider.html5Mode(true);
    });

})(window.angular);