Angular $routeParams returns empty object

Question

I've been stuck for about a day on a problem that I can't see through.

I have the following code in a users.js.coffee file:

app = angular.module("app", ["ngResource"])
app.config ['$routeProvider', '$locationProvider', ($routeProvider, $locationProvider) ->
  $locationProvider.html5Mode(true)
  $routeProvider.when('/users/:id', {templateUrl: '/users/:id.json', controller: UserCtrl})
  $routeProvider.when('/users/:id/videos', {templateUrl: '/users/:id/videos.json', controller: UserCtrl})
]

app.factory "User", ["$resource", ($resource) ->
  $resource("/users/:id", {id: "@id"}, {
    show: {method: "GET"}, 
    videos: {method: "GET", isArray:true}
    })
]

@UserCtrl = ["$scope", "$location", "$route", "http", "$routeParams", "User", ($scope, $location, $route, $http, $routeParams, User) ->
  console.log($location)//LocationUrl {$$parse: function, $$compose: function, $$rewriteAppUrl: function, $$protocol: "http", $$host: "localhost"…}

  console.log($route)//Object {routes: Object, reload: function}
  console.log($routeParams)//Object {} 

]

Why would $routeParams be an empty object? If I call $route.current.params in a view, it shows the appropriate parameters. But not in the controller. What's more, I can't call $route.current.params in the controller, because "current" isn't yet defined.

this is not related to your question, but i don't think you can use `to_json` when you use `respond_with`. You have to provide an object, and your controller will call the appropriate responder according to the requested format. — m_x, Mar 14 '13 at 09:05
I think you're generally right, unless I need to grab an association like @user.to_json(include: :videos). I just have it there to make it explicit until I can figure out why I'm not getting the appropriate response. — jflores, Mar 14 '13 at 13:29
the preferred way to include associations in a json response is to override `as_json` in your model. As to your problem, can you set your browser to log xhr requests (chrome does it) and post here exactly what comes back and forth ? — m_x, Mar 14 '13 at 14:52
Ah, you're right. My mistake. I set the browser to log xhr requests and the object returned is a JSON array of all of my users. I'll post an example above (but not the actual user data). — jflores, Mar 14 '13 at 23:51
It occurred to me - is it allowed for me to call a JSON object in templateURL? Everything I've read shows partial HTML files being called... — jflores, Mar 15 '13 at 00:09

score 7 · Answer 1 · answered Jun 28 '13 at 20:10

7

I had the same problem. The routing won't work if there is no ng-view. Just had a ng-view you'll get your $routeParams.

regards

answered Jun 28 '13 at 20:10

Yop44

118
1
7

score 2 · Answer 2 · edited May 23 '17 at 11:53

If you are using an external controller to the routed-to ng-view controller (like a topbar, or page controller), the you'll need to subscribe to the '$routeChangeSuccess' emit message.

The route change success is asynchronous if you aren't the receiving controller. This SO answer gives a more complete answer: $routeParams is empty in main controller

but this is the tldr;

$scope.$on('$routeChangeSuccess', function() {
  // $routeParams should be populated here
});

score 1 · Answer 3 · answered May 28 '14 at 01:02

It looks like $routeParams is not available at controller initialization time to controllers outside of those routed via $routeProvider / ng-view. (At least in angular 1.0.8)

If you want to access the route parameters in those outer controllers you can use $location.search().<param_name>

score 0 · Answer 4 · answered Jun 03 '13 at 02:56

Your routes are pointing to your api route. They should be a path to the template to render instead:

@App = angular.module('app',['ngResource'])
  .config(['$routeProvider'], ($routeProvider) ->
    $routeProvider
      .when('/users',
        templateUrl: 'users/index.html',
        controller: 'UsersIndexCtrl')
      .when('/users/:id',
        templateUrl: 'users/show.html',
        controller: 'UsersShowCtrl')
      .otherwise(
        redirectTo: '/users'
    )])

Then, say, your users index controller would probably look like:

App.controller 'UsersIndexCtrl',['$scope','$location','User', ($scope, $location, User) ->

  $scope.users = User.query()

  $scope.onClickHandlerToRoute = (user)->
    $location.path "path/to/show/user/#{user.id}"

You don't need to inject $http as you are already using the ngResource REST abstraction.

Angular $routeParams returns empty object

4 Answers4