Sinatra에 Angular JS 호출이 데이터를 반환하지 않음

-1

Sinatra의 JSON을 통해 MySQL 데이터베이스의 정보를 얻기 위해 Angular j의 부분 '다운로드'를 얻으려고합니다. 아래 코드를 작성했지만 작동하지 않습니다. app.rb의 라우팅이 잘못되었거나 각도가 컨트롤러인지 궁금합니다.Sinatra에 Angular JS 호출이 데이터를 반환하지 않음

이 온라인에서 관련 자습서를 찾을 수 없기 때문에 누군가 내가이 일을 도와 준다면 환상적 일 것입니다. 많은 감사합니다. 파셜에서 app.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

에서

은/downloads.html

JS에서

<p>Manage downloads</p> 
<ul ng-controller="MyCtrl1"> 
    <li>ID: {{download.title}}, Name: {{download.downloadID}}</li> 
</ul>

은/

//'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() { 

}]);

출처

2013-10-28 Phil Hudson

'그것이 실제 오류 설명하지 working' 아니다. 또한 app.rb가 작동하는지 테스트하는 것이 매우 쉽습니다. 이미 호출 결과를 기록한 것입니다. – dirkk

puts는 nil을 반환하므로 API가 데이터를 반환하지 않는 것일 수 있습니다. puts를 반전 해보고 app.rb에서 반환하십시오. – MrRuru

죄송합니다. 작동하지 않는 것이 설명 적이 지 않습니다. 기본적으로 데이터를 반환하지 않으며 오류가 어디에 있는지 잘 모르겠습니다. –

내가 자바 스크립트 디버거 등을 사용하는 것이 좋습니다 controllers.js Chrome 개발자 도구로 문제를 해결할 수 있습니다. 문제의 코드에는 여러 가지 문제가 있으며 디버깅이 필요하지 않습니다. JS 디버거를 사용하면 클라이언트와 sinatra 서버간에 전달되는 데이터를 조사 할 수있을뿐만 아니라 요청이 올바르게 발행되었는지, 올바른 URL로 발행되었는지 여부를 알 수 있습니다.

모든 문제를 살펴 보겠습니다.

먼저 컨트롤러 정의 구문이 잘못되어 디버거에 TypeError: Cannot set property... 오류가 표시됩니다. Note on Minification of Angular Doc을 참조하십시오. 다음과 같이 라인을 변경해야합니다.

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(); 
}]);

HTML 코드

<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

출처

2013-10-28 11:20:32

자세한 답변을 해주셔서 감사 드리며, 지금 당장 돌아가서 답변을 드리겠습니다. –

방금 변경 사항을 구현했지만 지금은 부분적으로 링크가 설정되어 있지 않습니다. index page?이 문제는 app.js 또는 컨트롤러의 route provider 문제라고 생각하십니까? –

$ scope.items가 중단 점을 설정하거나'console.log()'문을 사용하여 데이터를 가져 오는 지 확인할 수 있습니다. '$ scope.items'가 올바르게 채워져 있다면 랜더링 문제가되고, 그렇지 않다면 서버에서 데이터가 되돌아 오는 지 확인하십시오 .. –

Sinatra에 Angular JS 호출이 데이터를 반환하지 않음

답변

관련 문제