無法注入路由器配置裏面我的角度解析服務

Question

（我plunkr代碼駐留在http://plnkr.co/edit/6KU3GblQtMdRAx3v3USV?p=preview）

我試圖創建一個搜索欄（導航）最終應打在後端REST API。輸入「阿爾法」點擊後輸入搜索按鈕會觸發對產品的路線/搜索/ 0 SEARCHTEXT =阿爾法

點擊按鈕觸發的路線變化，應該做的決心如下：

.when("/products/search/:page", { 
     templateUrl: "products.html", 
     controller: "ProductsSearchController", 
     resolve: { 
      // Define all the dependencies here 
      ProdSearchServ : "ProdSearchService", 
      // Now define the resolve function 
      resultData : function(ProdSearchServ) { 
       return ProdSearchServ.searchProducts(); 
      } 
     } 
    }) 

不過，我發現了以下錯誤

angular.js:9784 Error: [$injector:unpr] Unknown provider: ProdSearchServProvider <- ProdSearchServ

我相信我做的大部分事情按照慣例，可我失去了一些東西？

我在複製script.js下面的代碼（也在上面的plnkr鏈接）。它具有所有的路由配置和控制器定義。

(function(){ 


// jargoViewer Create a new Angular Module 
// This would go into the html tag for index.html 
var app = angular.module("jargoViewer", ["ngRoute"]); 

app.config(function($routeProvider){ 
    $routeProvider 
     .when("/main", { 
      templateUrl: "main.html", 
      controller: "NavController" 
     }) 
     .when("/products/search/:page", { 
      templateUrl: "products.html", 
      controller: "ProductsSearchController", 
      resolve: { 
       // Define all the dependencies here 
       ProdSearchServ : "ProdSearchService", 
       // Now define the resolve function 
       resultData : function(ProdSearchServ) { 
        return ProdSearchServ.searchProducts(); 
       } 
      } 
     }) 
     .otherwise({redirectTo:"/main"}); 
}); 

}()); 

// Nav Controller 
(function() { 
var app = angular.module("jargoViewer"); 

var NavController = function($scope, $location) { 
    // Function to invoke the Prod search based on input 
    $scope.search = function() { 
     console.log("searchText : " + $scope.searchtext); 
     $location.path("products/search/0").search({searchtext: $scope.searchtext}); 
    }; 
}; 

app.controller("NavController", NavController); 

}()); 

// Define the Prod Search Service here 
(function() { 
// Get reference to the app 
var app = angular.module("jargoViewer"); 

// Create the factory 
app.factory('ProdSearchService', function($routeParams, $http, $q) { 

    var searchProducts = function() { 
     pageNum = 0; 
     searchParam = ''; 
     if (('page' in $routeParams) && (typeof $routeParams.page === 'number')) { 
      pageNum = $routeParams.page; 
     } 
     // Check if the router Param contains the field searchtext, if so, check if its a string 
     if (('searchtext' in $routeParams) && (typeof $routeParams.searchtext === 'string')) { 
      searchParam = $scope.routeParam.searchtext; 
     } 

     // Now make the http API hit to fetch the products 
     var request = $http({ 
      method: "get", 
      url: "http://abcd.com/products/search/" + pageNum, 
      params: { 
       search: searchParam 
      }, 
     }); 
     return(request.then(handleSuccess, handleError)); 
    }; 

    function handleError(response) { 
     // The API response from the server should be returned in a 
     // nomralized format. However, if the request was not handled by the 
     // server (or what not handles properly - ex. server error), then we 
     // may have to normalize it on our end, as best we can. 
     if (
      ! angular.isObject(response.data) || 
      ! response.data.message 
      ) { 
      return($q.reject("An unknown error occurred.")); 
     } 
     // Otherwise, use expected error message. 
     return($q.reject(response.data.message)); 
    } 

    // I transform the successful response, unwrapping the application data 
    // from the API response payload. 
    function handleSuccess(response) { 
     if(response.data.error == true) { 
      return($q.reject(response.data.message)); 
     } 
     return(response.data.data); 
    } 

    return { 
     searchProducts : searchProducts 
    }; 
}); 
}()); 

// Define the Products Search Controller below 
(function() { 

var app = angular.module("jargoViewer"); 

//var ProductController = function($scope) { 
var ProductsSearchController = function($scope, $routeParams, ProdSearchService) { 
    // Nothing to do really here 
}; 

app.controller("ProductsSearchController", ProductsSearchController); 

}()); 

Answer 1

這由你奇怪的命名約定引起的。有時ProdSearchServ有時ProdSearchService。

如果你只是選擇一個並一直使用它，那麼你將不會遇到這些類型的錯誤。

Fixed Plunker

 

特別是你創建一個名爲ProdSearchService服務，然後嘗試用不同的名稱使用它：

app.factory('ProdSearchService', 
//vs 
resultData : function(ProdSearchServ) { 

我想你，我們的印象是，此代碼將爲您解決它。但是，這隻適用於傳遞給控制器​​的依賴項，而不是一般的函數。對於已經存在的服務，您不需要像這樣專門定義它們;相反，只需在控制器中使用正確的名稱即可。

// Define all the dependencies here 
ProdSearchServ : "ProdSearchService", 

Answer 2

我覺得你並不需要定義的依賴，當你說

// Define all the dependencies here 
ProdSearchServ : "ProdSearchService", 

只是這樣做：

.when("/products/search/:page", { 
     templateUrl: "products.html", 
     controller: "ProductsSearchController", 
     resolve: { 
      resultData : function(ProdSearchService) { //as you defined it before 
       return ProdSearchService.searchProducts(); 
      } 
     } 
    }) 

有一個類似的問題here