AngularJS對URL路由的更改

我們有一個網站，當前的路由設置爲site.com/products/:id，因此示例URL可能是site.com/products/104。我們不再需要網址中的ID，而是希望改爲實際的產品名稱。所以我們希望它作爲site.com/products/produc-nameAngularJS對URL路由的更改

我們將如何去做這個改變？我們正在使用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}}">

來源

2017-07-17 doctorbighead

只要您的產品名稱都是唯一的，它應該是一個簡單的更改。如果沒有設置路由的代碼和創建鏈接的代碼，沒有人能夠爲您提供很大的幫助。 –

謝謝，編輯了原始問題以包含代碼示例，希望就夠了。 – doctorbighead

因此，基本上，你需要做3件事。

1）改變你的產品狀態，以類似

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

2）改變你的HREF爲類似

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

3）變更ProductController的名字，而不是ID，以尋找您的產品。

顯然，如果productName字段實際上不是productName，則必須相應地進行調整。

來源

2017-07-17 21:06:00

非常感謝，我不知道爲什麼我要找更復雜的東西 - 這解決了我的問題，很好！ – doctorbighead

AngularJS對URL路由的更改

回答

相關問題