10

Sinatra アプリケーションで Angular.js を使用したいと考えています。残念ながら、これに関する有用なヒントは見つかりませんでした。Rails の例をいくつか見つけましたが、Rails と Padrino は、Sinatra のミニマルな哲学と比較して、扱いがかなり難しいと常に感じていました。

いくつかのビデオ (Angular.js のグーグルで見つけたもの) を見ましたが、Sinatra に適用するのはまだ難しいと感じています。

これまでに見つけた最も包括的なチュートリアルは、yearofmoo.comのものでした。

しかし、それでも私はこれを Sinatra に適用しようとして途方に暮れています。どこかで単純なエラーが発生すると、とにかく正しい道から外れてしまう可能性があるため、これからハッキングすることは選択肢ではないようです。私は迷子になり、それを認めます!!

似たようなことをしようとした経験に基づいた助けがあれば、共有していただければ幸いです。この時点で必要なのは、JSON を Sinatra アプリから angular.js を利用したページにパスすることだけです。

ありがとう。

4

2 に答える 2

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>

それがお役に立てば幸いです。

于 2013-01-24T22:06:08.620 に答える
3

この Sinatra チュートリアルは、Angular ではなく Knockout.js を使用していますが、役に立ちました。JSON を返す Sinatra アプリケーションを構築するのに役立ちます。Angular チュートリアルから概念とコードを取得して、この単純なバックエンドに接続するのは非常に簡単でした。

于 2013-01-26T00:41:15.360 に答える