AngularJS – 使用$resource.query和params对象

在本文中，我们将介绍如何使用AngularJS中的 $resource.query方法和params对象。$ resource是AngularJS内置的RESTful服务，用于与服务器进行交互。

什么是$resource.query方法和params对象

在AngularJS中，$resource.query方法是用于从服务器获取数据集合的方法。它发送一个GET请求至指定的URL，并返回一个包含响应数据的数组。

而params对象是用于传递参数给服务端的对象。我们可以向params对象中添加一些属性，这些属性的值将被作为查询参数传递到服务端。

如何使用$resource.query方法和params对象

首先，在使用$resource.query方法和params对象之前，我们需要先定义一个服务。

app.factory('Product', function( $resource) { return$ resource('/api/products/:id', { id: '@id' });
});

上面的代码定义了一个名为Product的服务，它将请求发送至/api/products/:id的URL。我们将使用:params语法来指定URL参数。

接下来，我们可以在控制器中使用这个服务来获取数据集合。

app.controller('ProductCtrl', function( $scope, Product) {$ scope.products = [];

   $scope.getProducts = function() {$ scope.products = Product.query();
  };
});

上面的代码中，我们在控制器中注入了Product服务，并在作用域中定义了一个getProducts函数，用于获取数据集合。
以后，我们只需要调用getProducts函数，就可以获取到服务端返回的数据。

现在，我们来看看如何使用params对象传递参数。

app.controller('ProductCtrl', function( $scope, Product) {$ scope.products = [];

   $scope.getProductsByCategory = function(category) {$ scope.products = Product.query({ category: category });
  };
});

上面的代码中，我们在调用Product.query方法时，向params对象中添加了一个category属性，它的值是传递给服务端的查询参数。

在HTML模板中，我们可以这样使用getProductsByCategory函数：

<button ng-click="getProductsByCategory('electronics')">Get Electronics</button>

当点击按钮时，它会调用getProductsByCategory函数，并传递’electronics’作为参数。服务端将返回所有分类为’electronics’的产品。

示例

现在，让我们通过一个示例来展示如何使用$resource.query方法和params对象。

假设我们要构建一个电商网站，有一个产品列表页面，我们可以在页面上选择一个产品分类，并点击按钮获取该分类下的产品列表。

首先，我们需要创建一个Product服务，用于获取产品列表。

app.factory('Product', function( $resource) { return$ resource('/api/products/:category', { category: '@category' });
});

然后，在控制器中注入Product服务，并定义一个函数来获取产品列表。

app.controller('ProductCtrl', function( $scope, Product) {$ scope.products = [];
   $scope.selectedCategory = '';$ scope.getProductsByCategory = function() {
     $scope.products = Product.query({ category:$ scope.selectedCategory });
  };
});

最后，在HTML模板中，我们可以使用下拉列表选择产品分类，并绑定选中的分类到$scope.selectedCategory。

<select ng-model="selectedCategory">
  <option value="electronics">Electronics</option>
  <option value="clothing">Clothing</option>
  <option value="home">Home</option>
</select>

<button ng-click="getProductsByCategory()">Get Products</button>

<div ng-repeat="product in products">
  <h4>{{ product.name }}</h4>
  <p>{{ product.description }}</p>
</div>

当我们选择一个分类，并点击”Get Products”按钮时，它会调用getProductsByCategory函数，并传递选中的分类作为参数。服务端返回该分类下的产品列表，并在页面上显示出来。