0

我正在尝试实现一个非常简单的角度路线。一页只是开始，一旦工作就会建立。

基本上，如果我直接在 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=")
});

像这样的应用程序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 回答