结合游戏!带有Angular.js的Framework 2.xx

new*_*mer 27 playframework playframework-2.0 angularjs

我遇到麻烦的是这两个看似强大的框架的结合.似乎大多数可以通过1完成的事情可以通过2.如何最好地利用这两个?有没有任何思维模式?拿一个CRUD应用程序的基本示例 - 我可以写一个路由mysite/listnames,它映射到一个正在运行的控制器!这将呈现一个带有代码的模板 -

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

@for( name <- names ){ 
    <p> Hello, @name </p>
}
Run Code Online (Sandbox Code Playgroud)

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

1)如何传递在通过Play渲染模板后到达的数据到角度以供以后在客户端使用.

2)是否建议将这两个框架一起用于涉及面向数学对象的后端+服务器的大型应用程序,以及前端相当密集的UI?

aru*_*nov 45

有很多方法可以将这两个框架结合起来.一切都取决于你想要对每个人进行多少考虑.例如,您的Play 2应用程序可能只从一方(服务器端)提供JSON请求/响应,而AngularJS将从客户端提供所有其他内容.考虑您的基本CRUD应用程序的示例:

  1. Play 2控制器:

    def getNames = Action {
    
      val names = List("Bob","Mike","John")
      Ok(Json.toJson(names)).as(JSON)
    
    }
    
    Run Code Online (Sandbox Code Playgroud)
  2. 你的播放根目录:

    GET /getNames controllers.Application.getNames

  3. 一个AngularJs控制器:

    app.controller('NamesCtrl', function($scope) {
        // get names using AngularJS AJAX API  
        $http.get('/getNames').success(function(data){
            $scope.names = data;
        });
    });
    
    Run Code Online (Sandbox Code Playgroud)
  4. 我们的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>
    
    Run Code Online (Sandbox Code Playgroud)

这样你就可以完全区分问题,对于你的客户端来说,服务器端的实现方式并不重要,只需要有效的JSON作为响应.这被认为是一种很好的做法.

但是,当然您可以渲染大部分HTML,Play 2AngularJS在需要时使用某些特定内容.一切都取决于您为应用选择的概念.

...如何传递在通过Play渲染模板后到达的数据,以便以后在客户端使用?

我不认为这是一个好主意,但你肯定可以使用这样的ngInit指令:

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

}
Run Code Online (Sandbox Code Playgroud)

你将不得不angular_messagescope初始化的与@message从价值Play 2的模板.

是否建议将这两个框架一起用于涉及面向数学对象的后端+服务器的大型应用程序,以及前端相当密集的UI?

从我的角度来看,是的,它是两个伟大的框架,它们完美地协同工作.

  • 另请参阅https://typesafe.com/activator/template/angular-seed-play(可能您已经开始),但对于偶然发现此线程的其他人. (2认同)