AngularJS route not rendering data

Question

I am trying to implement a very simple angular route. One page only to begin with, will build on once working.

Basically, if I directly display the data in the index.html page, it produces the desired result (count of triples) like so:

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

so I know my queries, factories etc. in themselves are OK.

If I then attempt to implement via a view and route, no data is displayed. Here is my code.

index.html like so:

<!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>

controller js like so:

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 like so:

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

/partials/count.html like so:

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

This returns no data. Once I move it out to a separate file to attempt implementation using routes, I can't get the data to display.

I am using Fuseki server on localhost3030 as the SPARQL endpoint and running index.html just by double-clicking on it. I don't know if this might be an issue but have seen conflicting advice online so posting here.

Have spent a couple of days working on this at this stage and still new to Angular so entirely possible it's a dumb error but what? All help gratefully received.

Thanks for reading Hilary.

score 0 · Answer 1 · answered Jul 09 '15 at 08:56

OK. I have a workaround but to be honest it defeats the purpose of using AngularJS in the first place so I would still like alternative suggestions.

The workaround is to define all JS in a single included JS file or within tags in the HTML and use to implement routing of sorts. The code looks like this (if all in HTML file).

<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>

As I said, this workaround essentially defeats the purpose of using angular as we only use it for the ng-repeat functionality so please suggest alternative solution if you can. Thanks.

AngularJS route not rendering data

1 Answers1