web-dev-qa-db-ja.com

パラメーターを使用したAngularJsルーティング

パラメータを使用して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>

Product/{{id}}。htmlにルーティングしたい...

誰かが私に欠けているものをアドバイスできますか...

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

2つのことですが、あなたは基本的にそこにいます。

最初に、URLパラメーターの前にスラッシュがありません。最善を尽くします。

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

第二に、動的URLパラメーターがある場合は、hrefの代わりにng-hrefを使用する必要があります。

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

この問題は重複していると思います、応答を参照してください i-routerのui-srefを使用してパラメーターをコントローラーに渡す方法

uRLが「/：foo？bar」のhome（{foo： 'fooVal1'、bar： 'barVal1'}）として状態名にパラメーターを送信できます。次の例を参照してください。

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

        },
        ...
      }

値を次のように送信します。

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