如何在RESTfulAPI中使用嵌套资源?
How to use nested resources in RESTful API?
我是 REST 新手 API。请帮助我列出所有按用户名排序的相册,如果单击某个用户,则显示该用户的所有相册。这是我到目前为止编写的代码,但它没有告诉我正确的事情。
这些是资源:
http://jsonplaceholder.typicode.com/users
http://jsonplaceholder.typicode.com/albums
这是我写的代码:
var app = angular.module('christmas', ['ngResource']);
app.controller('SecretOperations', ['$scope', '$resource', function($scope, $resource) {
$scope.loadPosts = function() {
var postingsResource = $resource('http://jsonplaceholder.typicode.com/albums/', {});
$scope.postings = postingsResource.query();
postingsResource.query().$promise.then(function(postings){
$scope.postings = postings;
});
var useri = $scope.postings.userId;
var numeUser = $resource('http://jsonplaceholder.typicode.com/users?id=idu', { idu : useri });
$scope.off = numeUser.query();
};
$scope.loadPosts();
}]);
<!DOCTYPE HTML>
<html ng-app="christmas">
<head></head>
<body >
<div class="row" ng-controller="SecretOperations">
<div class="col-md-3 text-center" ng-repeat="album in postings">
<div>
<p class="text-muted">Album title: {{ album.title }}</p>
<p ng-repeat="offof in off"> Author name : {{ offof.name }} </p>
</div>
</div>
</div>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-resource.min.js"></script>
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
<script src="app.js"></script>
</body>
</html>
谢谢
您没有正确使用 $resource
服务。我建议使用 $promise
属性:
postingsResource.query().$promise.then(function (postings) {
$scope.postings = postings;
});
和
nameUser.get().$promise.then(function (user) {
$scope.authorn = user;
});
以后请仔细阅读文档,在这里问标准问题:
https://docs.angularjs.org/api/ngResource/service/$resource
P.S.: 在您的情况下,您可能需要链接两个资源承诺,因为您需要第二个资源中第一个资源的结果。
我是 REST 新手 API。请帮助我列出所有按用户名排序的相册,如果单击某个用户,则显示该用户的所有相册。这是我到目前为止编写的代码,但它没有告诉我正确的事情。
这些是资源:
http://jsonplaceholder.typicode.com/users
http://jsonplaceholder.typicode.com/albums
这是我写的代码:
var app = angular.module('christmas', ['ngResource']);
app.controller('SecretOperations', ['$scope', '$resource', function($scope, $resource) {
$scope.loadPosts = function() {
var postingsResource = $resource('http://jsonplaceholder.typicode.com/albums/', {});
$scope.postings = postingsResource.query();
postingsResource.query().$promise.then(function(postings){
$scope.postings = postings;
});
var useri = $scope.postings.userId;
var numeUser = $resource('http://jsonplaceholder.typicode.com/users?id=idu', { idu : useri });
$scope.off = numeUser.query();
};
$scope.loadPosts();
}]);
<!DOCTYPE HTML>
<html ng-app="christmas">
<head></head>
<body >
<div class="row" ng-controller="SecretOperations">
<div class="col-md-3 text-center" ng-repeat="album in postings">
<div>
<p class="text-muted">Album title: {{ album.title }}</p>
<p ng-repeat="offof in off"> Author name : {{ offof.name }} </p>
</div>
</div>
</div>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-resource.min.js"></script>
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
<script src="app.js"></script>
</body>
</html>
谢谢
您没有正确使用 $resource
服务。我建议使用 $promise
属性:
postingsResource.query().$promise.then(function (postings) {
$scope.postings = postings;
});
和
nameUser.get().$promise.then(function (user) {
$scope.authorn = user;
});
以后请仔细阅读文档,在这里问标准问题:
https://docs.angularjs.org/api/ngResource/service/$resource
P.S.: 在您的情况下,您可能需要链接两个资源承诺,因为您需要第二个资源中第一个资源的结果。