Угловой клиент REST ngResource не может получить json

Question

У меня есть простой сервер RESTful с Flask, и мне нравится делать простой клиент с AngularJS, используя ngResource. Идея состоит в том, чтобы сделать 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 } 

Почему? Что я делаю неправильно? Благодаря!

РЕДАКТИРОВАТЬ:

Это сырье ответ, который I получения от сервера.

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

EDIT 2: Решение

Проблема заключается в сервере. Просто добавьте на сервер Flask-CORS и работайте!

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

Решение от this question

Answer 1

Whwn подключения к 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 
    }); 
} 

Answer 2

Вы должны решить обещание вы создали с 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 3

Попробуйте следующее:

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 не будет возвращать данные немедленно. Вместо этого он возвращает объект обещания, который в конечном итоге получит ваши данные после завершения HTTP-запроса (обратите внимание, что сообщение консоли resolved: false).

Подробнее:

Promises in AngularJS, Explained as a Cartoon

Answer 4

Похоже, что у вас есть обещание там.

Не назначайте возвращаемое значение функции, вы должны ждать, пока обещание разрешает или отклоняет

Попробуйте

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