带参数的AngularJs路由 [英] AngularJs Routing with parameters

问题描述

有人可以解释我如何使用参数路由到网址吗?

Can someone explain how I can route to a Url using parameters?

例如id喜欢单击某个产品，并通过ID打开该产品的更多信息.

E.g. id like to click on a product and open more info of the product by Id.

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

My Routing so far ...

        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"
            });

        });

因此，通过单击...

So By clicking ...

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

id喜欢被路由到product/{{id}}.html ...

Id like to be routed to product/{{id}}.html ...

有人可以告诉我...中缺少的东西吗

Can someone advise what I am missing in ...

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

推荐答案

2件事，但是您基本上就在那.

2 things, but you are basically there.

首先，您在URL参数前缺少斜杠.属于我们最好的人.

First you are missing a slash before the URL param. Happens to the best of us.

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

第二，当您具有动态URL参数时，应使用ng-href代替href.

Secondly you should use ng-href instead href when you have dynamic URL params.

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

这篇关于带参数的AngularJs路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！