Angular.js并显示Rest JSON

I'm a newbie to Angular and I'm doing some prototyping. Unfortunately when I call a REST service I'm having issues displaying the data. The console is not providing clues because no errors come back.

我是Angular的新手,我正在做一些原型设计。不幸的是,当我调用REST服务时,我遇到了显示数据的问题。控制台没有提供线索,因为没有错误返回。

HTML is below:

HTML如下:

<!doctype html>
<html ng-app="statViewer">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Test Angular Page</title>

    <script  src="js/angular.min.js" type="text/javascript"></script>
    <script  src="js/statViewer.js" type="text/javascript"></script>

</head>
<body ng-controller="MainController">

    <h1> {{title}} </h1>
<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Total</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="stat in stats">
            <td>{{stat.MessageName}}</td>
            <td>{{stat.TypeCount}}</td>
        </tr>
    </tbody>
</table>


</body>
</html>

JS is below:

JS如下:

(function() {

    var app = angular.module("statViewer", []);

    var MainController = function($scope, $http) {

        $scope.title = "Angular test page";

        $http.get("http://localhost:8080/API/getstats.json")
            .then(onStatsComplete);

        var onStatsComplete = function(response)
        {
            $scope.stats = response.data;
        };


    };

    app.controller("MainController", MainController);

}());

I see that the service is being called because on the console window it prints out that the call was triggered. Result of the REST API being invoked is here:

我看到正在调用该服务,因为在控制台窗口中它打印出调用已被触发。调用REST API的结果如下:

[
    {
        "TypeCount": 45,
        "SentDate": "2014-08-20T00:00:00.000Z",
        "MessageName": "Message Type 1"
    }
]

2 个解决方案

#1

You are defining the variable onStatsComplete with your callback function after the call to $http.get. So at the point in time when you are making the call to $http.get the value undefined is passed to then rather than your callback function. Swap the lines around like this:

在调用$ http.get之后,使用回调函数定义变量onStatsComplete。因此,在您调用$ http.get的时候,将undefined值传递给当时而不是您的回调函数。像这样交换线条:

    var onStatsComplete = function(response)
    {
        $scope.stats = response.data;
    };

    $http.get("http://localhost:8080/API/getstats.json")
        .then(onStatsComplete);

See also this question on the difference between writing var y = function(){...} and function y(){...}.

另见这个问题,关于写var y = function(){...}和函数y(){...}之间的区别。

#2

To give more insight, when ever you do $http.get call.

为了提供更多的洞察力,你何时进行$ http.get调用。

Every $http call is Aysncronous in angularJs.

每个$ http调用都是angularJs中的Aysncronous。

   $http.get("http://localhost:8080/API/getstats.json")
            .then(function(result){   
console.log(result.TypeCount);
               });

Let me know if you still unable to get the data.

如果您仍然无法获取数据,请告诉我们。

#1