无法注入路由器配置里面我的角度解析服务

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