我想在我的Sinatra应用程序中使用Angular.js。不幸的是，我找不到任何有用的提示。我确实找到了一些Rails的例子，但是与Sinatra的简约哲学相比，我总是发现Rails和Padrino很难处理。
我观看了许多视频(由Googling angular.js找到)，但仍然很难将其应用于Sinatra。
到目前为止，我发现的最全面的教程是yearofmoo.com的one。
但是我仍然迷失于尝试将其应用于Sinatra，并且摆脱困境似乎不是一个选择，因为任何地方的简单错误都可能使我走上正确的道路。我迷路了，我承认了!!
如果您能分享尝试中基于您尝试做类似事情的经验所提供的帮助，将不胜感激。我现在需要的是将JSON从Sinatra应用程序转换为angular.js支持的页面。
谢谢。
最佳答案
正如我在上面的评论中所述，应用程序结构将不再依赖服务器来模板化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>
希望对您有所帮助。
关于javascript - Angular.js与Sinatra，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14511002/