Question

我正在尝试实现一个非常简单的角度路线。只有一个页面开始，将在一次工作的基础上继续。

基本上，如果我直接在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的新手，所以完全可能这是一个愚蠢的错误，但是什么？感谢所有的帮助。

感谢阅读希拉里。

Answer 1

行。我有一个解决方法，但说实话它首先失败了使用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>

正如我所说，这种解决方法基本上违背了使用角度的目的，因为我们只将它用于ng-repeat功能，所以如果可以，请建议替代解决方案。感谢。

AngularJS路线无法渲染数据

1 个答案: