Getting URL parameters using $route

Question

I have the following url:

http://myurl.dev/users/32

I want to pass the last parameter 32 to a $http.get request but I can't figure out how to pass it.

So far I have this:

var matchmaker = angular.module('matchmaker', ['ngRoute'], function($interpolateProvider) {
    $interpolateProvider.startSymbol('[[');
    $interpolateProvider.endSymbol(']]');
})
.controller('LocationCtrl', ['$scope', '$http', '$location', '$routeParams', '$route', function($scope, $http, $location, $routeParams, $route) {

    var id = $route.current.params.id;

    console.log(id);

    $http.get('http://myurl.dev/services/' + id ).success(function(data) 
    {
        $scope.applicants = data;
    });

}]);

In the console it's saying:

Cannot read property 'params' of undefined

Can anyone tell me what I'm doing wrong please?

Edit:

Angular isn't generating the url, it's a server side generated url

Edit 2.0

Here's the config for the routeProvider with actual route parameters:

var matchmaker = angular.module('matchmaker', ['ngRoute'], function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
})
.config(function($routeProvider, $locationProvider) {
  $routeProvider.when('/matchmaker/locations/:id', {
    controller: 'LocationCtrl'
  });
  $locationProvider.html5Mode(true);
});

You can use $routeParams.id for this.

dfsq
– dfsq

2014-05-02 11:24:12 +00:00
Commented May 2, 2014 at 11:24 — dfsq
– dfsq, Commented May 2, 2014 at 11:24
check this out: stackoverflow.com/questions/20655877/…

Ritesh Waghela
– Ritesh Waghela

2014-05-02 11:30:23 +00:00
Commented May 2, 2014 at 11:30 — Ritesh Waghela
– Ritesh Waghela, Commented May 2, 2014 at 11:30
you have a huge gap between the $ and routeParams

defau1t
– defau1t

2014-05-02 11:31:44 +00:00
Commented May 2, 2014 at 11:31 — defau1t
– defau1t, Commented May 2, 2014 at 11:31

Sebastian · Accepted Answer · 2014-05-02 12:05:56Z

0

Put a console.log($routeParams); in your controller and check its value.

If it is Object {} check if you have a route definition using parameters:

var module = angular.module('ngRouteExample', ['ngRoute']);

module.config(function($routeProvider, $locationProvider) {
  $routeProvider.when('/test/:id', {
    templateUrl: 'test.html',
    controller: 'TestController'
  });

  // configure html5 to get links working on jsfiddle
  $locationProvider.html5Mode(true);
});

If so, you will get this output in the console:

Object {id: "42"}

answered May 2, 2014 at 12:05

Sebastian

17.6k5 gold badges51 silver badges57 bronze badges

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

4 Comments

bencarter78 Over a year ago

I tried this and I still get Object{} in the console. I should have said (although not sure if this matters) that Angular isn't generating the url, it's a server side generated url. Does that make a difference? As you can tell I'm a total Angular noob!

Sebastian Over a year ago

That shouldn't matter. Maybe add your routing definitions to the question.

bencarter78 Over a year ago

I've updated my original post with (what I think you mean by) my routing definitions

Sebastian Over a year ago

I don't see an obvious error. You could create a Plunker which demonstrates it.

sarunast · Accepted Answer · 2014-05-08 10:00:00Z

0

It is because you trying to get value which doesn't exist at that moment, that's how javascript works. You need to specify that you want these values when they are ready using '$routeChangeSuccess' event.

.controller('PagesCtrl', function ($rootScope, $scope, $routeParams, $route) {
    //If you want to use URL attributes before the website is loaded
    $rootScope.$on('$routeChangeSuccess', function () {
        //You can use your url params here
        $http.get('http://myurl.dev/services/' + $routeParams.id )
        .success(function(data) {
            $scope.applicants = data;
        });
    });
});

edited May 8, 2014 at 10:00

answered May 6, 2014 at 13:43

sarunast

2,4433 gold badges29 silver badges38 bronze badges

Collectives™ on Stack Overflow

Getting URL parameters using $route

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related