Angular.js与Sinatra

Question

I would like to use Angular.js in my Sinatra applications. 我想在我的Sinatra应用程序中使用Angular.js。 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. 我确实找到了一些Rails示例，但与Sinatra的简约哲学相比，我总是发现Rails和Padrino相当难以处理。

I watched a number of videos (found by Googling angular.js), but am still finding it difficult to apply to Sinatra. 我观看了很多视频（由Googling angular.js发现），但我仍然觉得很难申请Sinatra。

The most comprehensive tutorial I found so far was one from yearofmoo.com. 最全面的教程中，我发现到目前为止是一个从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. 但是我仍然试图将它应用于Sinatra，而且我的出路也不是一种选择，因为一个简单的错误可能会让我走上正确的道路。 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. 此时我需要的是将我的JSON从Sinatra应用程序路径到angular.js驱动的页面。

Thanks. 谢谢。

Answer 1

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. 正如我在上面的评论中所说，应用程序结构将不再依赖于服务器来模板化UI或生成标记。 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): 好吧..假设你在Sinatra有一些路由设置为返回以下json（内容类型：application / json）：

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

You would then use something like this in Angular to load that data (basically): 然后你会在Angular中使用这样的东西加载那些数据（基本上）：

app.js 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. 我希望有所帮助。

Answer 2

I found this Sinatra tutorial was helpful even though it uses Knockout.js not Angular. 我发现这个Sinatra教程很有用，即使它使用Knockout.js而不是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. 它可以帮助您构建一个返回JSON的Sinatra应用程序，并且从Angular教程中获取概念和代码以连接到这个简单的后端非常简单。

Angular.js与Sinatra

问题描述

2 个解决方案

解决方案1
13 已采纳 2013-01-24 22:06:08

解决方案2
3 2013-01-26 00:41:15

Angular.js与Sinatra

问题描述

2 个解决方案

解决方案1 13 已采纳 2013-01-24 22:06:08

解决方案2 3 2013-01-26 00:41:15

解决方案1
13 已采纳 2013-01-24 22:06:08

解决方案2
3 2013-01-26 00:41:15