使用ng repeat根据restful Api检索AngularJS中的帖子(模型关系)注释
编辑:我决定使用Restangular,因为Lodash库似乎与AngularJS配合得很好。我还有一个问题。Restangular的getList()函数期望响应为数组,但是我的服务器响应包含两个参数,其中只有一个是数组。大概是这样的:使用ng repeat根据restful Api检索AngularJS中的帖子(模型关系)注释,angularjs,rest,ngresource,Angularjs,Rest,Ngresource,编辑:我决定使用Restangular,因为Lodash库似乎与AngularJS配合得很好。我还有一个问题。Restangular的getList()函数期望响应为数组,但是我的服务器响应包含两个参数,其中只有一个是数组。大概是这样的: {"error": "false", "topics": [{"id":"1", "title":"someTitle"},{"id":"2", "title":"someTitle2"}]} 我想我会在RestangularProvider.setReso
{"error": "false", "topics": [{"id":"1", "title":"someTitle"},{"id":"2", "title":"someTitle2"}]}
我想我会在RestangularProvider.setResourceInterceptor中设置它,但我不太确定如何设置。有选择吗?我能够从一个.json文件中读取响应,我制作了一个数组,这样至少我知道我读对了。:)
更新:我尝试了此操作,但得到:TypeError:无法设置未定义的属性“metadata”
RestangularProvider.addResponseInterceptor(function (data, operation, what, url, response, deferred) {
var newResponse;
// This is a get for a list
if (operation === "getList") {
// First the newResponse will be response.topics which is actually an array
newResponse = response.topics;
// Then we add to this array a special property containing the metadata for paging for example
newResponse.metadata = response.data.meta;
} else {
// If it's an element, then we just return the "regular" response as there's no object wrapping it
newResponse = response;
}
return newResponse;
});
我对angularJS还很陌生,对于CRUD操作的一些事情仍然不确定。我听到很多人赞扬ngResource,但也有人建议$http更适合于更复杂的模型关系。我这里有一个特别的问题,我想知道是否有人能给我指出正确的方向。对于这个例子,我选择使用ngResource,尽管我不太确定我有多喜欢它的数据处理。关于我的Api,我有两个资源:主题和评论。Api端点如下所示:
http://api.example.com/v1/topics //To get all topics
http://api.example.com/v1/topics/:id //To get a single topic
http://api.example.com/v1/topics/:id/comments //To get all comments for a single topic
我编写了以下代码来获取主题:
app.controller("mainController", function($scope, $resource, $location, $http, localStorageService, requestNotification) {
var Topic = $resource('http://api.discussorama.com/v1/topics/:id', {id: '@id'}, {
query: {
isArray: false,
method: 'GET',
headers: {'X-Api-Secret': 'xxx', 'Authorization': 'xxx', 'Content-Type': 'application/x-www-form-urlencoded'}
}
});
var topics = Topic.query();
topics.$promise.then(function(data){
$scope.topics = data.topics;
});
});
然后在我看来是这样使用的(还没有问题):
{{t.topic_title}}
由{{t.name}发布
{{t.topic\u content}}
我现在要做的是在主题的ng repeat中查询comments Api端点,以显示该特定主题的注释。有没有办法从ng repeat中传递t.id来替换:id in,我该怎么做。我最好还是使用$http,或者ngResource是这个工作的好模块。提前谢谢。所以,在环顾四周之后,我至少知道了我原来问题的答案。而且angularjs真的处理得很好。基本上,通过使用ng repeat将ng控制器添加到项目中,您现在可以逐个项目地玩这些项目。如果有人感兴趣,下面是我的解决方案的完整示例代码
//index.html
<!doctype html/>
<html ng-app="restApp" ng-controller="mainController">
<head>
<title>Get Comments from Topic</title>
</head>
<body>
<div ng-repeat="topic in topics" ng-controller="topicController">
<h1>{{ topic.topic_title }}</h1>
<div ng-repeat="comment in comments">
<h3>{{ comment.comment }}</h3>
<p>{{ comment.author_name }}</p>
</div>
</div>
<script type="text/javascript" src="js/lodash.min.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/restangular.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
如果有人成功地从Restangular.getList()的对象响应中提取了数组,请告诉我。现在,我已经添加了一个API版本,它以数组的形式发送响应来解决这个问题。restanglar()有助于解决这个问题。它可以根据参数为您构造url。这可能需要几个小时的时间来理解它是如何工作的,但我认为这会对你有所帮助。看起来相当健壮,我可能最终会朝这个方向走,但我仍然有兴趣看看是否有人有使用$http或ngResource的经验。不过,还是要谢谢你的提醒!:)Restangular还有其他依赖项,如果可能的话,我希望避免这些依赖项。
//index.html
<!doctype html/>
<html ng-app="restApp" ng-controller="mainController">
<head>
<title>Get Comments from Topic</title>
</head>
<body>
<div ng-repeat="topic in topics" ng-controller="topicController">
<h1>{{ topic.topic_title }}</h1>
<div ng-repeat="comment in comments">
<h3>{{ comment.comment }}</h3>
<p>{{ comment.author_name }}</p>
</div>
</div>
<script type="text/javascript" src="js/lodash.min.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/restangular.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
// app.js
var app = angular.module("restApp", ["restangular"]);
app.config(
function(RestangularProvider){
RestangularProvider.setBaseUrl('http://api.example.com/v1');
RestangularProvider.setDefaultHeaders({"Authorization": "..."});
}
);
app.config(function($httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers
.common['X-Requested-With'];
});
app.controller("mainController", ["Restangular","$scope", function(Restangular, $scope){
$scope.message = "Welcome to REST";
var topics = Restangular.all('topics');
var allTopics = topics.getList().then(function(topics){
$scope.topics = topics;
console.log($scope.topics);
});
}]);
app.controller("topicController", ["Restangular", "$scope", function(Restangular, $scope){
var oneTopic = Restangular.one('topics', $scope.topic.id);
oneTopic.get().then(function(topic) {
topic.getList('comments').then(function(comments){
$scope.comments = comments;
console.log($scope.comments);
});
});
}]);