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

Answer 1

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

Answer 2

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>