Как сделать угловую маршрутизацию с названием вместо id?

Question

Я создаю блог с угловыми и в настоящее время работаю над маршрутами. У меня есть маршруты, работающие с routeParams, но угловые дают ему случайное число, а конец URL-адреса - http://localhost/kensproblems/#/posts/2

Я хочу, чтобы он автоматически захватывал заголовок и использовал его в качестве параметра в URL-адресе или использовал свойство id на json файл, такой как http://localhost/kensproblems/#/posts/title-of-post

Возможно ли это с $routeParams?

app.js

angular.module('app', [ 
    'ngRoute', 
    'app.controllers', 
    'ui.router', 
    'ngSanitize' 
]) 

.config(['$routeProvider', '$urlRouterProvider', function($routeProvider, $urlRouterProvider){ 
    $routeProvider 
    .when('/posts', { 
     templateUrl: 'views/posts.html', 
     controller: 'PostListController' 
    }) 
    .when('/posts/:id', { 
     templateUrl: 'views/singlepost.html', 
     controller: 'PostDetailController' 
    }) 
     .otherwise({ 
     redirectTo: '/' 
    }); 
}]); 

controllers.js

angular.module('app.controllers', ['app.directives']) 
    /* Controls the Blog */ 
    .controller('PostListController', ['$scope', '$http', function($scope, $http){ 
     $http.get('data/posts.json').success(function(response){ 
      $scope.posts = response; 
     }); 
    }]) 

    .controller('PostDetailController', ['$scope', '$http', '$routeParams', '$sce', function($scope, $http, $routeParams, $sce){ 
     $http.get('data/posts.json').success(function(response){ 
      $scope.post = response[$routeParams.id]; 
      console.log($routeParams.id); 
      console.log($scope.post.id); 
     }); 
    }]) 

posts.html

<div class="container" id="postList"> 
    <div class="row"> 
     <div class="col-md-10 col-md-offset-1"> 
      <div ng-repeat="post in posts | orderBy:post.date" class="post"> 
       <h2 class="blog-title"><a href="#/posts/{{posts.indexOf(post)}}">{{post.title}}</a></h2> 
       <span class="date">Posted on {{post.date | date:'MMM dd, yyyy'}}</span> 
       <div class="row top10"> 
        <div class="col-md-8"> 
         <div class="post-content">{{post.headline}}</div> 
         <a class="read-more" href="#/posts/{{posts.indexOf(post)}}">Read more</a> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

singlepost.html

<div class="container" id="singlePost"> 
    <div class="row"> 
     <div class="col-md-10 col-md-offset-1"> 
      <h1>{{post.id}}</h1> 
      <h1>{{post.title}}</h1> 
      <span class="date">Posted on {{post.date | date:'MMM dd, yyyy'}}</span> 

      <h3>{{post.headline}}</h3> 
      <div class="postContent" ng-bind-html="post.content"></div> 
     </div> 
    </div> 
</div> 

Answer 1

Вам нужно будет изменить две основные вещи, первое, как генерируются URL-адреса, а второй, как восстанавливается пост.

Сформировать URL из названия

Не любое название будет действовать, как URL, так что вам нужно использовать slugs.

По мнению:

<a class="read-more" href="#/posts/{{getSlug(post.title)}}">Read more</a> 

В контроллере:

$scope.getSlug = function(text){ 
    return text.replace(/\W+/g, '-'); 
}; 

Поиск сообщению от слизняка

В настоящее время, вы только извлечение пост из массива в качестве индекса , что является концептуально неправильным (вы заметите это после удаления одного сообщения). Вместо этого выполните поиск по массиву. Это будет очень просто, если вы используете lodash.

Что-то, как это будет работать:

$scope.post = _.find(response, function(post) { 
    return post.title.replace(/\W+/g, '-') === $routeParams.id; 
}); 

Answer 2

Stack Overflow не позволит мне прокомментировать еще, так что я выложу здесь. Мне кажется, что вы передаете индекс сообщения в массиве вместо одного из свойств. Посмотрите на изменение:

href="#/posts/{{posts.indexOf(post)}}" 

Чтобы что-то вроде:

ng-href="#/posts/{{post.title}}"