玩框架2.1 - AngularJS路由 - 最好的解决办法？(Play Framework 2

我通过AngularJS教程工作我的方式。角使用它自己的JS路由机制来实现单页的应用程序。对角的样本路由文件看起来是这样的：

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'});
}]);

我试图想出一个好地方来存储我的谐音（角特定的HTML文件）。理想情况下，我想从游戏中模板它们的能力（即有他们为* .scala.html文件）。我能做到这一点使用AA播放routes文件，如下所示：

GET     /partials/phone_index       controllers.Application.phone_index

我基本上是谐音/像这样一个控制器的动作：

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

我要寻找的解决方案是两种理想的组合：

我想有某种映射，可以让我参观下/分的任何文件/ *和找回部分文件。
我想的路线的重写到一个特定的部分，所以我可以使用一个控制器的动作与数据（罕见）动态地继续进行。

有任何想法吗？

Answer 1:

当我尝试类似的东西我来，这是更好地打破它在两个部分的结论：

使用发挥你通过Ajax调用交互的后端
存储在播放该角模板public文件夹（类似于/public/angular/ ），并使用默认AngularJs方式向模板映射

我知道这听起来并不大，真的不回答你关于如何做到这一点的问题，而是试图以两个框架链接可能是有问题的，由于道路模板及其网址角映射，效益将是非常小如的任何变化将意味着大量的工作，从而消除两者播放和角度，快速发展的争论主要好处。

这也可以让你分离关注更好，而如果你的项目的增长可能是重要的，因为你可以把AngularJS码远作为一个独立的应用程序连接到后端，它会正常工作。

你可以看到我所说的这个一些示例代码（基于AngularJS的TODO教程） Github上库。我警告你，代码是不是太漂亮，但应该给你一个想法，作为奖金向您展示如何茉莉花融入游戏，为AngularJS单元测试。

Answer 2:

最终的种子（ https://github.com/angyjoe/eventual ）是另一种方式来建立一个播放+ AngularJS应用。该代码是他的恋人和良好的记录。

Answer 3:

这不会直接回答你的问题，但我发现这是建立播放+角应用程序的最佳方式：

https://github.com/typesafehub/angular-seed-play

Answer 4:

是的，它可以创建的客户端模板服务器端元的模板。这提供了一些独特的能力，因为这两个方法不完全重叠。还有足够的空间，混乱所以要确保你知道为什么你写一个播放块而不是角指令。

无论你是否应该这样做仍然是一个悬而未决的问题; 这真的取决于你是否真的需要访问服务器的信息在您的模板。在那里我觉得这是必要和适当的将是你的意见实施访问控制的一个例子。

现在回答你的问题。问题是由内联谐音，而不是试图提供的路线为他们按需加载解决。见http://docs.angularjs.org/api/ng.directive:script 。

这里是模板的样子：

@(id: Long)(implicit request: RequestWithUser[AnyContent])

@import helper._

<!doctype html>
<html lang="en" ng-app="phonecat">
<head>
  <meta charset="utf-8">
  <title>Google Phone Gallery</title>
  <link rel="stylesheet" href="css/app.css">
  <link rel="stylesheet" href="css/bootstrap.css">
  <script src="lib/angular/angular.js"></script>
  <script src="js/app.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/filters.js"></script>
  <script src="js/services.js"></script>
  <script src="lib/angular/angular-resource.js"></script>
</head>
<body>
  <div ng-view></div>

  @ngTemplate("phone-list.html") {
    <div class="container-fluid">
      <div class="row-fluid">
        <div class="span12">Hello @request.user.name</div>
      </div>

      <div class="row-fluid">
        <div class="span2">
          <!--Sidebar content-->

          Search: <input ng-model="query">
          Sort by:
          <select ng-model="orderProp">
            <option value="name">Alphabetical</option>
            <option value="age">Newest</option>
          </select>

        </div>
        <div class="span10">
          <!--Body content-->

          <ul class="phones">
            <li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail">
              <a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
              <a href="#/phones/{{phone.id}}">{{phone.name}}</a>
              <p>{{phone.snippet}}</p>
            </li>
          </ul>

        </div>
      </div>
    </div>
  }

  @ngTemplate("phone-detail.html") {
    <img ng-src="{{mainImageUrl}}" class="phone">

    <h1>{{phone.name}}</h1>

    <p>{{phone.description}}</p>

    <ul class="phone-thumbs">
      <li ng-repeat="img in phone.images">
        <img ng-src="{{img}}" ng-click="setImage(img)">
      </li>
    </ul>

    <ul class="specs">
      <li>
        <span>Availability and Networks</span>
        <dl>
          <dt>Availability</dt>
          <dd ng-repeat="availability in phone.availability">{{availability}}</dd>
        </dl>
      </li>
    </ul>
  }
</body>
</html>

和应用程序：

'use strict';

/* App Module */

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

只是包含这个帮手：

@**
 * @ngTemplate
 * Generate an AngularJS inlined template.
 *
 * Note: Do not include scripts in your @template HTML. This will break the template.
 *
 * @param name
 * @param template
 *@
@(name: String)(template: Html)

<script type="text/ng-template" id="@name">@template</script>

并确保您的角度应用程序的根目录范围内使用它。

Answer 5:

对于问题1，你可以介绍这样的路线：

/partials/:view    controllers.Application.showView(view:String)

然后在你的控制器，你需要从视图名称到实际查看地图：

Map("phone_index" -> views.html.partials.phone_index())

你可能想使模板懒惰或需要请求存在，那么你或许应该做这样的事情：

val routes = Map(
  "phone_index" -> { implicit r:RequestHeader => 
     views.html.partials.phone_index()) 
  }

你的行动将是这个样子：

def showView(view:String) = 
  Action { implicit r =>
    routes(view)
  }

如果你想为某条路具体的控制器方法（问题2）你简单的添加动态一个以上的路线：

/partials/specific    controllers.Application.specific()

Answer 6:

我真的觉得这不是一个很好的主意，即使它来自一个恭敬心确实如此。

我认为这是一个非常好的做法，留下每一个觉得作为违约（优于配置原则约定），这意味着对我说，我们可能已经更多的利益，以保持分离为一个或两个能在不久的演变或每个范式（播放和AngularJS）遥远的未来，这将有它的代码维护成本。

第二个很重要的一点是可测试性，如果混合使用，你会用混合最终都TECHNOS拿出的在应用程序的两侧检验真正的好报道。干杯

Answer 7:

这可能不是回答这个问题正好，但你可以尝试跟进这个项目，因为它似乎很好的例子建立播放/斯卡拉/角应用：

https://github.com/lashford/modern-web-template#master

http://typesafe.com/activator/template/modern-web-template

文章来源: Play Framework 2.1 - AngularJS routing - best solution?