0
我正在使用Angular用REST数据填充几页,并且列出了我希望链接显示该文章的文章详细信息的文章。基本上,我需要通过传递给它的routeparam过滤用于单个文章的REST调用。
它似乎正在按照预期传递routeparam,但我有一些挑战让REST调用在我的详细信息页面(articles.html)上工作,并且我怀疑我没有获得/匹配我的ID REST调用由routeparam传递的ID。我的第一个REST调用适用于列出所有文章的categories.html页面。我在$ resource中使用Angular的ngResource API。这里是适用的代码:
app.js(路由)
var pfcModule = angular.module('pfcModule', ['ngRoute', 'pfcServices', 'pfcControllers']);
pfcModule.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/home', { templateUrl: './views/home.html'}).
when('/categories', { templateUrl: './views/categories.html', controller: 'pfcCtrl' }).
when('/articles/:articleID', { templateUrl: './views/articles.html', controller: 'pfcCtrl2' }).
otherwise({ redirectTo: '/home' });
}]);
services.js(REST调用)
var pfcServices = angular.module('pfcServices', ['ngResource'])
pfcServices.factory('pfcArticles', ['$resource',
function($resource){
return $resource('https://pfc.azure-mobile.net/tables/articles/:articleID', {});
}]);
controllers.js(控制器)
var pfcControllers = angular.module('pfcControllers', []);
pfcControllers.controller('pfcCtrl', ['$scope', 'pfcArticles', function ($scope, pfcArticles) {
$scope.data = pfcArticles.query();
}]);
pfcControllers.controller('pfcCtrl2', ['$scope', '$routeParams', 'pfcArticles', function ($scope, $routeParams, pfcArticles) {
$scope.data2 = pfcArticles.get({ articleID: $routeParams.articleID });
}]);
categories.html(部分,按预期工作)
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
<table class="table table-striped">
<tr>
<th>ID</th>
<th>Title</th>
<th>Category ID</th>
<th>Link</th>
</tr>
<tr ng-repeat="article in data">
<td>{{article.id}}</td>
<td>{{article.articletitle}}</td>
<td>{{article.articlecategoryid}}</td>
<td><a href="#articles/{{article.id}}">Link</a></td>
</tr>
</table>
</div>
articles.html(部分,不工作,我希望它由routeparam传递的ID过滤)
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
<table class="table table-striped">
<tr>
<th>ID</th>
<th>Title</th>
<th>Category ID</th>
<th>Summary</th>
</tr>
<tr ng-repeat="article in data2">
<td>{{article.id}}</td>
<td>{{article.articletitle}}</td>
<td>{{article.articlecategoryid}}</td>
<td>{{article.articlesummary}}</td>
</tr>
</table>
</div>