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

check this out: http://stackoverflow.com/questions/20655877/angularjs-get-current-url-parameters — Ritesh Waghela, May 02 '14 at 11:30

score 0 · Answer 1 · answered May 02 '14 at 12:05

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 02 '14 at 12:05

Sebastian

16,813
4
49
56

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! – bencarter78 May 02 '14 at 12:33
That shouldn't matter. Maybe add your routing definitions to the question. – Sebastian May 02 '14 at 12:50
I've updated my original post with (what I think you mean by) my routing definitions – bencarter78 May 02 '14 at 12:58
I don't see an obvious error. You could create a Plunker which demonstrates it. – Sebastian May 02 '14 at 13:17

sarunast · Answer 2 · 2014-05-08T10:00:00.490

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

Getting URL parameters using $route

2 Answers2