angularjs + datatables directive throwing Error: $injector

[Ishit Parikh]

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.

[Sander Elias]

Hi Ishit,

I Dint' thing datatables is the module you need to add to to the injector, but ngTables is.

like:

var AngularJSwithMVC = angular.module('AngularJSwithMVC', ['ngTables']);

I think datatables is a 3rth party non-angular dependency.

Regards

Sander

[Ishit Parikh]

Hi Sander,

Thank you for your reply.

Actually we tried without the 'datatables' module but then it gives "Error: $injector:unpr Unknown provider: DTOptionsBuilderProvider <- DTOptionsBuilder <- LandingPageController".
So, in either way it's not working.

You're right about datatables, they're third party dependency so we had to add it's js reference. We used different sources of angular-datatables from the web to accomplish our purpose, all of them showed to put 'datatables' module.

Same in the case of 'ngTable', breaks from the same line as shown in my previous message.

Plz advise.

Thank you.

[Sander Elias]

You get issues like this in mainly 2 cases.

Case 1, you forgot to include a needed resource. or a script din't finish loading before you try to use it.

case 2. There is an typo in one of the things you include. being case sensitive makes this one worse.

Regards

Sander

[Bhargav Patel]

hi sunil 

i am getting same error can you please how did you resolve issue.