JSFiddle - React, Tailwind, and code Playground

by BinaryMuse

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<script src="http://code.angularjs.org/1.0.4/angular-resource.min.js"></script>
<div ng-app="myApp">
  <div ng-controller='MainController'>
    Resource: <pre>{{resource | json }}</pre>
    Favorite color: <input ng-model='resource.color'>
      <button ng-click='update()'>Save</button>
      <button ng-click='delete()'>DELETE THIS</button>
    <pre>{{debug | newlined}}</pre>
  </div>
</div>

JavaScript

// Demonstrating preloading JSON data into $resource

window.somePreloadedJson = {
  id: 1,
  name: 'lancelot',
  quest: 'holy grail',
  color: 'blue',
};

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

app.factory('myResource', function($resource) {
  return $resource('/my/fake/:id', { id: '@id' });
});

app.controller('MainController', function($scope, myResource, logger) {
  $scope.debug = logger.messages;
  $scope.resource = new myResource(window.somePreloadedJson);
  $scope.update = function() {
    $scope.resource.$save();
  };
  $scope.delete = function() {
    // AAAAAAAAaaaaahhhhhhhhh......
    $scope.resource.$delete();
  };
});






// For debugging:
// Service with `log` method to add debug lines
app.factory('logger', function($rootScope) {
  var scope = $rootScope.$new(true);
  scope.messages = [];
  scope.log = function(msg) {
    scope.messages.push(msg);
  };
  return scope;
});

// For debugging:
// Override $httpBackend with fake backend that logs out
// HTTP requests via the `logger` service.
app.config(function($provide) {
  $provide.decorator('$httpBackend', function(logger) {
    return function(type, url, data) {
      var msg = type + " request to " + url;
      if (data) msg += " with data: " + data;
      logger.log(msg);
    };
  });
});

// For debugging:
// Join array elements with a newline.
app.filter('newlined', function() {
  return function(str) {
    if (str) return str.join("\n");
  };
});