Play Framework 2.1 - AngularJS 路由 - 最佳解决方案? [英] Play Framework 2.1 - AngularJS routing - best solution?

问题描述

我正在学习 AngularJS 教程.Angular 使用它自己的 JS 路由机制来支持单页应用程序.Angular 的示例路由文件如下所示:

I am working my way through the AngularJS tutorial. Angular uses it's own JS routing mechanism to allow for single page apps. A sample routing file for Angular looks like this:

angular.module('phonecat', []).
  config(['$routeProvider', function($routeProvider) {
  $routeProvider.
      when('/phones', {templateUrl: '/partials/phone-list',   controller: PhoneListCtrl}).
      when('/phones/:phoneId', {templateUrl: 'partials/phone-detail', controller: PhoneDetailCtrl}).
      otherwise({redirectTo: '/phones'});
}]);

我想找到一个好地方来存储我的部分(Angular 特定的 HTML 文件).理想情况下，我希望能够从 Play 中对它们进行模板化(即，将它们作为 *.scala.html 文件).我可以使用 Play 路由文件来完成此操作，如下所示:

I am trying to come up with a good place to store my partials (Angular specific HTML files). Ideally i WOULD like the ability to template them from within Play (i.e. have them as *.scala.html files). I can accomplish this using a a Play routes file like so:

GET     /partials/phone_index       controllers.Application.phone_index

我基本上偏爱这样的控制器动作:

I basically partials/ to a controller action like this:

def phone_index = Action {
  Ok(views.html.partials.phone_index())
}

我正在寻找的解决方案是两个理想的结合:

The solution I am looking for is a combination of two ideals:

1. 我会有某种映射，让我访问/partial/* 下的任何文件并取回部分文件.
2. 我希望覆盖特定部分的路由，因此我可以使用控制器操作来动态填充数据(很少见).

1. I would have some sort of mapping that lets me visit any file under /partial/* and get back the partial file.
2. I would like the overriding a route to a specific partial so I CAN use a controller action to dynamically fill with data (rare).

有什么想法吗?

推荐答案

当我尝试类似的事情时，我得出的结论是最好将其分为 2 个部分:

When I was trying something similar I came to the conclusion that it's better to break it on 2 parts:

• 使用 Play 作为您通过 Ajax 调用与之交互的后端
• 将 Angular 模板存储在 Play public 文件夹中(类似于 /public/angular/)并使用默认的 AngularJs 方式来映射模板

• Use Play as a backend you interact with via Ajax calls
• Store the Angular templates in Play public folder (something like /public/angular/) and use the default AngularJs way to map the templates

我知道这听起来不太好，也确实没有回答您关于如何操作的问题，但是由于模板及其 url 在 Angular 中的映射方式，尝试链接这两个框架可能会出现问题，而且好处是将非常小，因为任何更改都意味着大量工作，从而消除了 Play 和 Angular 快速开发的主要优势.

I know it doesn't sound great and really doesn't answer your question on how to do it, but trying to link both frameworks may be problematic due to the way templates and their urls are mapped in Angular, and the benefit will be very small as any change will imply a lot of work, thus removing the arguably main benefit of both Play and Angular, rapid development.

这还允许您更好地分离关注点，如果您的项目增长，这可能很重要，因为您可以将 AngularJS 代码作为连接到后端的独立应用程序拿走，它会正常工作.

This also allows you to separate concerns better, which if your project grows may be important as you can just take the AngularJS code away as a standalone app connecting to a backend, and it will work fine.

您可以在这个 Github 存储库中看到我所说的一些示例代码(基于 AngularJS 的 TODO 教程).我警告你，代码不太好，但应该给你一个想法，作为奖励向你展示如何将 Jasmine 集成到 Play 中，用于 AngularJS 单元测试.

You can see some sample code of what I said (based on the TODO tutorial of AngularJS) in this Github repository. I warn you, the code is not too nice, but should give you an idea and as a bonus shows you how to integrate Jasmine into Play, for AngularJS unit testing.

这篇关于Play Framework 2.1 - AngularJS 路由 - 最佳解决方案?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！