Sinatra+AngularJS+Jsonpで疎結合のwebアプリを作る

ハマったのはjsonpをjsonとしていたこと。
localhostで動かしていても、passengerサーバを通していたので、別ドメインだった。

扱い方は、サーバの側は

require 'sinatra'
require 'sinatra/jsonp'

get '/getjson' do
 @data=[{:name=>"tanaka",:score=>30},{:name=>"nakata",:score=>50}]
 if params[:callback]
  :jsonp @data, "#{params[:callback]}"
 else
  "cross domain"
 end
end

とかして、クライアント側は

!!!5
%html
  %head
    %script{:type=>"text/javascript",:scr=>"http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"}
    %script{:type=>"text/javascript",:src=>"https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"}
  %body
    %div{"ng-app"=>""}
      %div{"ng-controller"=>"appCntr"}
        %ul{"ng-repeat"=>"user in users"}
          %li {{user.name}}
          %li {{user.score}}
    :javascript
      $(function(){
        function appCntr($scope,$http){
          $http.jsonp(url+"?callback=JSON_CALLBACK).success(function(data){
          $scope.users=data;
          });
        }
      });

とかする。