自定义 URL 使用 Angular ngResource
Custom URL using Angular ngResource
我想知道连接我的 API 的最佳实践,因为它的工作方式如下:
- GET -> products/list/latest -> return 最新产品列表
- GET -> products/list/热门 -> return 热门产品列表
- GET -> products/list/trending -> return 热门产品列表
然后当我想要每个产品的详细信息时,它只是:
获取 -> 产品/:id
我在 services.js 中得到以下代码:
.factory('ProductService', function ($resource) {
return $resource('http://domainname.com/api/products/:product',{product: "@product"});
})
但我真的不知道如何访问这些自定义 URL。我可以为此使用 ngResource 吗?
谢谢!
请看这里https://docs.angularjs.org/api/ngResource/service/$resource
您可以向 ngResources 添加自定义操作
即:
var app = angular.module('app', ['ngResource']);
app.factory('ProductService', function($resource) {
var actions = {
'latest': {
method: 'GET',
url: 'api/products/latest '
},
'popular': {
method: 'GET',
url: 'api/products/popular'
},
'trending': {
method: 'GET',
url: 'api/products/trending '
}
};
var ProductService = $resource('/api/products/:productId', {ProductId: '@id'}, actions);
return ProductService;
});
app.controller('MainCtrl', function($scope, ProductService) {
$scope.name = 'World';
ProductService.latest();
ProductService.popular();
ProductService.trending();
ProductService.query();
ProductService.get({id: 1});
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-resource.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
</body>
</html>
我想知道连接我的 API 的最佳实践,因为它的工作方式如下:
- GET -> products/list/latest -> return 最新产品列表
- GET -> products/list/热门 -> return 热门产品列表
- GET -> products/list/trending -> return 热门产品列表
然后当我想要每个产品的详细信息时,它只是:
获取 -> 产品/:id
我在 services.js 中得到以下代码:
.factory('ProductService', function ($resource) {
return $resource('http://domainname.com/api/products/:product',{product: "@product"});
})
但我真的不知道如何访问这些自定义 URL。我可以为此使用 ngResource 吗?
谢谢!
请看这里https://docs.angularjs.org/api/ngResource/service/$resource
您可以向 ngResources 添加自定义操作
即:
var app = angular.module('app', ['ngResource']);
app.factory('ProductService', function($resource) {
var actions = {
'latest': {
method: 'GET',
url: 'api/products/latest '
},
'popular': {
method: 'GET',
url: 'api/products/popular'
},
'trending': {
method: 'GET',
url: 'api/products/trending '
}
};
var ProductService = $resource('/api/products/:productId', {ProductId: '@id'}, actions);
return ProductService;
});
app.controller('MainCtrl', function($scope, ProductService) {
$scope.name = 'World';
ProductService.latest();
ProductService.popular();
ProductService.trending();
ProductService.query();
ProductService.get({id: 1});
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-resource.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
</body>
</html>