结合玩！带有Angular.js的Framework 2.xx [英] Combining Play! Framework 2.xx with Angular.js
问题描述
我遇到的麻烦是这两个看似强大的框架的结合.似乎大多数事情可以由1完成，也可以由2完成.如何最好地利用两者?有什么思维方式吗? 以一个CRUD应用程序的基本示例为例- 我可以写一条路线mysite/listnames映射到正在运行的控制器！这将呈现一个带有代码的模板-
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>
}
请注意，main是典型的引导模板. 但是，如果说我想添加一个用于过滤这些名称的输入框，或者我想对它们做任何事情，那么现在生成的输出对于Angular似乎毫无用处. 典型的进行方式是什么? 基本的东西似乎是-
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)如何将通过Play渲染模板后到达的数据传递给有角度的数据，以供以后在客户端使用.
1) how to pass on data that arrives after rendering the template by Play to angular for later use at clientside.
2)是否建议将这两个框架一起用于涉及数学对象的后端+服务器以及前端相当密集的UI的大型应用程序?
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?
推荐答案
有很多方法可以组合这两个框架.一切都取决于您希望每个人参与其中的多少.例如，您的Play 2应用程序只能从一侧(服务器端)提供JSON请求/响应，而AngularJS将从客户端提供所有其他内容.考虑您的基本CRUD应用示例:
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 :
-
播放2控制器:
A Play 2 controller:
def getNames = Action {
val names = List("Bob","Mike","John")
Ok(Json.toJson(names)).as(JSON)
}
您的播放根源:
Your Play root for it:
GET /getNames controllers.Application.getNames
一个AngularJs控制器:
an AngularJs controller:
app.controller('NamesCtrl', function($scope) {
// get names using AngularJS AJAX API
$http.get('/getNames').success(function(data){
$scope.names = data;
});
});
我们的HTML:
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>
通过这种方式，您可以完全分离关注点，对于客户端而言，服务器端的实现方式无关紧要，只需要有效的JSON作为响应即可.这被认为是一个好习惯.
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.
但是，当然，您可以从Play 2呈现大多数HTML，并在需要的地方使用AngularJS表示某些特定内容.一切都取决于您为应用选择哪种概念.
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?
我认为这不是一个好主意，但是您可以肯定地使用ngInit指令来做到这一点，例如:
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>
}
，您将在scope中使用Play 2模板中的@message值初始化angular_message.
and you will have angular_message in the scope initialised with @message value from Play 2 template.
是否建议将这两个框架一起用于 大型应用，涉及面向对象的数学后端+ 服务器，以及前端的密集UI?
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.
这篇关于结合玩！带有Angular.js的Framework 2.xx的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
