Angular $routeParams empty object

Question

I'm trying to get a query value from my url using angular's routeParams.

I've included angular-route in my html page:

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.min.js"></script>

Included Ng-Route in my app:

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

And set up my controller as following:

var reportController = angular.module('reportController', []);
reportController.controller('CandidateCtrl', ['$scope', '$routeParams',
        function($scope, $routeParams) {
    console.log(JSON.stringify($routeParams, null, 4));
    $scope.person = $routeParams.person;
}]);

When I access the following URL, however, routeParams is an empty object: {}.

http://localhost:8080/report?person=afe75cc7-fa61-41b3-871d-119691cbe5ad

What am I doing wrong?

Edit:

I've configure the possible route - my routeParams object is still coming up null. I've tried:

famaApp.config(['$routeProvider', function($routeProvider) {
           $routeProvider.
            when('/report:person', {templateUrl: 'Report.html', controller: 'CandidateCtrl'});
}]);

and

when('/report?person', {templateUrl: 'Report.html', controller: 'CandidateCtrl'});

You have to configure the parameters that are valid for that route. — Oliver, Sep 10 '15 at 15:47
As someone already said, you need to first configure your routes and parameters in order to get them. Possible duplicate of this one http://stackoverflow.com/a/22718007/138624 — Teknotica, Sep 10 '15 at 15:50

score 1 · Accepted Answer · answered Sep 10 '15 at 16:06

1

Rather then accessing like http://localhost:8080/report?person=afe75cc7-fa61-41b3-871d-119691cbe5ad

try to access it like http://localhost:8080/#/report/afe75cc7-fa61-41b3-871d-119691cbe5ad

you will get the guid in $route.Params

answered Sep 10 '15 at 16:06

maddygoround

2,145
2
20
32

score 0 · Answer 2 · answered Sep 10 '15 at 15:59

You have to set your routes to receive the arguments you want with $routeProvider..

Example:

app.config(['$routeProvider', '$locationProvider' function ($routeProvider, $locationProvider) {

    $routeProvider
        .when('/',
        {
            templateUrl: 'someHtmlUrl',
            controller: 'someController',
            controllerAs: 'someCtrl',
            caseInsensitiveMatch: true
        })
        .when('/:person',
        {
            templateUrl: 'someHtmlUrl',
            controller: 'someController',
            controllerAs: 'someCtrl',
            caseInsensitiveMatch: true
        })
        .otherwise(
        {
            templateUrl: 'someHtmlUrl'
        });
    $locationProvider.html5Mode(true); //Use html5Mode so your angular routes don't have #/route
}]);

Then you can just do

http://localhost:8080/afe75cc7-fa61-41b3-871d-119691cbe5a

And the $routeProvider will call your html and your controller as you can see with the .when('/:person'.. and then you can try and access your $routeParams and you will have your person there, $routeParams.person.

If using $locationProvider.html5Mode, you need to have a in your index, unless specified $locationProvider.html5Mode({ enabled: true, requireBase: false }); — Harben, Sep 10 '15 at 16:03

Angular $routeParams empty object

2 Answers2