AngularJs使用参数进行路由

时间:2016-10-01 21:59:17

标签: angularjs routing ngroute

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

E.g。我喜欢点击产品并按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喜欢路由到产品/ {{id}}。html ...

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

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

2 个答案:

答案 0 :(得分:20)

2件事,但你基本上就在那里。

首先,您在URL参数之前缺少斜杠。发生在我们最好的人身上。

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

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

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

答案 1 :(得分:7)

我认为此问题重复,请参阅回复enter image description here

您可以将参数作为主页发送到州名({foo:'fooVal1',bar:'barVal1'}) 用网址'/:foo?bar' 看这个例子:

{{1}}

并将值发送为:

{{1}}