錯誤：[$ injector：unpr]未知提供者：學習AngularJS可以使用一兩個指針

Question

我傾向Angular我的第一個應用程序是一個照片共享工具。我添加了上傳功能的代碼並將其破解。我以爲我在我的控制器中定義了albumProvider，但顯然我沒有這樣做。錯誤是錯誤：[$ injector：unpr]未知提供者。我被卡住了，可以幫我們解決我需要解決的問題。

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']); 

話，據我知道你可能會改變你fileuploader定義：

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

我不知道的範圍傳遞給服務，但你可以嘗試了這一點，也不要忘了將您的依賴關係從$ fileUploader更新到FileUploader