地图AngularJS通过URL的restAPI请求

Question

作为新的角我想知道如何调用一个应通过URL解析和配对的Web服务，就像如果URL被直接调用以获得列出的请求与给定PARAMS

我的意思让说我有

/api/products       -- calling all products(this is the access point) 
/api/products/?page=2&orderby=asc  -- calls products with pagination and orderby and here is what's bothering me because the api is getting called via ajax and there is no URL mapping of the target 

我的代码

HTML标记

<div ng-controller="MainCtrl"> 
      <div class="row"> 
       <div class="col-lg-7 col-md-7 col-sm-7">  
        <pagination total-items="totalItems" num-pages="totalPages" ng-model="currentPage" ng-change="selectPage(currentPage)" max-size="5" class="pagination-sm" boundary-links="true"></pagination> 
       </div> 
      <div ng-repeat="product in products"></div> 
      </div> 
</div> 

位指示

 //called when navigate to another page in the pagination 
     $scope.selectPage = function(page) { 
      $scope.filterCriteria.pageNumber = page; 
      $scope.fetchResult(); 
     }; 


     //The function that is responsible of fetching the result from the server and setting the grid to the new result 
     $scope.fetchResult = function() {    
      return api.items.search($scope.filterCriteria).then(function(data) {      
       $scope.products = data; 
       $scope.totalPages = data.total; 
       $scope.productsCount = data.TotalItems; 

      }, function() { 
       $scope.products = []; 
       $scope.totalPages = 0; 
       $scope.productsCount = 0; 
      }); 
     }; 

服务

.factory('api', function(Restangular) { 
    //api call to 
    return { 
     products: function() { 
      return Restangular.all('products').getList(); 

     }, 
     product: function(id) { 
      Restangular.one("products", id).get().then(function(c) { 
       return c; 
      }); 

     }, 

     update: function(id) { 
      Restangular.one("products", id).put().then(function(c) { 
       return c; 
      }); 
     }, 
     items: { 
      search: function(query) { 
       return Restangular.all('products').getList(query); 
      } 
     }, 
    }; 
}); 

如何创建的PARAMS URL和功能这使RESTAPI来电或什么在这种情况下的解决方法

Answer 1

您可以通过$location服务获取搜索参数。所以如果用户去somedomain.com/products/?page=2&orderby=asc那么$location.search()将等于{page: 2, orderby: 'asc'}。

所以当你的控制器加载时，你只需要设置filterCriteria并获取结果。

控制器

var myCtrl = function($location, $scope) { 
    $scope.selectPage = function(page) { 
     ... 
    }; 

    $scope.fetchResult = function() {    
     ... 
    }; 

    $scope.filterCriteria = $location.search(); 
    $scope.fetchResults(); 
} 

Answer 2

第一您需要通过提及基础url来创建一个restangular对象。你的情况，这将是

// It will creat a url /api 
var base = Restangular.all('api'); 

现在一样，如果你想获得的所有产品，那么这将是你可以创建多个场景：

// /api/products/ 
base.getList('products') 
.then(function(products) { 
    $scope.products= products 
}) 

现在，如果你想申请分页以及包括orderBy param

$scope.products = base.getList("products", [{page: 2},{orderby:asc}]);