在页面上播放 JSON 渲染的框架 + Angular 问题答案

【问题标题】：Play Framework + Angular Issue with JSON render on Page在页面上播放 JSON 渲染的框架 + Angular 问题
【发布时间】：2016-04-20 11:37:58
【问题描述】：

我有简单的 Scala Play 框架和 Angular 应用程序。我试图在 play 的“xxx.scala.html”模板上渲染 JSON 数据，但不知道它没有渲染为 expeted 的问题是什么。

@main("Welcome to Play") {

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js">  </script>
<script>

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

</script>

<div ng-app="app" ng-contoller="NamesCtrl">
    <ul>
        <li ng-repeat=" name in names">{{name}}</li>
    </ul>
</div>

}

我的路线条目

GET  /getNames controllers.HomeController.getNames

Scala 控制器：

def getNames = Action {

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

  }

当我使用 url 调用我的页面时

http://localhost:9000/getNames

我在下面的页面上得到了响应，

["鲍勃","迈克","约翰"]

请你解释一下我在这里做错了什么？

谢谢！！

【问题讨论】：

["Bob","Mike","John"] 是此类列表的预期 JSON。如果您期望其他内容，则需要自定义 Writes。
可能是.as("application/json")？或者只是不使用as()
@MipH 我尝试了您在评论中提到的所有可能方式，但没有按预期工作。
你说的没有渲染是什么意思？它是渲染不正确的东西还是什么都没有？来自 Angular 的 AJAX 请求是否通过路由器？
尝试删除.as(JSON)

标签： angularjs scala playframework playframework-2.3

【解决方案1】：

代码中存在一些问题。 正确的是这样的：

@main("Welcome to Play") {

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.19/angular.min.js"></script>

<div ng-app="myApp" ng-controller="NamesCtrl">
    <ul>
        <li ng-repeat="name in names">{{name}}</li>
    </ul>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('NamesCtrl', function($scope, $http) {
    $http.get('/getNames').success(function(data){
        console.log(data);
        $scope.names = data;
    });
});
</script> 

}

发生了什么变化：

AngularJS 1.3.19 而不是 1.2.10
AngularJS 模块 - 在 div 中引用
在控制器中注入$http服务
您的 ng 错误 - 应该是 ng-controller 而不是 ng-contoller（我猜是错字）

结果如你所愿：

【讨论】：

我认为它正在工作。我在我的代码中做错了什么。谢谢你:)
很高兴我能帮上忙 :)