[英]Angular REST client ngResource can't get json
I have simple RESTful server with Flask
and I like to make a simple client with AngularJS
using ngResource
. 我有一个简单的带有Flask
RESTful服务器,我想使用ngResource
用AngularJS
创建一个简单的客户端。 The idea is make a GET to the server, and obtain a json file. 这个想法是对服务器进行GET,并获取一个json文件。
This is my services.js
这是我的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}
});
}]);
And the controllers.js
还有controllers.js
var IpZapControllers = angular.module('IpZapControllers', []);
IpZapControllers.controller('PlugListCtrl', ['$scope', 'Plug', function($scope, Plug) {
$scope.plugs = Plug.query();
console.log($scope.plugs);
}]);
But, I don't get the json file, get this: 但是,我没有得到json文件,得到这个:
Object { $promise: Object, $resolved: false }
Why? 为什么? What's I do wrong? 我怎么了 Thanks! 谢谢!
EDIT: 编辑:
This is the raw response that I receipt from the server. 这是我从服务器收到的原始响应。
{"plugs": [
{"alarm": [],
"id": 0,
"name": "Plug 0",
"state": false},
.
.
.
{"alarm": [],
"id": 3,
"name": "Plug 3",
"state": false}
]}
EDIT 2: Solution 编辑2:解决方案
The problem is in the server. 问题出在服务器上。 Simply add to the server Flask-CORS and work! 只需将Flask-CORS添加到服务器即可工作!
from flask.ext.cors import CORS
app = Flask(__name__)
cors = CORS(app, resources={r"/api/*": {"origins": "*"}})
The solution is from this question 解决方案是从这个问题
You need to resolve the promise you have created with Plug.query()
您需要解决通过Plug.query()
创建的承诺
Try this: 尝试这个:
Plug.query().$promise.then(function (response) {
console.log(response)
$scope.plugs = response;
});
More information on this can be found in the docs on angularjs.org: 有关更多信息,请参见angularjs.org上的文档:
https://docs.angularjs.org/api/ngResource/service/$resource https://docs.angularjs.org/api/ngResource/service/$resource
Try this: 尝试这个:
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;
});
}]);
Explanation: 说明:
Your call to query
will not return the data immediately. 您的query
不会立即返回数据。 It instead returns a promise object that will eventually get your data once the HTTP request is complete (notice that the console message said resolved: false
). 相反,它返回一个Promise对象,一旦HTTP请求完成,该对象最终将获取您的数据(请注意,控制台消息已resolved: false
)。
Read More: 阅读更多:
Promises in AngularJS, Explained as a Cartoon AngularJS中的承诺,作为卡通解释
It seems that you have a promise there. 看来您在那里有个承诺。
Don't assign the return value of the function, you need to wait till the promise resolves or rejects 不要分配函数的返回值,您需要等到promise解决或拒绝为止
Try 尝试
Plug.query().$promise
.then(function (response) {
// success code here
})
.catch(function (err) {})
Whwn connecting to a webapi from the controller, use the success and error promise from the method call. 从控制器连接到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
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.