Angular dependencies and provider not available error

Question

I am loading a file upload script I found on Github

<script type="text/javascript" src="{% static 'bower_components/angular-file-upload/angular-file-upload.min.js' %}"></script>

and have a data import module :

(function () {
 'use strict';

  angular
    .module('TestSite.import', [
      'TestSite.import.controllers'
    ]);

  angular
    .module('TestSite.import.controllers', ['angularFileUpload']);
})();

as well as a controller

(function () {
  'use strict';

  angular
    .module('TestSite.import.controllers' , ['angularFileUpload'])
    .controller('UploadController', UploadController);

  UploadController.$inject = ['$scope','angularFileUpload'];

  /**
  * @namespace UploadController
  */
  function UploadController($scope, FileUploader) {
    $scope.uploader = new FileUploader();

  };

})();

And I am getting an error

 Error: [$injector:unpr] Unknown provider: angularFileUploadProvider <- angularFileUpload

I am confused about the module declaration and DI. Why do I need to declare the module TestSite.import.controllers twice? I am injecting the right dependencies (angularFileUpload) and still getting that error, also what is a provider and why cant angular find it?

Answer 1

Looks like you confused name of the file upload service. Correct dependency injection looks like this:

angular
    .module('TestSite.import.controllers')
    .controller('UploadController', UploadController);

UploadController.$inject = ['$scope', 'FileUploader'];

/**
 * @namespace UploadController
 */
function UploadController($scope, FileUploader) {
    $scope.uploader = new FileUploader();
};

Also note, that you don't have to redefine module TestSite.import.controllers . To access already registered module you need to use getter notation, meaning no dependency array as the second parameter:

.module('TestSite.import.controllers').controller(...);