2017-07-17 6 views
0

Wir haben eine Website, auf der derzeit das Routing auf site.com/products/:id eingerichtet ist. Eine Beispiel-URL lautet daher möglicherweise site.com/products/104. Wir wollen nicht mehr die ID in der URL und möchten stattdessen den tatsächlichen Produktnamen. Also würden wir es wollen site.com/products/produc-nameAngularJS Änderungen am URL-Routing

Wie würden wir über diese Änderung gehen? Wir verwenden UI-Router. Ich bin mir nicht sicher, welche anderen Informationen benötigt werden, also frag bitte weg. Suchen Sie irgendeine Anleitung, die Sie geben können. Vielen Dank.

Der Router ist:

.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' 
 
       })

und dann das Produkt zu nennen, die wir verwenden

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

+1

Es sollte eine einfache Änderung sein, vorausgesetzt, Ihre Produktnamen sind alle einzigartig. Ohne den Code, der deine Routen einrichtet, und den Code, der die Links zu ihnen erstellt, wird dir niemand mehr helfen können. –

+0

Danke, die ursprüngliche Frage bearbeitet, um Code-Beispiele aufzunehmen, hoffe, dass das reicht. – doctorbighead

Antwort

0

Also im Grunde, müssen Sie Mach 3 Dinge.

1) Ändern Sie Ihr Produkt Zustand zu so etwas wie

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

2) ändern, um Ihre hrefs zu so etwas wie

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

3) Ändern Product, um Ihre Produkte mit Namen anstatt die ID zu finden.

Offensichtlich, wenn das Feld productName nicht eigentlich productName ist, müssen Sie entsprechend anpassen.

+0

Vielen Dank, ich weiß nicht, warum ich nach etwas komplizierterem suchte - das löste mein Problem gut! – doctorbighead

Verwandte Themen