Angular.js с Sinatra

Я хотел бы использовать Angular.js в моих приложениях Sinatra. К сожалению, я не нашел полезных советов по этому поводу. Я нашел некоторые примеры Rails, однако я всегда считал Rails и Padrino довольно сложными в сравнении с минималистской философией Sinatra.

Я просмотрел несколько видеороликов (найденных Googling Angular.js), но мне все еще трудно применить к Sinatra.

Самый полный учебник, который я нашел до сих пор, был один от yearofmoo.com.

Но все же я потерялся, пытаясь применить это к Sinatra, и взломать мой выход из этого, похоже, не является вариантом, так как простая ошибка в любом случае может привести меня к правильному пути. Я потерян, и я признаю это!

Просьба, чтобы любая помощь, основанная на вашем опыте попытки сделать что-то подобное, была бы очень признательна, если бы она была распространена. Все, что мне нужно в этот момент, - это запустить мой JSON из приложения Sinatra на страницы с Angular.js.

Спасибо.

Ответ 1

Как я уже говорил в комментариях выше, структура приложения больше не будет полагаться на сервер для шаблонирования пользовательского интерфейса или генерации разметки. Ваш сервер будет главным образом сервером данных и файлов.

Хорошо, предположим, что у вас есть какой-то маршрут в Sinatra, настроенный для возврата следующего json (с content-type: 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

Я нашел этот учебник Sinatra был полезен, хотя он использует Knockout.js не Angular. Это помогает вам создать приложение Sinatra, которое возвращает JSON, и было довольно просто взять понятия и код из Angular учебника для подключения к это простой бэкэнд.