gpt4 book ai didi

angularjs - 结合玩!带有 Angular.js 的框架 2.xx

转载 作者:行者123 更新时间:2023-12-02 22:04:27 24 4
gpt4 key购买 nike

我遇到的麻烦是这两个看似强大的框架的结合。看来大部分1可以做的事情2都可以做。如何最好地利用两者呢?有什么思维模式吗?举一个 CRUD 应用程序的基本示例——我可以编写一条路由 mysite/listnames 映射到正在运行的 Controller !这将呈现一个带有代码的模板--

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

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

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

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

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

最佳答案

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

  1. Play 2 Controller :

    def getNames = Action {

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

    }
  2. 您的 Play 根目录:

    GET/getNamescontrollers.Application.getNames

  3. AngularJs Controller :

    app.controller('NamesCtrl', function($scope) {
    // get names using AngularJS AJAX API
    $http.get('/getNames').success(function(data){
    $scope.names = data;
    });
    });
  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>

这样你就完全分离了关注点,对于你的客户端来说,服务器端如何实现并不重要,你唯一需要的是有效的 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>

}

您将在 scope 中使用 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?

从我的 Angular 来看,是的,这是两个很棒的框架,并且它们完美地协同工作。

关于angularjs - 结合玩!带有 Angular.js 的框架 2.xx,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21347483/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com