2016-10-01 3 views
8

Может ли кто-нибудь объяснить, как я могу маршрутизировать URL-адрес с использованием параметров?AngularJs Маршрутизация с параметрами

E.g. id хотел бы нажать на продукт и открыть дополнительную информацию о продукте по идентификатору.

Мои Routing до сих пор ...

 angular.module('shop', ["customFilters", "cart", "ngRoute"]) 
     .config(function ($routeProvider){ 

      $routeProvider.when("/complete", { 
       templateUrl: "../app/views/orderComplete.html" 
      }); 

      $routeProvider.when("/placeorder", { 
       templateUrl: "../app/views/placeOrder.html" 
      }); 

      $routeProvider.when("/checkout", { 
       templateUrl: "../app/views/checkoutSummary.html" 
      }); 

      $routeProvider.when("/products", { 
       templateUrl: "../app/views/productList.html" 
      }); 

      $routeProvider.when("/product:", { 
       templateUrl: "../app/views/product.html" 
      }); 

      $routeProvider.otherwise({ 
       templateUrl: "../app/views/productList.html" 
      }); 

     }); 

Так Щелкнув ...

<a class="btn btn-default" href="#/product/{{item.id}}">More Info</a> 

Id любят быть направлены на продукт/{{ID}}. HTML ...

Может кто-то посоветовать, что мне не хватает в ...

 $routeProvider.when("/product:id", { 
      templateUrl: "../app/views/product.html" 
     }); 
+0

use https://github.com/angular-ui/ui-router – malix

ответ

13

2 вещи, но вы в основном там.

Сначала вы не видите косой черты перед параметром URL. Бывает с нами.

routeProvider.when("/product/:id", { 
    templateUrl: "../app/views/product.html" 
}); 

Во-вторых, вы должны использовать ng-href вместо href, когда у вас есть динамические параметры URL.

<a ng-href="#/product/{{item.id}}">More Info</a> 
+0

Спасибо, чувак, дополнительная пара глаз всегда является ключом после часов по кодированию. Цените помощь @enzey! – ClarkySmiverz77

+0

У меня есть вопрос, что делать, если у вас/продукт/новый ... как вы его добавите? –

3

Я считает этот вопрос Дубликат см ответ How to pass parameters using ui-sref in ui-router to controller

вы можете отправить paramters с государственным именем дома ({Foo: 'fooVal1', бар: 'barVal1'}) с URL ' /: Foo бар» посмотреть Exemple:

$stateProvider 
    .state('home', { 
     url: '/:foo?bar', 
     views: { 
     '': { 
      templateUrl: 'tpl.home.html', 
      controller: 'MainRootCtrl' 

     }, 
     ... 
     } 

и отправить значения, как:

<a ui-sref="home({foo: 'fooVal1', bar: 'barVal1'})"> 
Смежные вопросы