AngularJs 带参数的路由

Question

有人可以解释我如何使用参数路由到 Url 吗？

例如id 喜欢点击一个产品并通过 Id 打开该产品的更多信息。

到目前为止我的路由...

        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}}。html ...

有人可以告诉我我在...

中遗漏了什么吗

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

Answer 1

2件事，但你基本上都在。

首先，您在 URL 参数之前缺少一个斜线。发生在我们最好的人身上。

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

其次，当你有动态 URL 参数时，你应该使用 ng-href 而不是 href。

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

Answer 2

我认为这个问题是重复的，请参阅回复 How to pass parameters using ui-sref in ui-router to controller

您可以将参数发送到 state name as home({foo: 'fooVal1', bar: 'barVal1'}) 带有 url '/:foo?bar' 看这个例子：

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

        },
        ...
      }

并将值发送为：

<a ui-sref="home({foo: 'fooVal1', bar: 'barVal1'})">

AngularJs 带参数的路由

AngularJs Routing with parameters

routing

angularjs

ngroute