Play Framework + Angular 问题 JSON 在页面上呈现

Question

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

@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"]

你能解释一下我做错了什么吗？

谢谢！！

Answer 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（我猜是打字错误）

结果如您所愿：

Play Framework + Angular 问题 JSON 在页面上呈现

Play Framework + Angular Issue with JSON render on Page

scala

playframework

angularjs

playframework-2.3