结合玩！带有 Angular.js 的框架 2.xx答案

【问题标题】：Combining Play! Framework 2.xx with Angular.js结合玩！带有 Angular.js 的框架 2.xx
【发布时间】：2014-01-25 06:26:56
【问题描述】：

我遇到的麻烦是这两个看似强大的框架的结合。看来1可以做的大部分事情2都可以做。如何最好地利用两者？有没有什么思维模式？举一个 CRUD 应用程序的基本示例—— 我可以编写一个路由 mysite/listnames 映射到正在播放的控制器！这会渲染一个带有代码的模板--

@(names:List[String])
@main("Welcome") {

@for( name <- names ){ 
    <p> Hello, @name </p>
}

请注意，main 是一个典型的引导模板。但是，如果说我想添加一个输入框来过滤这些名称，或者我想对它们做任何事情，那么现在这个产生的输出似乎对 Angular 没有用。典型的处理方式是什么？基本的东西似乎是-

1) 如何将 Play 渲染模板后到达的数据传递到 Angular 以便以后在客户端使用。

2) 将这两个框架一起用于涉及面向数学对象的后端 + 服务器和前端相当密集的 UI 的大型应用程序是否值得推荐？

【问题讨论】：

请记住，Angular 默认缓存模板，因此提供动态播放内容是没有意义的。

标签： angularjs playframework playframework-2.0

【解决方案1】：

您可以通过多种方式组合这两个框架。一切都取决于您想对他们每个人进行多少参与。例如，您的Play 2 应用程序可能仅从一侧（服务器端）提供 JSON 请求/响应，而 AngularJS 将从客户端生成所有其他内容。考虑您的基本 CRUD 应用示例：

Play 2 控制器：

def getNames = Action {

  val names = List("Bob","Mike","John")
  Ok(Json.toJson(names)).as(JSON)

}

您的 Play 根目录：

GET /getNames controllers.Application.getNames

AngularJs 控制器：

app.controller('NamesCtrl', function($scope) {
    // get names using AngularJS AJAX API  
    $http.get('/getNames').success(function(data){
        $scope.names = data;
    });
});

我们的 HTML：

<!doctype html>
<html ng-app>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js">  </script>
</head>
<body>
    <div>
        <ul>
            <li ng-repeat=" name in names">{{name}}</li>
        </ul>
    </div>
</body>
</html>

这样您就可以完全分离关注点，对于您的客户端，服务器端如何实现并不重要，您只需要有效的 JSON 作为响应。这被认为是一种很好的做法。

当然，您可以从Play 2 渲染大部分HTML，并在需要时使用AngularJS 处理某些特定内容。一切都取决于您为应用选择的概念。

...如何传递渲染模板后到达的数据播放到 Angular 以供以后在客户端使用？

我认为这不是一个好主意，但您当然可以使用 ngInit 指令来做到这一点，如下所示：

@(message:String)
@main("Welcome") {
<div ng-init="angular_message = @message">
<h1>Hello, {{angular_message}} !</h1>
</div>

}

您将在 scope 中使用来自 Play 2 模板的 @message 值初始化 angular_message。

将这两个框架一起使用是否可取？涉及数学面向对象后端的大型应用程序 + 服务器和前端相当密集的 UI？

在我看来，是的，这是两个很棒的框架，它们完美地协同工作。

【讨论】：

您能否详细说明为什么您认为使用ngInit 不是一个好主意？谢谢
是的，你也很好奇为什么 ngInit 不那么受欢迎
也可以参考typesafe.com/activator/template/angular-seed-play（可能你已经开始了）但是对于那些偶然发现这个线程的人。
感谢分享。我还想尝试 PLay（在服务器端）和 AngularJs（在客户端）