Привязка и шаблоны модели AngularJS и Play Framework

Мне было интересно, сумел ли кто-нибудь найти хороший способ привязать модель между Play Framework и AngularJS. Например, вы нажимаете на URL-адрес, и страница создается в Play Framework с использованием шаблонов на стороне сервера для данного объекта Person. Теперь вы хотите использовать AngularJS для обеспечения богатого пользовательского опыта и использования этого объекта Person в шаблонах JavaScript/AngularJS на стороне клиента.

Одним из способов сделать это было бы сделать еще один вызов Ajax от AngulraJS и заполнить модель JS. Это кажется избыточным с первым вызовом для создания страницы для этого объекта Person.

Другим способом было бы сделать что-то вроде этого:

person = @Html(FrontEnd.personToJSON(thisPersonObject));

Но тогда вам нужно установить объект person в $scope. Кроме того, это похоже на взлом, поскольку весь объект находится в формате JSON, будет размещен внутри html-страницы.

Я знаю, что есть лучшие способы архитектовать это веб-приложение, например, используя SPA-дизайн, где Play - это всего лишь уровень сервиса с чистым API для извлечения и обработки данных. Это позволит вам делать MVC строго на стороне клиента.

Любые мысли?

Ответ 1

То, что вы предложили, является жизнеспособным подходом с AngularJS. Другим решением будет запуск javascript-кода на стороне сервера, а затем отправка вывода в браузер (аналогично Airbnb Rendr), Однако ничего подобного не существует, что я знаю о AngularJS. Это может быть невозможно из-за способа обработки областей.

С помощью загрузочного объектного подхода javascript это просто, и вы избегаете посещать сервер дважды.

Итак,

Создайте приложение как SPA-клиент, который использует API REST.
Используя серверные шаблоны, визуализируйте дополнительный объект javascript с данными, которые вы хотите загрузить, и включите их на страницу (или другой файл js).
В интерфейсе переносите данные из этого загрузованного javascript-объекта в вашу модель ресурсов $resource.

См. этот аналогичный вопрос с AngularJS и Rails.
Как загрузочные данные, как они были получены службой $resource в Angular.js

Для SEO используйте этот AngularJS SEO guide [1]. Это руководство было упомянуто инженерами AngularJS в Google I/O [2].

[1] http://www.yearofmoo.com/2012/11/angularjs-and-seo.html
[2] http://www.youtube.com/watch?feature=player_detailpage&v=HCR7i5F5L8c#t=2238

Ответ 2

Angular был разработан как одностраничное приложение, поэтому вам не следует пытаться загружать страницу уже с данными. Вместо этого вы должны предоставить непринужденный API своей инфраструктурой и использовать Angular ресурсы или альтернативу (например: restangular) для приема и отправки данных с сервера.

Подводя итог: ваше приложение/сайт должны взаимодействовать только с вашей инфраструктурой с помощью api.

Ответ 3

Для создания веб-приложения, которое я создаю, мы попытались использовать механизм шаблонов socket.io и smarty при вызове сервера. Я указываю файл smarty.tpl, который я хочу, чтобы сервер отображал, а затем возвращает фронт конец финиша html. Я использовал запрошенный шаблон smarty для обработки циклов и т.д. И помещал в дескрипторы и ng-клики, где я знаю, что они мне понадобятся, а затем, когда html вернется в интерфейс, я скомпилирую его в соответствующую область и вставляю это в DOM.

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

Если вы пытаетесь понять, как создать бэкэнд для шаблона Angular, потому что вы беспокоитесь о проблемах с производительностью, я предлагаю вам создать собственный набор настраиваемых директив, который уменьшит количество прослушивателей часов которые добавляются на страницу путем привязки данных только один раз, когда это необходимо.

Ответ 4

Через Play возможное семя (https://github.com/angyjoe/eventual) извлекает объект Celebrity как JSON. Поля этого JSON затем передаются моделях AngularJS на странице HTML. Таким образом, вы можете без шаблонов Scala выжить и выжить с богатством AngularJS на стороне клиента.