13

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

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

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

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

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

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

有什么想法吗？

4

4 回答 4

12

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

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

于 2013-10-08T16:21:45.380 回答
9

您提出的是使用 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]。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

于 2013-10-10T23:29:50.180 回答
2

Through Play, the eventual seed (https://github.com/angyjoe/eventual) retrieves a Celebrity object as a JSON. The fields of this JSON are then communicated to AngularJS models in an HTML page. Thus, you do without Play Scala templates and survive with AngularJS richness on the client-side.

于 2013-11-17T03:09:58.123 回答
2

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

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

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

于 2013-10-13T04:12:22.057 回答