使用 Play 2.1 作为后端来构建 AngularJS 客户端代码的好方法答案

【问题标题】：A good way to structure AngularJS client code with Play 2.1 as backend使用 Play 2.1 作为后端来构建 AngularJS 客户端代码的好方法
【发布时间】：2013-09-18 05:54:22
【问题描述】：

我拥有一个 Play 2.1 应用程序。

最初，我使用 Play 2.1 中的默认模板机制，直到我 .. 学习了 AngularJS。

现在，我显然希望我的客户端是一个 AngularJS 应用程序。

但是，在网上冲浪时，我发现没有明确的方法来实现它：

让 Play 表现为一个简单的 RESTful 应用程序（删除 view 文件夹）并创建一个完全不同的项目来构建视图（由 grunt.js 初始化的 AngularJS 应用程序）。
优点：可能不那么混乱，前端和后端团队可以轻松地分开工作。缺点：AngularJS 应用需要另一个 HTTP 服务器。
尝试将 AngularJS 应用程序与传统 Play 的工作流程完全集成。
缺点：对于像AngularJS这样相当复杂的框架，它会导致模板管理混乱例如：scala.html（用于Play）/tpl.html（用于Angular）... =>混乱。
在 play 项目中创建一个自定义文件夹，但与 Play 脚手架创建的初始文件夹不同。例如，我们将其称为myangularview，而不是传统的view。然后，将 grunt.js 生成的静态内容发布到 Play 的 public 文件夹中，以便通过 Play 的路由从浏览器访问。
优点：组件之间的 SRP 仍然相当尊重，不需要像 1 中那样为客户端使用另一个轻量级 HTTP 服务器。

我指出了我自己对优缺点的看法。

什么是实现 Play 与 Angular 结合的好方法？

【问题讨论】：

标签： rest angularjs architecture playframework-2.0 playframework-2.1

【解决方案1】：

是的，我正在回答我自己的问题:)

我遇到了这种做法： http://jeff.konowit.ch/posts/yeoman-rails-angular/

导轨？？无论框架是什么，需求都是一样的。

它提倡真正分离 API（后端）和前端（在这种情况下对后端服务器进行 AJAX 调用）。

因此，我学到的是：

在开发阶段，开发人员将使用两个服务器：两个不同端口上的 localhost。
在生产阶段，前端元素将被包含到整个后端（本文将处理一种public 文件夹，旨在提供静态内容：HTML、角度模板（例如）、CSS 等... 优势？=> 处理一个独特的服务服务器的 API 展示以及 UI 的静态资产。

有了这个组织，像 Yeoman 这样的工具可以为开发人员带来一些非常棒的方便的东西，例如：livereload 功能。 :):)

当然，在开发阶段，我们最终会得到两个不同的域（例如 localhost:3000 和 localhost:9000），这会导致传统 ajax 请求出现问题。然后，正如文章所指出的，代理可能真的很有用。

我真的觉得整个练习非常优雅和愉快。

【讨论】：

Live reload 被带到了 Play！由 James Ward 使用此插件 github.com/jamesward/play-auto-refresh 与它的 chrome 插件伴侣一起使用。
是的，这将是一个不错的解决方案。就个人而言，我更喜欢期望 Play 框架与复杂的客户端无关，例如 angularjs 应用程序。
正在寻找类似的东西。我认为这是要走的路！ THX

【解决方案2】：

几天前在 play mailinglist 上有一个关于前端堆栈/解决方案的有趣讨论，可能对你有用，似乎很多人使用 angular：https://groups.google.com/forum/#!searchin/play-framework/frontend/play-framework/IKdOowvRH0s/tQsD9zp--5oJ

【讨论】：

感谢这个链接 :)