Angular $routeParams is blank

Question

I have a really simple Angular app that I've distilled to the following:

var napp = angular.module('Napp',['ngResource']);

var CompanyCtrl = function($scope, $routeParams, $location, $resource) {
    console.log($routeParams);
};


napp.config(['$routeProvider', function($routeProvider) {
    $routeProvider
    .when('/company/edit/:id', 
      {templateUrl: '/partials/edit', controller: 'CompanyCtrl'}
    );
}]);

and the HTML:

<div ng-controller="CompanyCtrl"></div>

When I log $routeParams, it comes up blank. When I use .otherwise(), it will load whatever I've specified there. Any idea what I'm missing?

See if this addresses your issue: http://deansofer.com/posts/view/14/AngularJs-Tips-and-Tricks-UPDATED#routing — Mark Rajcok, Jun 11 '13 at 19:03
$route is just like $routeprovider so inject $route in the controller definition and try to print above value — Ajay Beniwal, Jun 11 '13 at 19:06
This is what I see: http://wes.io/PaDD — Injecting it like this: http://wes.io/PZi7 — wesbos, Jun 11 '13 at 19:16
$routeParams isn't going to be available to your controller's constructor when it's called. Inject it when you need it -- don't assume you have context-sensitive information when a controller is being instantiated -- use the context-sensitive stuff when it's being linked. — laurelnaiad, Jun 20 '13 at 05:56

joakimbl · Answer 1 · 2013-06-17T18:49:04.537

You have a couple of errors:

You've specified the controller in two places, both in the view (<div ng-controller="CompanyCtrl"></div>) and in $routeProvider (.when('/company/edit/:id', {templateUrl: '/partials/edit', controller: 'CompanyCtrl'}). I'd remove the one in the view.
You have to register the controller in the module when specifying it in the $routeProvider (you should really do this anyway, it's better to avoid global controllers). Do napp.controller('CompanyCtrl', function ... instead of var CompanyCtrl = function ....
You need to specify a ng-view when you're using the $route service (not sure if you're doing this or not)

The new code:

var napp = angular.module('Napp', ['ngResource']);

napp.controller('CompanyCtrl', function ($scope, $routeParams, $location, $resource) {
  console.log($routeParams);
});

napp.config(['$routeProvider', function ($routeProvider) {
  $routeProvider
    .when('/company/edit/:id',
      {templateUrl: '/partials/edit', controller: 'CompanyCtrl'}
    );
}]);

The template (/parials/edit)

<div> ... </div>

And the app (index.html or something)

... <body> <div ng-view></div> </body>

I've created a working plunker example: http://plnkr.co/edit/PQXke2d1IEJfh2BKNE23?p=preview

using ng-view when using the $route service was a big thing i needed to understand but wasn't apparent to me. Also i never realized that when using routing you only should declare the controller in the $routeProvider and not also in the view. makes sense. thanks! — FireDragon, Apr 25 '14 at 22:18

score 9 · Accepted Answer · answered Jun 17 '13 at 18:45

9

First of all try this with

$locationProvider.html5Mode(true);

That should fix your starting code. Then adjust your code to support non-pushState browsers.

Hope this helps!

answered Jun 17 '13 at 18:45

vladikoff

1,496
1
14
25

4

How and where to use it? – Sami Oct 29 '15 at 11:47

score 3 · Answer 3 · answered Jun 18 '13 at 19:39

Not sure if this helps, but I just came across this issue myself, and found that I couldn't log the route params until I had something bound to them.
So,

Router:

var myApp = angular.module('myApp', []);
myApp.config(function($routeProvider){

  $routeProvider.when('/projects/:id', 
    {templateUrl: '/views/projects/show.html', controller: 'ProjectCtrl'}
  );

});

Controller:

myApp.controller('ProjectCtrl', function($scope, $routeParams){
  $scope.id = $routeParams.id;
  console.log('test');
});

View:

<h1>{{ id }}</h1>

When I removed the '{{id}}' from the view, nothing was logged and $routeParams was empty, at least at the time of the controller's instantiation. As some of the answers above have pointed to, the route params are passed in asynchronously, so a controller with no bindings to that property won't execute. So, not sure exactly what you've distilled your snippet down from, but hope this helps!

score 2 · Answer 4 · edited May 23 '17 at 12:17

2

This may happen (not in the OP's case) if you're using ui-router instead of ngRoute.

If that's the case, use $stateParams instead of $routeParams.

https://stackoverflow.com/a/26946824/995229

edited May 23 '17 at 12:17

Community

1
1

answered Sep 06 '15 at 18:43

Kof

23,893
9
56
81

score 2 · Answer 5 · answered Jul 10 '16 at 02:43

2

Of course it will be blank. RouteParams is loaded asynchronously so you need to wait for it to get the params. Put this in your controller:

$scope.$on('$routeChangeSuccess', function() {
   console.log($routeParams); 
});

answered Jul 10 '16 at 02:43

Dũng Trần Trung

6,198
3
24
20

score 0 · Answer 6 · answered Jun 17 '13 at 19:03

It works for me http://plunker.co/edit/ziLG1cZg8D8cYoiDcWRg?p=preview

But you have some errors in your code:

Your don't seem to have a ngView in your code. The $routeProvider uses the ngView to know where it should insert the template's content. So you need it somewhere in your page.
You're specifying your CompanyCtrl in two places. You should specify it either in the $routeProvider, or in you template using ng-controller. I like specifying it in the template, but that's just personal preference.
Although not an error, you're specifying your CompanyCtrl in the global scope, instead of registering it on your Napp module using Napp.controller(name, fn).

Hope this helps!
You can always go on #angularjs irc channel on freenode: there's always active people ready to help

score 0 · Answer 7 · answered Jun 23 '13 at 12:21

Could it be that your templateUrl points to an invalid template?

When you change the templateUrl to an unexisting file, you will notice that the $routeParams will no longer be populated (because AngularJS detects an error when resolving the template).

I have created a working plnkr with your code for your convenience that you can just copy and paste to get your application working:

http://plnkr.co/edit/Yabp4c9zmDGQsUOa2epZ?p=preview

As soon as you click the link in the example, you will see the router in action.

Hope that helps!

Angular $routeParams is blank

7 Answers7

Linked