Please help. I am stuck at this point for more then 14 hours and I can't find an explanation or an example.
This is what I have now: http://plnkr.co/edit/PaYR7c0QXSKxl1jcmRBQ
If I don't use angular-routing, ngTable works correctly. As soon as I add routing, it gives this error. The error disappears when I comment $scope.tableParams = new ngTableParams({ ...but then the data is not showing.
The code that does not work:
var app = angular.module('main', [
'ngRoute',
'ngTable'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {templateUrl: 'partial1.html', controller: 'MyCtrl1'});
$routeProvider.otherwise({redirectTo: '/'});
}]);
app.controller('MyCtrl1', [function($scope,ngTableParams) {
var data = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 10 // count per page
}, {
total: data.length, // length of data
getData: function($defer, params) {
$defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
}]);
</script>
</head>
<body ng-app="main">
<div ng-view=""></div>
</body>
The HTML header should be corrected: (you were loading ngTable before angular)
<script>document.write('<base href="' + document.location + '" />');</script>
<script data-require="angular.js@*" data-semver="1.2.10" src="http://code.angularjs.org/1.2.10/angular.js"></script>
<script data-require="angular-route@*" data-semver="1.2.10" src="http://code.angularjs.org/1.2.10/angular-route.js"></script>
<script data-require="ng-table@*" data-semver="0.3.0" src="http://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.js"></script>
The controller declaration is a little off.
app.controller('MyCtrl1', ['$scope', 'ngTableParams', function MyCtrl1($scope, ngTableParams) {