I'm new to JS and Angular trying to implement the angular-datatable version in my project.

First I used the "angular-way", which turned out to be a bad decision based on performance. I have a lot of rows in my table. So I've decided to try building my datatable with ajax and building my columns with dtOptionsBuilder and filling the table using dtOptions.

However, I'm having some plications... I get an unkown provider error.. More specifically:

Error: [$injector:unpr] Unknown provider: datatablesProvider <- datatables <- OverviewCtrl

I'm not quite sure, what I'm doing wrong? Here's my controller.

angular.module("invoices").controller("OverviewCtrl", ["apiService", "datatables", 'utilsService', "$q", "invoiceService", "ngDialog", "$controller", "authFactory", "redirectService", "$rootScope", OverviewCtrl]);

function OverviewCtrl(apiService, utilsService, dtOptionsBuilder, dtColumnBuilder, $q, invoiceService, ngDialog, $controller, authFactory, redirectService, $rootScope) {
var NUMBER_OF_TIMEENTRIES_TO_SHOW = 10;
var vm = this;

if (!authFactory.identity.isAuthenticated) {
    redirectService.redirect("overview", 2, "login", 3);
}

vm.dtOptions = dtOptionsBuilder.fromSource(vm.latestInvoices)
.withPaginationType('full_numbers');
vm.dtColumns = [
    dtColumnBuilder.newColumn('CompanyName').withTitle('Client'),
    dtColumnBuilder.newColumn('ProjectName').withTitle('Project'),
    dtColumnBuilder.newColumn('InvoiceID').withTitle('ID'),
    dtColumnBuilder.newColumn('InvoiceDate').withTitle('Inv. Date'),
    dtColumnBuilder.newColumn('InvoiceStart').withTitle('Start Date'),
    dtColumnBuilder.newColumn('InvoiceEnd').withTitle('End Date'),
    dtColumnBuilder.newColumn('DKKexVAT').withTitle('DKK ex VAT'),
    dtColumnBuilder.newColumn('CustomerInvoiceGroup.Label').withTitle('CIG'),
    dtColumnBuilder.newColumn('Attention').withTitle('Attention'),
    dtColumnBuilder.newColumn('CustManager').withTitle('Customer Manager'),
    dtColumnBuilder.newColumn('Regarding').withTitle('Regarding'),
    dtColumnBuilder.newColumn('DueDate').withTitle('Due Date'),
    dtColumnBuilder.newColumn('Finalized').withTitle('Finalized'),
    dtColumnBuilder.newColumn('Paid').withTitle('Paid')
];

I've injected datatables into my app.module.js as listed in the manual.

'use strict';
(function() {
    angular.module('app', ['ui.router', 'invoices', 'ngDialog', 'infinite-scroll', 'datatables']);
})();

I'm new to JS and Angular trying to implement the angular-datatable version in my project.

First I used the "angular-way", which turned out to be a bad decision based on performance. I have a lot of rows in my table. So I've decided to try building my datatable with ajax and building my columns with dtOptionsBuilder and filling the table using dtOptions.

However, I'm having some plications... I get an unkown provider error.. More specifically:

Error: [$injector:unpr] Unknown provider: datatablesProvider <- datatables <- OverviewCtrl

I'm not quite sure, what I'm doing wrong? Here's my controller.

angular.module("invoices").controller("OverviewCtrl", ["apiService", "datatables", 'utilsService', "$q", "invoiceService", "ngDialog", "$controller", "authFactory", "redirectService", "$rootScope", OverviewCtrl]);

function OverviewCtrl(apiService, utilsService, dtOptionsBuilder, dtColumnBuilder, $q, invoiceService, ngDialog, $controller, authFactory, redirectService, $rootScope) {
var NUMBER_OF_TIMEENTRIES_TO_SHOW = 10;
var vm = this;

if (!authFactory.identity.isAuthenticated) {
    redirectService.redirect("overview", 2, "login", 3);
}

vm.dtOptions = dtOptionsBuilder.fromSource(vm.latestInvoices)
.withPaginationType('full_numbers');
vm.dtColumns = [
    dtColumnBuilder.newColumn('CompanyName').withTitle('Client'),
    dtColumnBuilder.newColumn('ProjectName').withTitle('Project'),
    dtColumnBuilder.newColumn('InvoiceID').withTitle('ID'),
    dtColumnBuilder.newColumn('InvoiceDate').withTitle('Inv. Date'),
    dtColumnBuilder.newColumn('InvoiceStart').withTitle('Start Date'),
    dtColumnBuilder.newColumn('InvoiceEnd').withTitle('End Date'),
    dtColumnBuilder.newColumn('DKKexVAT').withTitle('DKK ex VAT'),
    dtColumnBuilder.newColumn('CustomerInvoiceGroup.Label').withTitle('CIG'),
    dtColumnBuilder.newColumn('Attention').withTitle('Attention'),
    dtColumnBuilder.newColumn('CustManager').withTitle('Customer Manager'),
    dtColumnBuilder.newColumn('Regarding').withTitle('Regarding'),
    dtColumnBuilder.newColumn('DueDate').withTitle('Due Date'),
    dtColumnBuilder.newColumn('Finalized').withTitle('Finalized'),
    dtColumnBuilder.newColumn('Paid').withTitle('Paid')
];

I've injected datatables into my app.module.js as listed in the manual.

'use strict';
(function() {
    angular.module('app', ['ui.router', 'invoices', 'ngDialog', 'infinite-scroll', 'datatables']);
})();

• javascript
• jquery
• angularjs
• datatable
• angular-datatables

Share Improve this question Follow edited Nov 13, 2019 at 10:55 Wang Liang 4,44477 gold badges2626 silver badges5050 bronze badges asked Jan 28, 2016 at 10:00 Mortenkp25Mortenkp25 18111 gold badge33 silver badges1414 bronze badges 4

• It is dependency injection error. You need to include 'datatables' js librabry. – rishikesh tadaka Commented Jan 28, 2016 at 10:01
• Is it referenced in the index.html? As in is the package included? – Sten Muchow Commented Jan 28, 2016 at 10:03
• I've loaded the required libraries according to the manual. <script src="/bower_ponents/datatables/media/js/jquery.dataTables.min.js"></script> <script src="/bower_ponents/datatables/media/js/dataTables.bootstrap.min.js"></script> <script src="/bower_ponents/angular/angular.js"></script> <script src="/bower_ponents/angular-datatables/dist/angular-datatables.min.js"></script>` – Mortenkp25 Commented Jan 28, 2016 at 10:05
• 1 you have injected dependacy in both controller and module. Only inject in modules. – Parth Trivedi Commented Jan 28, 2016 at 10:06

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

See the example in thier site:

You only need to inject datatables to the module.

Remove the dependency from the controller.