Ответ 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>
Я надеюсь, что это поможет.