AngularJS 和 Play Framework 模型绑定和模板答案

【问题标题】：AngularJS and Play Framework model binding and templatesAngularJS 和 Play Framework 模型绑定和模板
【发布时间】：2013-10-03 18:23:40
【问题描述】：

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

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

另一种方法是这样做：

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

但是你需要在$scope 中设置person 对象。此外，这似乎是一个 hack，因为整个对象都是 JSON 格式，将被放置在 html 页面中。

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

有什么想法吗？

【问题讨论】：

标签： javascript angularjs web architecture playframework

【解决方案1】：

Angular 被设计为一个单页应用程序，因此您应该避免尝试使用数据引导页面。相反，您应该为您的框架提供一个 RESTful API，并使用angular's resources 或其他替代方法（例如：restangular）从服务器接收和发送数据。

总结一下：您的应用程序/站点应该只使用 API 与您的框架进行通信。

【讨论】：

关于单页应用程序的 SEO 考虑因素是什么？
最好的办法是为您的应用/产品创建一个促销网站，而不是尝试让应用对 SEO 友好。例如，basecamp.com 是促销网站，[yourname].basecamp.com 是应用程序。

【解决方案2】：

您提出的是 AngularJS 的可行方法。另一种解决方案是在服务器端运行 javascript 代码，然后将输出发送到浏览器（类似于 Airbnb 的Rendr）。但是，对于 AngularJS，我所知道的并不存在这样的情况。由于作用域的处理方式，这可能是不可能的。

使用自举的 javascript 对象方法，它很简单，您可以避免两次访问服务器。

所以，

将您的应用构建为使用 REST API 的 SPA 客户端。
使用服务器端模板，使用您要引导的数据呈现一个额外的 javascript 对象，并将其包含在页面（或其他 js 文件）中。
在前端，将数据从这个引导的 javascript 对象传输到您的 $resource 模型中。

使用 AngularJS 和 Rails 查看类似的问题。
How to bootstrap data as it it were fetched by a $resource service in 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

【讨论】：

【解决方案3】：

对于我正在构建的 Web 应用程序，我们尝试使用 socket.io 和 smarty 模板引擎，当我调用服务器时，我指定了一个我希望服务器呈现的 smarty .tpl 文件，然后它返回前面结束完成 html。我已经使用请求的 smarty 模板来处理 for 循环等，并将把手和 ng-clicks 放在我知道我需要它们的地方，然后当 html 返回到前端时，我将它编译到相关范围并注入它在 DOM 中。

我发现这是一种不好的方法，因为就像上面的人所说的那样，Angular 本来就是一个客户端解决方案，而尝试做这样的事情实际上只是在搅浑水。

如果您因为担心性能问题而试图搞清楚后端渲染 Angular 模板的方法，我建议您考虑构建自己的一组自定义指令，以减少获取的 watch listener 数量通过只在需要的地方绑定一次数据来添加到页面中。

【讨论】：

【解决方案4】：

通过 Play，最终的种子 (https://github.com/angyjoe/eventual) 将 Celebrity 对象检索为 JSON。然后这个 JSON 的字段在 HTML 页面中传递给 AngularJS 模型。因此，您无需 Play Scala 模板，而是在客户端使用 AngularJS 的丰富性。

【讨论】：