结合玩！框架 2.xx 与 Angular.js [英] Combining Play! Framework 2.xx with Angular.js

查看：13
本文介绍了结合玩！框架 2.xx 与 Angular.js的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我遇到的问题是这两个看似强大的框架的结合.似乎大多数1可以做的事情2可以做.如何最好地利用两者?有什么思维模式吗?举一个 CRUD 应用程序的基本示例——我可以写一个路由 mysite/listnames 映射到一个控制器！这将使用代码呈现模板 --

@(names:List[String])@main("欢迎") {@for( 姓名 <- 姓名 ){<p>你好，@name </p>}

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

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

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

解决方案

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

  1. Play 2 控制器:

    def getNames = Action {val names = List("Bob","Mike","John")好的(Json.toJson(names)).as(JSON)}

  2. 您的 Play 根目录:

    GET/getNames controller.Application.getNames

  3. 一个 AngularJs 控制器:

    app.controller('NamesCtrl', function($scope) {//使用 AngularJS AJAX API 获取名称$http.get('/getNames').success(function(data){$scope.names = 数据；});});

  4. 我们的 HTML :

    <头><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"><身体><div><ul><li ng-repeat="name in names">{{name}}</li>

通过这种方式，您可以完全分离关注点，对于您的客户端，服务器端的实现方式无关紧要，您只需要有效的 JSON 作为响应.这被认为是一种很好的做法.

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

<块引用>

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

我认为这不是一个好主意，但您肯定可以使用这样的 ngInit 指令来做到这一点:

@(message:String)@main("欢迎") {<div ng-init="angular_message = @message"><h1>你好，{{angular_message}}！</h1>

}

并且您将使用 Play 2 模板中的 @message 值初始化 scope 中的 angular_message.

<块引用>

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

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

I am having trouble is this marriage of 2 seemingly powerful frameworks. It seems most things that can be done by 1 can be done by 2.How to best utilize the two? Are there any patterns of thinking? Take a basic example of a CRUD application -- I can write a route mysite/listnames which maps to a controller in play! and this renders a template with the code --

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

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

Note that main is a typical bootstrapping template. However now the output this produces seems to be of no use to Angular if say i want to add a input box for filtering these names, or i want to do anything with them at all. What is a typical way of proceeding? The base thing seems to be-

1) how to pass on data that arrives after rendering the template by Play to angular for later use at clientside.

2) Is it adviseable at all to use these two frameworks together for a large-level app involving a mathematical object oriented backend + server, and a fairly intensive UI at frontend?

解决方案

There are many ways you can combine this two frameworks. All depends on how much you want to envolve each of them. For example your Play 2 application may only serve JSON request/respons from the one side(server side) and AngularJS would make all the other stuff from the client side. Considering your example for basic CRUD app :

  1. A Play 2 controller: 

    def getNames = Action {

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

}

  2. Your Play root for it:

    GET /getNames controllers.Application.getNames

  3. an AngularJs controller:

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

  4. Our 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>

This way you completely separate the concerns, for your client side, it doesn't matter how the server side is implemented, only thing you need is valid JSON as a response. It's considered to be a good practice.

But of course you can render most of your HTML from Play 2 and use AngularJS for some specific stuff where needed. All depends what conception you choose for your app.

...how to pass on data that arrives after rendering the template by Play to angular for later use at clientside?

I don't think that it's a good idea, but you surely may do it using ngInit directive like this:

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

}

and you will have angular_message in the scope initialised with @message value from Play 2 template.

Is it adviseable at all to use these two frameworks together for a large-level app involving a mathematical object oriented backend + server, and a fairly intensive UI at frontend?

From my point of view, yes, it's two great frameworks and they perfectly work in concert.

这篇关于结合玩！框架 2.xx 与 Angular.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆