I would like to use Angular.js in my Sinatra applications. Unfortunately, I couldn't find any useful tips on this. I did find some Rails examples, however I have always found Rails and Padrino rather difficult to deal with, compared to the minimalistic philosophy of Sinatra.

I watched a number of videos (found by Googling angular.js), but am still finding it difficult to apply to Sinatra.

The most comprehensive tutorial I found so far was one from yearofmoo.

But still I am lost trying to apply this to Sinatra, and hacking my way out of this appears not to be an option as a simple error anywhere might set me off the right path anyway. I am lost and I admit it!!

Kindly any help based on your experience of trying to do something similar would be much appreciated, if shared. All I need at this point is to path my JSON from a Sinatra app to angular.js powered pages.

Thanks.

I would like to use Angular.js in my Sinatra applications. Unfortunately, I couldn't find any useful tips on this. I did find some Rails examples, however I have always found Rails and Padrino rather difficult to deal with, compared to the minimalistic philosophy of Sinatra.

I watched a number of videos (found by Googling angular.js), but am still finding it difficult to apply to Sinatra.

The most comprehensive tutorial I found so far was one from yearofmoo.com.

But still I am lost trying to apply this to Sinatra, and hacking my way out of this appears not to be an option as a simple error anywhere might set me off the right path anyway. I am lost and I admit it!!

Kindly any help based on your experience of trying to do something similar would be much appreciated, if shared. All I need at this point is to path my JSON from a Sinatra app to angular.js powered pages.

Thanks.

• javascript
• sinatra
• angularjs

• 2 In reality, AngularJS basically replaces the need to do any server-side templating. Your webserver becomes a source of REST/AJAX data and files, and that's about it. So you'd develop an angular application, then tie sinatra into it, and probably not the other way around. – Ben Lesh Commented Jan 24, 2013 at 21:23
• I was getting that from all the material i found; but what about routes-based security?? and anyway how can I do this glue between the server and angular.js? and if this is the case, would you recommend using an api library such as grape instead of sinatra? – zotherstupidguy Commented Jan 24, 2013 at 21:28
• 1 Routes-based security can be handled by Angular and enforced by your server. Since Angular is doing the routing client side, you would protect the data that your app is showing at the server side (since the data is what you want to secure). I would definitely recommend an API host over the standard web UI server framework. – Ben Lesh Commented Jan 24, 2013 at 21:36
• 1 Yes, it should be possible. I'm not a Sinatra expert, but if you were to set up some route in sinatra that returned JSON with content-type: application/json, you could use $http.get('/MySinatra/Route').success(function(data) { /*do whatever*/ }); – Ben Lesh Commented Jan 24, 2013 at 21:48
• 1 I've added an answer that illustrates the basic idea. It can obviously get a LOT more involved, but I hope that it helps you go in the right direction. I'm the wrong guy to ask about hosting Ruby web APIs in Sinatra though. – Ben Lesh Commented Jan 24, 2013 at 22:07

2 Answers 2

As I stated in the comments above, the application structure would no longer rely on the server for templating the UI or generation of markup. Your server would essentially be a data and file host.

Okay.. presuming you have some route in Sinatra set up to return the following json (with content-type: application/json):

[
  { "id": 1, "name": "Foo" },
  { "id": 2, "name": "Bar" }
]

You would then use something like this in Angular to load that data (basically):

app.js

//create your application module.
var app = angular.module('myApp', []);

//add a controller to it
app.controller('MyCtrl', function($scope, $http) {

   //a scope function to load the data.
   $scope.loadData = function () {
      $http.get('/Your/Sinatra/Route').success(function(data) {
         $scope.items = data;
      });
   };

});

Then in your markup you'd do this:

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MyCtrl">
    <button ng-click="loadData()">Load Data From Server</button>
    <ul>
         <li ng-repeat="item in items">ID: {{item.id}}, Name: {{item.name}}</li>
    </ul>
  </body>

</html>

I hope that helps.

I found this Sinatra tutorial was helpful even though it uses Knockout.js not Angular. It helps you build a Sinatra application that returns JSON, and it was quite straightforward to take the concepts and code from the Angular tutorial to connect to this simple backend.