I recently came across a file upload script on Github that I decided to implement.
<script type="text/javascript" src="{% static 'bower_components/angular-file-upload/angular-file-upload.min.js' %}"></script>
Furthermore, I have created a data import module:
(function () {
'use strict';
angular
.module('TestSite.import', [
'TestSite.import.controllers'
]);
angular
.module('TestSite.import.controllers', ['angularFileUpload']);
})();
In addition, there is a controller in place:
(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();
};
})();
However, the implementation process has encountered an error:
Error: [$injector:unpr] Unknown provider: angularFileUploadProvider <- angularFileUpload
This issue relates to my confusion surrounding the module declaration and Dependency Injection (DI). Despite injecting the correct dependencies (angularFileUpload), the error persists. Can anyone clarify why it's necessary to declare the module TestSite.import.controllers twice? Also, what exactly is a provider, and why is Angular struggling to locate it?