Question

对角度我不熟悉我想知道如何调用一个Web服务，该服务应该通过URL进行解析和maped，就像直接调用URL来获取带有给定参数的列出的请求一样

我的意思是说我有

/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

首先，您需要通过提及基本网址来创建一个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}]);

Answer 2

您可以使用$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();
}

通过URL映射AngularJS rest API请求

2 个答案: