错误:[$injector:unp]未知提供程序:Learning AngularJS可能使用一两个指针

Question

我正在学习Angular，我的第一个应用程序是照片共享工具。我添加了上传函数的代码并破坏了它。我以为我在控制器中定义了albumProvider，但很明显我没有这么做。错误是错误：[$injector:unp]未知提供者。我被卡住了，能帮我们解决一下我需要解决的问题吗。

albumService.js

(function () {
  function albumProvider($http,$fileUploader) {
    this.getUploader = function (album_name, scope) {
      return $fileUploader.create({
        scope: scope,
        method: "PUT",
        url: "/v1/albums/" + album_name + "/photos.json"
      });
    };
    this.getAlbums = function (callback) {
      $http.get("/v1/albums.json")
        .success(function (data, status, headers, conf) {
          callback(null, data);
        })
        .error(function (data, status, headers, conf) {
          callback(data);
        });
    };
    this.getPhotosForAlbum = function (name, callback) {
      $http.get("/v1/albums/" + name + "/photos.json")
        .success(function (data, status, headers, conf) {
          callback(null, data);
        })
        .error(function (data, status, headers, conf) {
          callback(data);
        });
    };
    this.addAlbum = function (album_data, callback) {
      if (!album_data.name) return callback({ code: "missing_name" });
      if (!album_data.title) return callback({ code: "missing_title" });
      if (!album_data.description) return callback({ code: "missing_description" });
      if (!album_data.date) return callback({ code: "missing_date" });
      if (!is_valid_date(album_data.date)) return callback({ code: "bad_date" });
      $http.put("/v1/albums.json", album_data)
        .success(function (data, status, headers, conf) {
          callback(null, data);
        })
        .error(function (data, status, headers, conf) {
          callback(data);
        });
    };
  }
  photoApp.service("albumProvider", albumProvider);
  function is_valid_date(the_date) {
    if (the_date.match(/^[0-9]{2,4}[-/. ,][0-9]{1,2}[-/. ,][0-9]{1,2}$/)) {
      var d = new Date(the_date);
      return !isNaN(d.getTime());
    } else {
      return false;
    }
  }
})();

albumUploadController.js

(function () {
  function AlbumUploadController($scope, $routeParams, albumProvider) {//Dependency Inject albumProvider
    $scope.album_name = $routeParams.album_name;
    $scope.page_load_error = '';
    $scope.description = {};
    albumProvider.getPhotosForAlbum($scope.album_name, function (err, photos) {
      if (err) {
        if (err.error == "not_found")
          $scope.page_load_error = "No such album.  Are you calling this right?";
        else
          $scope.page_load_error = "Unexpected error loading page: " + err.code + " " + err.message;
      } else {
        $scope.photos = photos;
        $scope.uploader = albumProvider.getUploader($scope.album_name, $scope);
        $scope.uploader.bind("completeall", function (event, items) {
          $scope.done_uploading = true;
        });
      }
    });
    $scope.uploader.bind('beforeupload', function (event, item) {
      var fn = _fix_filename(item.file.name);
      var d = item.file.lastModifiedDate;
      var dstr = d.getFullYear() + "/" + d.getMonth() + "/" + d.getDate();
      item.formData = [{
        filename: fn,
        date: dstr,
        description: $scope.descriptions[item.file.name]
      }];
    });
  }
  photoApp.controller("AlbumUploadController", AlbumUploadController);
  function _fix_filename(fn) {
    if (!fn || fn.length == 0) return "unknown";
    var r = new RegExp("^[a-zA-Z0-9\-_,]+$");
    var out = "";
    for (var i = 0; i < fn.length; i++) {
      if (r.exec(fn[i]) != null)
        out += fn[i];
    }
    if (!out) out = "unknown_" + (new Date()).getTime();
  }
})();

app.js

var photoApp = angular.module('photoSharingApp', ['ngRoute']);
photoApp.config(function ($routeProvider) {
  $routeProvider
    .when("/albums", {
      controller: "AlbumListController",
      templateUrl: "/app/partial/albumPartial.html"
    })
    .when("/album/:album_name", {
      controller: "AlbumViewController",
      templateUrl: "/app/partial/albumViewPartial.html"
    })
    .when("/album/:album_name/upload", {
      controller: "AlbumUploadController",
      templateUrl: "/app/partial/albumUploadPartial.html"
    })
    .when("/album/photos/:album_name/:photo_filename", {
      controller: "PhotoViewController",
      templateUrl: "/app/partial/photoViewPartial.html"
    })
    .when("/", {
      redirectTo: "/albums"
    })
    .when("/404_page", {
      controller: "Controller404",
      templateUrl: "/app/partial/404Partial.html"
    })
    .otherwise({
      redirectTo: "/404_page"
    });
});

Answer 1

您需要在应用程序配置中设置文件上传器，如：

var photoApp = angular.module('photoSharingApp', ['ngRoute','angularFileUpload']);

那么据我所知，你可以更改你的文件上传器定义为：

return new FileUploader({
        scope: scope,
        method: "PUT",
        url: "/v1/albums/" + album_name + "/photos.json"
 });

我不确定是否将作用域传递给服务，但您可以尝试一下，也不要忘记将您的依赖项从$fileUploader更新为fileUploader