Angular.js 与 Sinatra答案

【问题标题】：Angular.js with SinatraAngular.js 与 Sinatra
【发布时间】：2013-01-24 21:20:10
【问题描述】：

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

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

目前我找到的最全面的教程是来自 yearofmoo.com 的one。

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

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

谢谢。

【问题讨论】：

实际上，AngularJS 基本上取代了做任何服务器端模板的需要。您的网络服务器成为 REST/AJAX 数据和文件的来源，仅此而已。因此，您将开发一个 Angular 应用程序，然后将 sinatra 绑定到其中，反之亦然。
我是从我找到的所有材料中得到的；但是基于路由的安全性呢？无论如何，我怎样才能在服务器和 angular.js 之间做这种粘合？如果是这种情况，您会建议使用 api 库（例如葡萄）而不是 sinatra 吗？
基于路由的安全性可以由 Angular 处理并由您的服务器强制执行。由于 Angular 在客户端进行路由，您将保护您的应用程序在服务器端显示的数据（因为数据是您想要保护的内容）。我肯定会推荐一个 API 主机而不是标准的 Web UI 服务器框架。
是的，应该可以。我不是 Sinatra 专家，但如果您要在 sinatra 中设置一些返回 JSON 且内容类型为 application/json 的路由，您可以使用 $http.get('/MySinatra/Route').success(function(data) { /*do whatever*/ });
我添加了一个说明基本思想的答案。它显然可以让更多人参与其中，但我希望它可以帮助你朝着正确的方向前进。不过，关于在 Sinatra 中托管 Ruby Web API 的问题，我问错人了。

标签： javascript sinatra angularjs

【解决方案1】：

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

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

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

然后你会在 Angular 中使用类似的东西来加载数据（基本上）：

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;
      });
   };

});

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

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

希望对你有帮助。

【讨论】：

unfourtantly 代码对我不起作用，我怀疑它在 app.js 中缺少某些东西？？？ app.controller('MyCtrl', function($scope, $injector) { ['$scope', 'loadData']; );
非常感谢 Blesh，它现在可以工作了，这对我来说是一个好的开始。有了这些实践知识.. 我现在正在努力阅读文档docs.angularjs.org/guide/overviewCheers,,,

【解决方案2】：

我发现 this Sinatra tutorial 很有帮助，尽管它使用的是 Knockout.js 而不是 Angular。它可以帮助您构建一个返回 JSON 的 Sinatra 应用程序，并且从 Angular tutorial 获取概念和代码来连接到这个简单的后端非常简单。

【讨论】：

感谢 heyotwell，我在比较 angular 与 knockout.js 和 backbone.js 时已经检查过了。知道某些代码适用于某人总是很高兴，所以如果它不适用于您；您可以努力解决问题所在。例如，我也遇到了 CORS 的问题。我解决了。 ruby -rrack -e "include Rack;Handler::Thin.run Builder.new{run Directory.new''}" - enable-cors.org - html5rocks.com/en/tutorials/cors