zot*_*guy 10 javascript sinatra angularjs
我想在我的Sinatra应用程序中使用Angular.js.不幸的是,我找不到任何有用的提示.我确实找到了一些Rails示例,但与Sinatra的简约哲学相比,我总是发现Rails和Padrino相当难以处理.
我观看了很多视频(由Googling angular.js发现),但我仍然觉得很难申请Sinatra.
最全面的教程中,我发现到目前为止是一个从yearofmoo.com.
但是我仍然试图将它应用于Sinatra,而且我的出路也不是一种选择,因为一个简单的错误可能会让我走上正确的道路.我迷路了,我承认了!!
如果共享的话,根据您尝试做类似事情的经验,我们将非常感激.此时我需要的是将我的JSON从Sinatra应用程序路径到angular.js驱动的页面.
谢谢.
Ben*_*esh 13
正如我在上面的评论中所说,应用程序结构将不再依赖于服务器来模板化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>
我希望有所帮助.
| 归档时间： |
|
| 查看次数： |
9348 次 |
| 最近记录： |