Using angular-datatables DTOptions In Controller

Question

I am using angular-datatables in a project. I am using it like this:

<table datatable="ng" class="table table-bordered">
  <thead>
    <tr>
      <th>ID</th>
      <th>First</th>
      <th>Last</th>
      <th>Occupation</th>
    </tr>
  </thead>

  <tbody>
    <tr ng-repeat="person in people">
      <td>{{person.Id}}</td>
      <td>{{person.FirstName}}</td>
      <td>{{person.LastName}}</td>
      <td>{{person.Job}}</td>
    </tr>
  </tbody>
</table>

Oddly enough, the table renders. However, it does not behave like a data table. Sorting is not loaded. Is there a way for me to check to see if datatables has been loaded? In my page, I have the following:

<link href="/libs/datatables/media/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="/libs/angular-datatables/dist/datatables.bootstrap.min.css" rel="stylesheet"/>

<script src="/libs/jquery/dist/jquery.min.js"></script>
<script src="/libs/datatables/media/js/jquery.dataTables.min.js"></script>
<script src="/libs/angular/angular.min.js"></script>
<script src="/libs/angular-datatables/dist/angular-datatables.min.js"></script>
<script src="/js/app.js"></script>

angular.bootstrap($('#myApp'), ['myApp']);

MyApp is manually bootstrapped because there are multiple apps on the page. app.js has the following:

'use strict';
var myApp = angular.module('myApp', ['ngAnimate', 'ui.bootstrap', 'datatables', 'app.components']);

myApp.controller('MyController', ['$scope', 
function ($scope, DTOptionsBuilder, DTColumnDefBuilder) {
  console.log(DTOptionsBuilder);
}])
;

the console.log statement prints undefined . This implies to me that datatables isn't being loaded. However, I'm not sure how to confirm that. I do not see any 404s in my console window. So, I assume that I'm at least downloading the necessary libraries. It feels like I'm not injecting datatables properly. However, it looks correct to me. Yet, sorting is not working and DTOptionsBuilder is printing undefined.

What am I doing wrong?

Answer 1

Inline Array Annotation is not provided properly the correct way to do it is:

 myApp.controller('MyController', ['$scope', 'DTOptionsBuilder', 'DTColumnDefBuilder', function ($scope, DTOptionsBuilder, DTColumnDefBuilder) { console.log(DTOptionsBuilder); }]) ;