AngularJS file upload Error: $injector:unpr Unknown Provider

Question

我正在尝试使用 angularjs 上传文件。但是我在过去几天收到这个错误，我无法解决：

angular.js:13920 Error: [$injector:unpr] http://errors.angularjs.org/1.5.8/$injector/unpr?p0=fileUploadServiceProvider%20%3C-%20fileUploadService%20%3C-%20appCtrl
at angular.js:38
at angular.js:4511
at Object.d [as get] (angular.js:4664)
at angular.js:4516
at d (angular.js:4664)
at e (angular.js:4688)
at Object.invoke (angular.js:4710)
at S.instance (angular.js:10354)
at p (angular.js:9263)
at g (angular.js:8620)

我只想读取上传的文件，并存储在服务器中，而不是link给其他URL。我的后端使用 Django。这是我的代码：

HTML

<body ng-app="myApp">
    <div ng-controller="appCtrl">
        <input type="file" id="file" name="files" accept="text/*"
               data-url="file" class="upload" ng-model="uploadFile"/>
        <label for="file">
          <span class="glyphicon glyphicon-open" id="selectFile">
          </span>Select a file
        </label>
    </div>
</body>
<script src="../static/js/services/fileUploadService.js"></script>
<script src="../static/js/controllers/fileUploadController.js"></script>
<script src="../static/js/fileModel.js"></script>

指令：

var app = angular.module('myApp', [])
app.directive("filesInput", function() {
  return {
    require: "ngModel",
    link: function postLink(scope,elem,attrs,ngModel) {
      elem.on("change", function(e) {
        var files = elem[0].files;
        ngModel.$setViewValue(files);
      })
    }
  }
});

服务

var app = angular.module('myApp', [])
app.factory('fileUploadService', function ($rootScope) {
    var _files = [];

    var service = {
        add: add,
        clear: clear,
        upload: upload,
      }

     return service 

     function add(file){
        _files.push(file)
        $rootScope.$broadcast('fileAdded', file.files[0].name)
      }
      function clear(){
        _files = []
      }
      function upload(){
        _files.submit();        
      }

控制器：

var app = angular.module('myApp', [])
app.controller('appCtrl', function ($scope, $rootScope, $http, fileUploadService){
    $scope.$watch('uploadFile', function (newVal, oldVal) {
        var submitBtn = document.getElementById('submitBtn');
        //clear existing files
        fileUploadService.clear()
        if(newVal == true){
            var formdata = new FormData();
            $scope.getTheFiles = function ($files) {
                angular.forEach($files, function (value, key) {
                    formdata.append(key, value);
                });
            };    
            // NOW UPLOAD THE FILES.
            $scope.uploadFile = function () {    
                var request = {
                    method: 'POST',
                    url: file,
                    data: formdata,
                    headers: {
                        'Content-Type': undefined
                    }
                };    
                // SEND THE FILES.
                $http(request)
                    .success(function (d) {
                        alert(d);
                    })
                    .error(function () {
                    });
            }
        }]);
        fileUploadService.add(newVal)
        fileUploadService.upload()
    }
})

Answer 1

通过使用这个：

var app = angular.module('myApp', [])

它创建了一个新模块，因此控制器、服务和指令在一个单独的模块中注册！这会导致注入错误，因为控制器无法注入服务，因为它已在不同的模块中注册。

解决方案是只创建一个模块并在其中注册所有其他组件，如下所示：

第一个文件：

var app = angular.module('myApp', []);
angular.module('myApp').factory('fileUploadService', function ($rootScope) {
   ... 
});

第二个文件

angular.module('myApp').controller('appCtrl', function ($scope, $rootScope, $http, fileUploadService){
  ...
});

第 3 个文件：

angular.module('myApp').directive("filesInput", function() {
  ...
});

Answer 2

避免创建模块的多个语句。

ERRONEOUS

var app = angular.module('myApp', [])
app.directive("filesInput", function() {
  //...
});

var app = angular.module('myApp', [])
app.factory('fileUploadService', function ($rootScope) {
  //...
}};

var app = angular.module('myApp', [])
app.controller('appCtrl', function ($scope, $rootScope, $http, fileUploadService){
  //...
});

额外的 angular.module('myApp', []) 语句正在覆盖现有模块，导致 fileUploadService 未注册。

更好

angular.module('myApp', [])

angular.module('myApp').directive("filesInput", function() {
  //...
});

angular.module('myApp').factory('fileUploadService', function ($rootScope) {
  //...
}};

angular.module('myApp').controller('appCtrl', function ($scope, $rootScope, $http, fileUploadService){
  //...
});

创建模块的语句必须放在向其添加更多实体的所有代码之前。

来自文档：

Creation versus Retrieval

Beware that using angular.module('myModule', []) will create the module myModule and overwrite any existing module named myModule. Use angular.module('myModule') to retrieve an existing module.

有关详细信息，请参阅

AngularJS file upload Error: $injector:unpr Unknown Provider

AngularJS file upload Error: $injector:unpr Unknown Provider

angularjs

angularjs-directive

angularjs-service

angularjs-controller

angularjs-fileupload

避免创建模块的多个语句。

Creation versus Retrieval