0

非常に単純な角度ルートを実装しようとしています。最初は 1 つのページのみで、作業が完了すると構築されます。

基本的に、index.html ページにデータを直接表示すると、次のように目的の結果 (トリプルの数) が生成されます。

Your data looks like this ...
Count of data "records" or "triples": 4585

クエリ、工場など自体は問題ないことを知っています。

その後、ビューとルートを介して実装しようとすると、データが表示されません。これが私のコードです。

index.html のように:

<!DOCTYPE html>
<head>
    <title>Summarisation Min.</title>
    <link href="css/main.css" rel="stylesheet"/>
    <script src=     "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.2.28/angular-route.min.js">    </script>
</head>

<html>
<h1>Your data looks like this ...</h1>

<body>

<div ng-app="summaryApp">
 <div  ng-controller="topSummaryCtrl">
 <div ng-view></div>

  </div> <!-- end topSummaryCtrl controller --> 
</div> <!-- end summarryApp module -->

<script src="js/app.js"></script>
<script src="js/controllers/TopSummaryController.js"></script>
</body>
</html>

コントローラ js は次のようになります。

app.controller('topSummaryCtrl', function($scope, itemSummary){

    itemSummary.success(function(response) { 
        $scope.itemSummaryResults = response.results.bindings;
    });

});

app.factory('itemSummary', function($http){
   /* 1 count of data triples */
   var query = encodeURIComponent('SELECT (COUNT(*) AS ?no) { ?s ?p ?o  }');
   var endpoint = "http://localhost:3030/dataset/query";
   return $http.get("http://localhost:3030/dataset/query?    query="+query+"&output=json&stylesheet=")
});

app js は次のようになります。

var app = angular.module('summaryApp',['ngRoute']);
app.config(function($routeProvider){
    //set up routes
    $routeProvider
        .when('/', {
            templateUrl: 'partials/count.html',
            controller: 'topSummaryCtrl'
        })
});

/partials/count.html のように:

    <table>
        <tr ng-repeat="x in itemSummaryResults">
            <td>Count of data "records" or "triples": {{ x.no.value }}</td>
        </tr>
    </table>

これはデータを返しません。ルートを使用して実装を試みるために別のファイルに移動すると、データを表示できません。

localhost3030 の Fuseki サーバーを SPARQL エンドポイントとして使用し、index.html をダブルクリックするだけで実行しています。これが問題になるかどうかはわかりませんが、オンラインで矛盾するアドバイスを見たので、ここに投稿してください。

この段階でこれに数日を費やしましたが、Angular にはまだ慣れていないので、ばかげたエラーである可能性は十分にありますが、何ですか? すべての助けを感謝して受け取りました。

ヒラリーを読んでくれてありがとう。

4

1 に答える 1

0

わかった。回避策はありますが、正直なところ、そもそも AngularJS を使用する目的に反するので、別の提案をお願いします。

回避策は、単一のインクルード JS ファイルまたは HTML のタグ内ですべての JS を定義し、並べ替えのルーティングを実装するために使用することです。コードは次のようになります (すべて HTML ファイルの場合)。

<html>
<head>
   <title>HHLDSummaryApp </title>
   <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
   <script     src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
   <script>
      var summaryApp = angular.module("summaryApp", ['ngRoute']);

      summaryApp.config(['$routeProvider',
         function($routeProvider) {
            $routeProvider.
               when('/viewCounts', {
                  templateUrl: 'count.htm',
                  controller: 'topSummaryCtrl'
               }).
               otherwise({
                  redirectTo: '/viewCounts'
              });
         }]);

    /* inject $scope object and data retrieval factories */
    summaryApp.controller('topSummaryCtrl', function($scope, itemSummary){

        itemSummary.success(function(response) { 
            $scope.itemSummaryResults = response.results.bindings;
        });
    });

    summaryApp.factory('itemSummary', function($http){
        /* 1 count of data triples */
        var query = encodeURIComponent('SELECT (COUNT(*) AS ?no) { ?s ?p ?o      }');
        var endpoint = "http://localhost:3030/dataset/query";
        return $http.get("http://localhost:3030/dataset/query?query="+query+"&output=json&stylesheet=")
    });
</script>
</head>

<body>
   <h2>Your Data Looks Like This ... </h2>
   <div ng-app="summaryApp">
      <div ng-view></div>
      <script type="text/ng-template" id="count.htm">
        <table>
            <tr ng-repeat="x in itemSummaryResults">
                <td>Count of data "records" or "triples": {{ x.no.value }}    </a></td>
            </tr>
        </table>
      </script> <!-- end viewCounts -->
   </div>

</body>
</html>

私が言ったように、この回避策は基本的にangularを使用する目的を無効にします.ng-repeat機能にのみ使用するため、可能であれば代替ソリューションを提案してください. ありがとう。

于 2015-07-09T08:56:22.583 に答える