During a recent coding crunch towards putting on a demo, I was working on the AngularJS client, trying to determine how to pass a value from one state to another in ui-router.

AngularJS has a pretty steep learning curve (you’re being steaped, so to speak), and things like ui-router, while they make some things easier, aren’t necessarily easy to absorb quickly, especially under the gun to get something ready in a quick fashion.

This particular note eluded me for a long time:

As you saw previously the $stateParams service is an object that will have one key per url parameter.

What this means:

Let’s create a rather simple controller with the state of ‘some’ and a url template of ‘/some/:variable’ :

angular.module('someCtrl', ['ui.router'])
  .config(function($stateProvider) {
    $stateProvider.state(
      'some', {
        url: '/some/:variable',
        controller: 'SomeCtrl',
        templateUrl: 'someCtrl.html'
      }
    );
  })
  .controller(
    'SomeCtrl',
    function($scope, $state) {
      // ...
    });

By defining the url variable :variable, you can then pass data to it through $stateParams.variable:

angular.module('OtherCtrl', ['ui.router'])
  .config(function($stateProvider) {
    $stateProvider.state(
      'other', {
        url: '/other',
        controller: 'OtherCtrl',
        templateUrl: 'other.html'
      }
    );
  })
  .controller(
    'OtherCtrl',
    function($scope, $state) {
      $scope.goSomewhere = function($state) {
        $state.go(
          'some',
          { variable: 'hithere' } // this goes into $stateParams for
                                  // state 'some'
        );
      }
    });

When OtherCtrl.goSomewhere is called, it will route to the ‘some’ state, and the ‘hithere’ will be passed in $stateParams.variable field.

HOWEVER the thing that cost me hours is not understanding that what is available in $stateParams must also be somehow defined in the $stateProvider.state configuration’s url template.

'/contacts/:contactId/phones/:phoneId'

maps to:

$stateParams.contactId;
$stateParams.phoneId;

What does NOT work

What you CANNOT do, though, is send through parameters which are NOT in the url template:

$state.go('some', {otherVariable: 'yo, dawg' });

as otherVariable is not defined in the url template for the SomeCtrl controller.


Source