在页面上使用JSON渲染Play Framework + Angular Issue

Question

我有简单的Scala Play Framework和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)

  }

当我使用网址调用我的网页时

  

http://localhost:9000/getNames

我在页面上收到如下回复，

  

[ “鲍勃”， “迈克”， “约翰”]

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

谢谢！

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（我猜错了）

结果是您所期望的：