AngularJs Routing with parameters

Question

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

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

use github.com/angular-ui/ui-router

malix
– malix

2016-10-03 15:08:30 +00:00
Commented Oct 3, 2016 at 15:08 — malix
– malix, Commented Oct 3, 2016 at 15:08

Enzey · Accepted Answer · 2016-10-01 22:09:31Z

21

2 things, but you are basically there.

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

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

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

answered Oct 1, 2016 at 22:09

Enzey

5,2541 gold badge20 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ClarkySmiverz77 Over a year ago

Thanks dude, an extra pair of eyes is always the key after hours on coding. Appreciate the help @enzey!

Alberto Acuña Over a year ago

i have a question, what if you have /product/new ... how do you add it?

Community · Accepted Answer · 2017-05-23 11:55:19Z

8

I thinks this issue is duplicate, see response How to pass parameters using ui-sref in ui-router to controller

you can send paramters to state name as home({foo: 'fooVal1', bar: 'barVal1'}) with a url '/:foo?bar' see this exemple:

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

        },
        ...
      }

and send values as:

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

edited May 23, 2017 at 11:55

CommunityBot

11 silver badge

answered Oct 1, 2016 at 22:19

You.baddi

1879 bronze badges

Collectives™ on Stack Overflow

AngularJs Routing with parameters

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related