-1

Sinatra から JSON を介して MySQL データベースから情報を取得するために、Angular js の部分的な「ダウンロード」を取得しようとしています。以下のコードを書きましたが、うまくいきません。app.rb のルーティングが間違っているのか、Angular のコントローラーが間違っているのでしょうか。

このオンラインで関連するチュートリアルを見つけることができなかったので、誰かが私がこれを解決するのを手伝ってくれるなら、それは素晴らしいことです. どうもありがとう。

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

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

 }]);
4

1 に答える 1

1

問題を解決するには、Chrome Developer Tool などの JavaScript デバッガーを使用することをお勧めします。問題のコードにはいくつかの異なる問題があり、それなしでデバッグするのは困難です。JS デバッガーを使用すると、リクエストが正しく発行されたかどうか、正しい URL に発行されたかどうか、およびクライアントと sinatra サーバー間で渡されるデータを調べることができます。

すべての問題を見てみましょう。

まず、コントローラーの定義の構文が間違っていて、デバッガーがTypeError: Cannot set property...エラーを表示します。Angular Doc の縮小に関する注意を参照してください。この行を次のように変更する必要があります。

app.controller('MyCtrl1', ['$scope', '$http', function($scope, $http) {

2 番目の問題は、スコープ関数を定義するための行がスコープを破棄していることです。スコープ関数には識別子が必要です。

$scope.loadData = function () { ... }

スコープ関数を定義しても、それが呼び出されるわけではありません。以下のように呼び出しを追加できます。

$scope.loadData();

3 番目の問題は、呼び出しが、URL のフラグメントを示す文字$http.getを含む URL を要求していることです。これは、パラメーターを使用した要求とほぼ同等です。で JSON API を定義する正当な理由はありません。私はそれをに変更します。Sinatra アプリには、対応する GET ハンドラーが必要です。#GET /#/view1/downloadData

4 番目の問題は、部分的なコードが参照されているが、ハンドラー$scope.downloadが設定されていることです。$http.getsuccess$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>

簡素化された Sinatra コード

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-28T11:20:32.600 に答える