AngularJS和Play框架模型绑定和模板

AngularJS and Play Framework model binding and templates

本文关键字：绑定 框架 Play AngularJS 模型      更新时间：2023-09-26

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

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

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

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

但是，您需要在$scope中设置人员对象。此外，这似乎是一个黑客，因为整个对象是JSON格式，将被放置在html页面中。

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

有什么想法吗？

Angular 被设计为一个单页应用程序，因此您应该避免尝试使用数据引导页面。相反，您应该为您的框架提供一个 restful API，并使用 angular 的资源或一些替代方案(例如：restangular(从服务器接收和发送数据。

总而言之：您的应用程序/站点应该只使用 API 与您的框架进行通信。

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

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

所以

  1. 将应用构造为使用 REST API 的 SPA 客户端。
    2. 使用
  2. 服务器端模板，使用要引导的数据渲染一个额外的 javascript 对象，并将其包含在页面(或其他 js 文件(中。
  3. 在前端，将数据从这个引导的 JavaScript 对象传输到您的$resource模型中。

参见 AngularJS 和 Rails 的类似问题。
如何在 Angular 中的$resource服务获取数据时引导数据.js

对于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

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

我发现这是一个糟糕的方法，因为就像上面的人说 Angular 是一个客户端解决方案，试图做这样的事情实际上只是把水搅浑了。

如果您因为担心性能问题而试图找出一种后端渲染角度模板的方法，我建议您考虑为自己构建一组自定义指令，这些指令将通过仅在需要的地方绑定一次数据来减少添加到页面的监视侦听器的数量。

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

相关文章：