Angular.js与Sinatra
[英]Angular.js with Sinatra
问题描述
我想在我的Sinatra应用程序中使用Angular.js。 不幸的是，我找不到任何有用的提示。 我确实找到了一些Rails示例，但与Sinatra的简约哲学相比，我总是发现Rails和Padrino相当难以处理。
我观看了很多视频（由Googling angular.js发现），但我仍然觉得很难申请Sinatra。
最全面的教程中，我发现到目前为止是一个从yearofmoo.com。
但是我仍然试图将它应用于Sinatra，而且我的出路也不是一种选择，因为一个简单的错误可能会让我走上正确的道路。 我迷路了，我承认了!!
如果共享的话，根据您尝试做类似事情的经验，我们将非常感激。 此时我需要的是将我的JSON从Sinatra应用程序路径到angular.js驱动的页面。
谢谢。
2 个解决方案
解决方案1
13 已采纳 2013-01-24 22:06:08
正如我在上面的评论中所说，应用程序结构将不再依赖于服务器来模板化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>
我希望有所帮助。
解决方案2
3 2013-01-26 00:41:15
我发现这个Sinatra教程很有用，即使它使用Knockout.js而不是Angular。 它可以帮助您构建一个返回JSON的Sinatra应用程序，并且从Angular教程中获取概念和代码以连接到这个简单的后端非常简单。
sinatra + angular.js +加载模板
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.