angularjs – 结合玩！框架2.xx与Angular.js

发布时间：2020-12-17 08:29:43 所属栏目：安全来源：网络整理

导读：我有麻烦的是这个婚姻的2个似乎强大的框架。看起来大多数事情都可以通过1来完成2.如何最好地利用两个？有什么思维模式吗？以CRUD应用程序的一个基本示例为例 – 我可以写一个路由mysite / listnames映射到控制器在play！这将呈现一个带有代码的模板 – @(na

我有麻烦的是这个婚姻的2个似乎强大的框架。看起来大多数事情都可以通过1来完成2.如何最好地利用两个？有什么思维模式吗？
以CRUD应用程序的一个基本示例为例 –
我可以写一个路由mysite / listnames映射到控制器在play！这将呈现一个带有代码的模板 –

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

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

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

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

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

有很多方法可以组合这两个框架。所有这一切都取决于你想要包含多少。例如，您的Play 2应用程序可能只从一侧(服务器端)提供JSON请求/响应，AngularJS将从客户端做所有其他的东西。考虑您的基本CRUD应用程序的示例：

> A Play 2控制器：

def getNames = Action {

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

}

>你的播放根为它：

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。所有取决于你为你的应用程序选择的概念。

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

我不认为这是一个好主意，但你肯定可以使用ngInit指令，像这样：

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

}

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

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?

从我的角度来看，是的，它是两个伟大的框架，他们完美的工作在一起。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!