Angular JS调用Sinatra不返回数据
Angular JS call to Sinatra not returning data
我正在尝试获取Angular js的部分"下载",以通过Sinatra的JSON从MySQL数据库中获取信息。我已经编写了下面的代码,但它不起作用,我想知道我在 app.rb 中的路由是否错误,或者 Angular 中的控制器是否错误。
如果有人能帮我解决这个问题,那就太棒了,因为我在网上找不到任何相关的教程。非常感谢。
在应用程序.rb 中
get "/#/view1/downloadData" do
#get list of downloads for user
@download = Download.all(:order => [:downloadID], :limit => 20)
if @download
@download.to_json
#log to console if JSON pulled in correctly
puts "get list of downloads successful"
else
halt 404
#log to console if JSON failed
puts "get list of downloads JSON failed 404 displayed"
end
end
在 partials/downloads.html
<p>Manage downloads</p>
<ul ng-controller="MyCtrl1">
<li>ID: {{download.title}}, Name: {{download.downloadID}}</li>
</ul>
在 js/controllers 中.js
//'use strict';
/* Controllers */
angular.module('myApp.controllers', []).
controller('MyCtrl1', [function($scope, $http) {
//a scope function to load the data.
$scope = function () {
$http.get('/#/view1/downloadData').success(function(data) {
$scope.items = data;
console.log(data);
console.log("data got succesfully");
});
};
}])
.controller('MyCtrl2', [function() {
}])
.controller('MyCtrl3', [function() {
}]);
我建议使用JavaScript调试器(如Chrome Developer Tool)来分解问题。问题中的代码有几个不同的问题,没有它很难调试。通过使用JS调试器,您可以判断请求是否正确发出,是否发送到正确的URL,以及您可以查看客户端和sinatra服务器之间传递的数据。
让我们看看所有的问题。
首先,控制器定义的语法错误,调试器将显示TypeError: Cannot set property...
错误。 请参阅关于缩小角度文档的说明。 您需要将行更改为如下所示的内容:
app.controller('MyCtrl1', ['$scope', '$http', function($scope, $http) {
第二个问题是,用于定义作用域函数的行正在破坏作用域。作用域函数需要一个标识符:
$scope.loadData = function () { ... }
定义范围函数并不意味着调用它。 您可以添加如下所示的呼叫:
$scope.loadData();
第三个问题是$http.get
调用正在请求包含#
字符的 url,该字符表示 URL 的片段,它在很大程度上等同于使用参数请求GET /
。没有充分的理由在 #
下定义 JSON API。 我会把它改成/view1/downloadData
. Sinatra应用程序应该有相应的GET处理程序。
第四个问题是部分代码引用$scope.download
,但$http.get
的success
处理程序正在设置$scope.items
。
最后,基于Sinatra代码,它返回一个JSON数组。 呈现代码需要使用ng-repeat
来呈现所有项。
JS代码
var app = angular.module('myApp', []);
app.controller('MyCtrl1', ['$scope', '$http', function($scope, $http) {
// a scope function to load the data
$scope.loadData = function() {
$http.get('/view1/downloadData').success(function(data) {
$scope.items = data;
});
}
$scope.loadData();
}]);
网页代码
<body ng-controller="MyCtrl1">
<ul>
<li ng-repeat="item in items">ID: {{item.title}}, Name: {{item.downloadID}}</li>
</ul>
简化的辛纳屈代码
require 'sinatra'
require 'json'
get '/view1/downloadData' do
# I'm guessing the database is returning something like this:
[{'title' => 'title 1', 'downloadID' => 'ID 1'},
{'title' => 'title 2', 'downloadID' => 'ID 2'}
].to_json
end
- AJAX调用并在Node中获取返回数据
- 角度服务未返回数据
- 统计ajax返回数据中的html元素
- 有没有更好的方法可以测量从Ajax调用返回数据所需的总时间
- Imgur API图像搜索未返回数据
- javascript对象显示为null,但object.properties返回数据
- 如何从ajax调用JQuery返回数据
- 试图从嵌套的回调函数返回数据
- NodeJS FS 不从多个文件返回数据
- ajax函数未在C#中返回数据
- 如何在公共js模块中从web服务返回数据
- 将字符串与 JSON 对象组合以返回数据
- 嵌套异步函数未及时返回数据的问题
- NodeJS JSONStream 以一个长字符串的形式返回数据
- 如何使用 HTML 图像请求将数据发送到服务器,或返回数据作为响应
- 从 Angular 模态服务中的模态主体模板返回数据
- jQuery 每个循环返回数据两次
- $.getJSON 在返回数据后不会运行函数
- 如何访问返回数据中的特定json值
- 工厂返回数据后未设置角度$scope