URLルーティングに対するAngularJSの変更

Question

現在、ルーティングがsite.com/products/:idに設定されているため、サンプルURLはsite.com/products/104です。 URLにIDが不要になり、代わりに実際の商品名が必要になります。だから我々はそれを望んでいるだろうsite.com/products/produc-name

どうすればこの変更を行うだろうか？我々はui-routerを使用しています。他にどんな情報が必要なのか分かりませんので、遠慮なくご相談ください。あなたが与えることができるガイダンスを求めている。ありがとうございました。

ルータは次のとおりです。製品を呼び出すために、その後

.module('app', ['ui.router', 'ngCookies', 'ngSanitize', 'ngTouch']) 
 
      .config(config) 
 
      .run(run); 
 
    config.$inject = ['$stateProvider', '$urlRouterProvider', '$authProvider', '$locationProvider']; 
 
    function config($stateProvider, $urlRouterProvider, $authProvider, $locationProvider) { 
 
     $stateProvider 
 
       .state('home', { 
 
        url: '/', 
 
        controller: 'HomeController', 
 
        templateUrl: 'app/components/home/home.html', 
 
        resolve: { 
 
         alreadyLoggedIn: alreadyLoggedIn 
 
        } 
 
       }) 
 
       .state('product', { 
 
        url: '/product/:id', 
 
        controller: 'ProductController', 
 
        title: "Product", 
 
        templateUrl: 'app/components/product/product.html', 
 
        controllerAs: 'vm' 
 
       })

そして、私たちは、そこで、基本的、必要に

<a ng-href="/#/product/{{::value.id}}">

Answer 1

を使用します3つのことをする。

1）は、名前ではなくIDで貴社の製品を見つけるために、変更ProductController）

<a ng-href="/#/product/{{::value.productName}}"> 

3のような何かにあなたのhrefを変更）

.state('product', { 
    url: '/product/:productName', 
    controller: 'ProductController', 
    title: "Product", 
    templateUrl: 'app/components/product/product.html', 
    controllerAs: 'vm' 
    }) 

2のようなものに製品の状態を変更します。

明らかにproductNameフィールドが実際にproductNameでない場合は、それに応じて調整する必要があります。