Angular Datatables: Unknown provider

Question

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 complications... 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']);
})();

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

Ofiris · Accepted Answer · 2017-03-01 20:02:38Z

7

See the example in thier site:

You only need to inject datatables to the module.

Remove the dependency from the controller.

edited Mar 1, 2017 at 20:02

answered Jan 28, 2016 at 10:05

Ofiris

6,1716 gold badges38 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mortenkp25 Over a year ago

That did it! Thanks! :)

Ofiris Over a year ago

Sure, see more example at l-lin.github.io/angular-datatables/#/gettingStarted

Collectives™ on Stack Overflow

Angular Datatables: Unknown provider

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related