1

Per this post, I am trying to use two parameters in an URL string to link to an individual result in a REST call:

Set URL to SEO Friendly Title with Dashes instead of ID

My list of articles and links populate as expected, but once a link is clicked on to retrieve the details of an individual article, it doesn't resolve. I suspect it is how I am "getting" my routeparams. It works if I declare a single route param, but I need both the id and title of the article to ensure uniqueness.

Controllers.js

var pfcControllers = angular.module('pfcControllers', []);

pfcControllers.controller('pfcCtrl', ['$scope', 'pfcArticles', function ($scope, pfcArticles) {
    $scope.articles = pfcArticles.query();
}]);

pfcControllers.controller('pfcCtrl2', ['$scope', '$routeParams', 'pfcArticles', function ($scope, $routeParams, pfcArticles) {
    $scope.article = pfcArticles.get({ articleID: $routeParams.articleID, articleTitle: $routeParams.articleTitle });
}]);

App.js

var pfcModule = angular.module('pfcModule', ['ngRoute', 'ui.bootstrap', 'pfcServices', 'pfcControllers']);

pfcModule.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
    when('/home', { templateUrl: './views/home.html'}).
    when('/categories', { templateUrl: './views/categories.html', controller: 'pfcCtrl' }).
    when('/article/:articleTitle/:articleID', { templateUrl: './views/article.html', controller: 'pfcCtrl2' }).
    otherwise({ redirectTo: '/home' });
}]);

Services.js

var pfcServices = angular.module('pfcServices', ['ngResource'])

pfcServices.factory('pfcArticles', ['$resource', function ($resource) {
    return $resource('https://myrestcall.net/tables/articles/:articleTitle/:articleID', { articleTitle: '@articletitle', articleID: '@id' });
}]);

Articles.html

    <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 articles">
            <td>{{article.id}}</td>
            <td>{{article.articletitle}}</td>
            <td>{{article.articlecategoryid}}</td>
            <td><a href="#article/{{article.articletitle}}/{{article.id}}">{{article.articletitle}}</a></td>
        </tr>
    </table>
</div>

Article.html (This is the one that is not resolving/matching the routeparams. It works for a single routeparam but not two)

<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>
            <td>{{article.id}}</td>
            <td>{{article.articletitle}}</td>
            <td>{{article.articlecategoryid}}</td>
            <td>{{article.articlesummary}}</td>
        </tr>
    </table>
</div>

Community
  • 1
  • 1
Kode
  • 3,073
  • 18
  • 74
  • 140
  • First, could you set up a plunker/jsFiddle? Second, if you need parameters in the URL you could just use the $location.search service and get/set parameters with it. The only difference is it would be at the end of the URL and following a "?" – SoluableNonagon Dec 19 '14 at 18:45
  • 1
    Put the ID before the title in the URL, then just extract the ID and treat the title as junk. You'll want to retrieve the title from the database instead. – Blazemonger Dec 19 '14 at 18:47
  • @Blazemonger, that works. I have a friendly URL and a unique call via the ID – Kode Dec 19 '14 at 19:00
  • 1
    Exactly -- the title may be edited later, or it might get cut off halfway, or for social media may be removed entirely. In that case, you should add a [canonical URL](https://support.google.com/webmasters/answer/139066) to each page so Google doesn't index every possible URL. (StackOverflow does this too!) – Blazemonger Dec 19 '14 at 19:21

0 Answers0