web-dev-qa-db-fra.com

Routage AngularJs avec paramètres

Quelqu'un peut-il expliquer comment je peux router vers une URL à l'aide de paramètres?

Par exemple. id aime cliquer sur un produit et ouvrir plus d'informations sur le produit par Id.

Mon routage jusqu'à présent ...

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

        });

Donc en cliquant ...

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

Je voudrais être routé vers le produit/{{id}}. Html ...

Quelqu'un peut-il me dire ce qui me manque ...

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

2 choses, mais vous êtes fondamentalement là.

Vous manquez d'abord une barre oblique avant le paramètre d'URL. Cela arrive aux meilleurs d'entre nous.

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

Deuxièmement, vous devez utiliser ng-href à la place de href lorsque vous avez des paramètres d'URL dynamiques.

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

Je pense que ce problème est en double, voir la réponse Comment passer des paramètres en utilisant ui-sref dans ui-router au contrôleur

vous pouvez envoyer des paramètres pour indiquer le nom comme domicile ({foo: 'fooVal1', bar: 'barVal1'}) avec une URL '/: foo? bar' voir cet exemple:

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

        },
        ...
      }

et envoyer des valeurs comme:

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