Sinatra, AngularJS Resource, HTTP PUT, and how there are no params ... 'cause it's JSON I guess, so, uhh... use request.body?!

app.rb

require 'dm-core'
require 'dm-serializer'
require 'dm-migrations'
require 'sinatra'
require 'sinatra/reloader'
require 'slim'
require 'json'

DataMapper.setup(:default, "sqlite3://#{Dir.pwd}/sqlite.db")

class Foo
  include DataMapper::Resource
  property :id, Serial
  property :name, String
  property :bar, Integer
end

DataMapper.finalize.auto_upgrade!

Foo.create(name: "Bar", bar: 43) unless Foo.get(1)

get("/*.html") { slim params[:splat].first.to_sym }
get("/") { slim :app }
get("/foos/:id", provides: :json) {|id| Foo.get(id).to_json }
get("/foos/:id/edit", provides: :json) {|id| Foo.get(id).to_json }

put("/foos/:id") {|id| Foo.get(id).update(JSON.parse(request.body.string)) }

class String
  def unindent; gsub(/^#{scan(/^\s*/).min_by {|l| l.length }}/, '') end
end

template :app do
  <<-EOF.unindent
  doctype html
  html data-ng-app="app"
    head: meta charset="UTF-8"
    body
      a data-ng-href="/#/foos/1/edit" edit
      article data-ng-view=true

      script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"
      script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-route.min.js"
      script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-resource.min.js"

      javascript:
        var app = angular.module('app', ['ngResource', 'ngRoute']).
          factory('Foo', ['$resource', function($resource) {
            return $resource('/foos/:id', {id: '@id'},{update: {method: 'PUT'}})
          }]).

          config(['$routeProvider', function($routeProvider) {
            $routeProvider.
              when('/foos/:id', {
                controller: function($scope, $routeParams, Foo) {
                  $scope.foo = Foo.get({id: $routeParams.id})
                },
                templateUrl: '/foo.html'
              }).

              when('/foos/:id/edit', {
                controller: function($scope, $routeParams, Foo) {
                  $scope.foo = Foo.get({id: $routeParams.id});
                  $scope.update = function() { $scope.foo.$update() }
                },
                templateUrl: '/foo_form.html'
              })
            }])
  EOF
end

template :foo_form do
  <<-EOF.unindent
  form data-ng-model="foo" data-ng-submit="update()"
    label
      | Name:
      input type="text" data-ng-model="foo.name"
    label
      | Bar:
      input type="number" data-ng-model="foo.bar"
    input type="submit"
  EOF
end