Angular REST客戶端ngResource無法獲取json

Question

我有一個簡單的帶有Flask RESTful服務器，我想使用ngResource用AngularJS創建一個簡單的客戶端。 這個想法是對服務器進行GET，並獲取一個json文件。

這是我的services.js

var IpZapServices = angular.module('IpZapServices', ['ngResource']);
IpZapServices.factory('Plug', ['$resource', function($resource) {
    return $resource('http://localhost:8003/api/plugs/:id',
             {id : "@id"}, {
                 query: {method: 'GET', params: {}, isArray: false}
           });
}]);

還有controllers.js

var IpZapControllers = angular.module('IpZapControllers', []);
IpZapControllers.controller('PlugListCtrl', ['$scope', 'Plug', function($scope, Plug) {
    $scope.plugs = Plug.query();
    console.log($scope.plugs);
}]);

但是，我沒有得到json文件，得到這個：

Object { $promise: Object, $resolved: false }

為什么？ 我怎么了 謝謝！

編輯：

這是我從服務器收到的原始響應。

{"plugs": [
    {"alarm": [],
     "id": 0,
     "name": "Plug 0",
     "state": false},
    .
    .
    .
    {"alarm": [],
     "id": 3,
     "name": "Plug 3",
     "state": false}
]}

編輯2：解決方案

問題出在服務器上。 只需將Flask-CORS添加到服務器即可工作！

from flask.ext.cors import CORS
app = Flask(__name__)
cors = CORS(app, resources={r"/api/*": {"origins": "*"}})

解決方案是從這個問題

Answer 1

您需要解決通過Plug.query()創建的承諾

嘗試這個：

Plug.query().$promise.then(function (response) {
     console.log(response)
     $scope.plugs = response;
});

有關更多信息，請參見angularjs.org上的文檔：

https://docs.angularjs.org/api/ngResource/service/$resource

Answer 2

嘗試這個：

var IpZapControllers = angular.module('IpZapControllers', []);
IpZapControllers.controller('PlugListCtrl', ['$scope', 'Plug', function($scope, Plug) {
  $scope.plugs = Plug.query();
  $scope.plugs.$promise.then(function (result) {
      console.log(result);
      $scope.plugs = result;
  });
}]);

說明：

您的query不會立即返回數據。 相反，它返回一個Promise對象，一旦HTTP請求完成，該對象最終將獲取您的數據（請注意，控制台消息已resolved: false ）。

閱讀更多：

AngularJS中的承諾，作為卡通解釋

Answer 3

看來您在那里有個承諾。

不要分配函數的返回值，您需要等到promise解決或拒絕為止

嘗試

Plug.query().$promise
    .then(function (response) {
         // success code here
     }) 
    .catch(function (err) {})

Answer 4

從控制器連接到webapi時，請使用方法調用中的成功和錯誤承諾。

Ctrl.$inject = ["$scope", "Service"];
function Ctrl($scope, Service) {

    Service.getJson().success(function (data) {
        $scope.json = data;
    })
    .error(function (data) {
        // data should show the error
    });
}