Hi all,
We're running through a very strange error when using angularjs to load data from server. The data were loaded correctly but as we've used
datatables.net js for tabular presentation, the sorting/filtering/paging wasn't working.
So, we tried to use third party js compatible with angularjs i.e. datatables, ngTable but when declaring module with the respective directives of the js, the data arent loaded and the console shows "Error: [$injector:modulerr]".
Below is our controller code:
var AngularJSwithMVC = angular.module('AngularJSwithMVC', ['datatables']); //Code breaks here and thus data aren't bounded now.
AngularJSwithMVC.controller('LandingPageController', ['$scope', '$http', 'DTOptionsBuilder', 'DTColumnBuilder', function ($scope, $http, DTOptionsBuilder, DTColumnBuilder) {
$scope.dtColumns = [
DTColumnBuilder.newColumn("Id", "Id"),
DTColumnBuilder.newColumn("RoleId", "RoleId"),
DTColumnBuilder.newColumn("EventUserId", "EventUserId"),
DTColumnBuilder.newColumn("Name", "Name"),
DTColumnBuilder.newColumn("RoleName", "Part. Type"),
DTColumnBuilder.newColumn("Email", "Email")
]
$scope.dtOptions = DTOptionsBuilder.newOptions().withOption('ajax', {
url: '/GapView/GetInternalAttendeesForRoleForImport?RoleId=0',
type : 'GET'
})
.withPaginationType('full_numbers')
.withDisplayLength(10);
}]);
HTML:
<script src="~/Scripts/jquery.min.js"></script>
<script src="~/Scripts/jquery.dataTables.js"></script>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/angular-route.min.js"></script>
<script src="~/Scripts/angular-datatables.js"></script>
<div ng-app="AngularJSwithMVC" ng-controller="LandingPageController">
<table class="table table-striped table-bordered table-hover" datatable dt-options="dtOptions" dt-columns="dtColumns" id="tblImportInternalForm">
</table>
</div>
Thank you in advance for your help.