10

我想在我的 Sinatra 应用程序中使用 Angular.js。不幸的是，我找不到任何有用的提示。我确实找到了一些 Rails 示例，但是与 Sinatra 的简约哲学相比，我一直发现 Rails 和 Padrino 很难处理。

我观看了一些视频（通过谷歌搜索 angular.js 找到），但仍然发现很难应用于 Sinatra。

到目前为止，我发现的最全面的教程是来自yearofmoo.com 的教程。

但是我仍然在尝试将其应用于 Sinatra 时迷失了方向，并且破解我的方法似乎不是一种选择，因为任何地方的简单错误都可能让我走上正确的道路。我迷路了，我承认！！

如果您分享任何基于您尝试做类似事情的经验的帮助，我们将不胜感激。在这一点上，我需要的只是将我的 JSON 从 Sinatra 应用程序引导到 angular.js 驱动的页面。

谢谢。

4

2 回答 2

13

正如我在上面的评论中所说，应用程序结构将不再依赖服务器来模板化 UI 或生成标记。您的服务器本质上是一个数据和文件主机。

好的..假设您在 Sinatra 中有一些路由设置为返回以下 json（内容类型：application/json）：

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

然后，您将在 Angular 中使用类似的东西来加载该数据（基本上）：

应用程序.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;
      });
   };

});

然后在你的标记中你会这样做：

<!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>

我希望这会有所帮助。

于 2013-01-24T22:06:08.620 回答
3

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.

于 2013-01-26T00:41:15.360 回答