Question

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

我观看过一些视频（由Googling angular.js发现），但我仍然觉得很难申请Sinatra。

到目前为止，我发现的最全面的教程是来自yearofmoo.com的one。

但是我仍然试图将其应用于Sinatra，而且我的出路并不是一种选择，因为一个简单的错误可能会让我走上正确的道路。我迷路了，我承认了!!

如果共享的话，根据您尝试做类似事情的经验，我们将非常感激。此时我需要的是将我的JSON从Sinatra应用程序路径到angular.js驱动的页面。

感谢。

Answer 1

正如我在上面的评论中所说，应用程序结构将不再依赖于服务器来模板化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>

我希望有所帮助。

Answer 2

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

Angular.js与Sinatra

2 个答案: