AngularJS和Play Framework模型绑定和模板

Question

我想知道是否有人想出了一个在Play Framework和AngularJS之间绑定模型的好方法.例如,您点击了一个URL,该页面由Play Framework使用服务器端的模板为给定的Person对象生成.现在,您希望使用AngularJS来启用丰富的用户体验,并在客户端的JavaScript/AngularJS模板中使用该Person对象.

这样做的一种方法是从AngulraJS进行另一个Ajax调用并填充JS模型.这似乎是第一次调用生成该Person对象的页面.

另一种方法是做这样的事情:

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

但是你需要在其中设置person对象$scope.此外,这似乎是一个黑客,因为整个对象是JSON格式,将放在html页面内.

我知道有更好的方法来构建这个Web应用程序,例如使用SPA设计,其中Play只是一个服务层,具有用于数据检索和操作的干净API.这将使您能够在客户端严格执行MVC.

有什么想法吗？

Answer 1

Angular被设计为一个单页面应用程序,因此您应该避免尝试使用数据来引导页面.相反,您应该为您的框架提供一个安静的API,并使用angular的资源或一些替代(例如:restangular)来接收和发送来自服务器的数据.

总结一下:您的应用程序/站点应该只使用api与您的框架进行通信.

Answer 2

您提出的是使用AngularJS的可行方法.另一种解决方案是在服务器端运行javascript代码,然后将输出发送到浏览器(类似于Airbnb的Rendr).但是,我知道AngularJS不存在这样的事情.由于范围的处理方式,可能无法实现.

使用引导的javascript对象方法,它很简单,您可以避免两次访问服务器.

所以,

1. 将您的应用构建为使用REST API的SPA客户端.
2. 使用服务器端模板,使用要引导的数据呈现额外的javascript对象,并将其包含在页面(或其他js文件)中.
3. 在前端,将来自此引导的javascript对象的数据传输到$ resource模型中.

使用AngularJS和Rails查看类似的问题.
如何引导数据,因为它是由Angular.js中的$ resource服务获取的

对于SEO,请使用此AngularJS SEO指南 [1].Google I/O的AngularJS工程师提到了这个指南[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