get Id from the path in angular controller

Question

Following is my $routeProvider.when

.when("/products/:id",{
        templateUrl:"app/views/product.html",
        controller:"productController"
    })

I want to access the value of :id in the product controller.

Based on which i will populate product details.

the url is /index.html#/products/3

mihkov · Accepted Answer · 2016-04-17 15:13:40Z

2

You can use $routeParams.id in your controller.

answered Apr 17, 2016 at 15:13

mihkov

1,21917 silver badges41 bronze badges

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

2 Comments

MARKAND Bhatt Over a year ago

This worked. But a bit confused on passing $routeParam. Whether it should be app.controller('productController', [$routeParams,function ($scope, $http) {}]); or app.controller('productController', function ($scope, $http, $routeParams) {});

mihkov Over a year ago

It's little strange but I use it like this: app.controller('productController', [$routeParams, $scope, $http, function ($routeParams, $scope, $http) { }]); Beware when using it parameters order is important!

Pankaj Parkar · Accepted Answer · 2016-04-17 15:15:02Z

2

You can access it in your controller with $routeParams

app.controller('productController', function ($scope, $routeParams) {
  $scope.productId = $routeParams.id;
};

Comments

Ori Drori · Accepted Answer · 2016-04-17 15:19:46Z

2

Inject $routeParams to your controller factory function.

.controller('MainController', function($scope, $routeParams) {
     $scope.id= $routeParams.id;
})

edited Apr 17, 2016 at 15:19

answered Apr 17, 2016 at 15:11

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

Use the $location service

To access any part of a path you need to use the $location service. It lets you use different parts of the url. For instance (From docs)

// given url http://example.com/#/some/path?foo=bar&baz=xoxo
var url = $location.url();
// => "/some/path?foo=bar&baz=xoxo"

But what you want is this

// given url http://example.com/#/some/path?foo=bar&baz=xoxo
var path = $location.path();
// => "/some/path"

This will return a string that is everything after the #

so then you can Use slice or some other JS function to get the part you need.

Best of luck

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 17, 2016 at 15:09

Joe Lloyd

22.8k7 gold badges59 silver badges86 bronze badges

Collectives™ on Stack Overflow

get Id from the path in angular controller

4 Answers 4

2 Comments

Comments

Comments

Use the $location service

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Use the $location service

Comments

Your Answer

Sign up or log in

Post as a guest

Related