我想在我的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>
我希望有帮助.
