Cannot get ui-router state params

Consider the following ui-router configuration:

$stateProvider
  .state('app', {
    url: "/app",
    abstract: true,
    templateUrl: "templates/menu.html",
    controller: 'AppCtrl'
  })
  .state('app.feed', {
    url: "/feed",
    views: {
      'menuContent': {
        templateUrl: "templates/feed.html",
        controller: "FeedCtrl"
      }
    }
  })

I have the following link in my app:

<a ui-sref="app.feed({ feedId: 5 })">My Link</a>

I'm trying to get the feedId in state params:

angular.module('MyApp').controller('FeedCtrl', function($state) {
  console.log($state.params);
});

But, unfortunately, $state.params is always {}.

What am I doing wrong?

BONUS QUESTION

I expect FeedCtrl to be initialised every time I click on the link, i.e. every time the state is changed to app.feed. So, If I change between app.feed state and some other state multiple times, I expect the console.log above to run multiple times. But, it looks like ui-router initialises FeedCtrl only once. Why?

To pass a parameter - we have to define it:

 .state('app.feed', {
    url: "/feed/{feedId}",
    views: {
      'menuContent': {
        templateUrl: "templates/feed.html",
        controller: "FeedCtrl"
      }
    }

In this case we define it as {feedId}

See more here

Some examples:

  • '/user/{id:[^/]*}' - Same as '/user/{id}' from the previous example.
  • '/user/{id:[0-9a-fA-F]{1,8}}' - Similar to the previous example, but only matches if the id parameter consists of 1 to 8 hex digits.
  • '/files/{path:.*}' - Matches any URL starting with '/files/' and captures the rest of the path into the parameter 'path'.
  • '/files/*path' - Ditto. Special syntax for catch all.

In case we do have parameter defined, and we will navigate among states with different feedId values... we will really see, that that controller FeedCtrl is reinstantiated. That's how the ui-router was designed