Complete Guide to Parameter Passing in AngularJS UI-Router: Deep Dive into $state.go, toParams and $stateParams

Overview of UI-Router Parameter Passing Mechanism

AngularJS UI-Router provides powerful state management capabilities, with parameter passing being a core feature for data sharing between states. In practice, developers often encounter issues with undefined $stateParams or missing parameter values, typically resulting from misunderstandings of parameter configuration mechanisms.

Basic Configuration of URL Parameter Mapping

According to the best practice answer, the simplest parameter passing solution is achieved through URL parameter mapping. When parameters need to be passed between states, they should be explicitly declared in the state definition:

$stateProvider.state('toState', {
  url: '/toState?referer',
  templateUrl: 'wokka.html',
  controller: 'stateController'
});

This configuration ensures that the referer parameter is correctly passed through the URL query string. When using $state.go for state transitions:

$state.go('toState', {referer: $state.current.name});

The parameter is automatically encoded into the URL and becomes accessible in the target state's controller via the $stateParams service:

app.controller('stateController', function($scope, $stateParams) {
  console.log($stateParams.referer); // Outputs the passed referer value
});

Importance of Parameter Type Matching

Supplementary answers emphasize the critical role of parameter type consistency. UI-Router requires that the params configuration in state definitions completely matches the structure of the toParams object passed to $state.go.

When defining parameters using object notation:

$stateProvider.state('view', {
  templateUrl: 'overview',
  params: {'index': null, 'anotherKey': null},
  controller: 'overviewController'
});

The corresponding parameter passing must also use object format:

$state.go('view', { 'index': 123, 'anotherKey': 'This is a test' });

Parameters are accessed in the controller via property names:

app.controller('overviewController', function($scope, $stateParams) {
  var index = $stateParams.index;
  var anotherKey = $stateParams.anotherKey;
});

Advanced Usage of Non-URL Parameters

For parameters that don't need to be exposed in the URL, use params configuration without defining a url property:

$stateProvider.state('toState', {
  templateUrl: 'wokka.html',
  controller: 'stateController',
  params: {
    'referer': 'some default', 
    'param2': 'some default', 
    'etc': 'some default'
  }
});

This approach allows passing sensitive data or temporary state information while maintaining clean URLs. The parameter passing syntax remains the same:

$state.go('toState', { 'referer': 'jimbob', 'param2': 37, 'etc': 'bluebell' });

Parameter Passing with UI-Sref Directive

In HTML templates, the same parameter passing functionality can be achieved using the ui-sref directive:

<a ui-sref="toState(thingy)" class="list-group-item" ng-repeat="thingy in thingies">{{ thingy.referer }}</a>

Where the thingy object should contain property structures matching the state parameter definitions.

Common Issues and Debugging Techniques

When encountering undefined $stateParams, check the following key points:

• Whether the params configuration in state definition matches the structure of passed parameter objects
• Whether the $stateParams service is correctly injected in the target state's controller
• Whether parameter name spellings exactly match
• For URL parameters, whether URL parameter mappings are correctly declared in state definitions

Using console.log to output the $stateParams object can help diagnose parameter passing issues:

app.controller('stateController', function($scope, $stateParams) {
  console.log('Received parameters:', $stateParams);
});

Best Practices Summary

Based on community experience and official documentation, the following parameter passing best practices are recommended:

1. Prefer URL parameter mapping for state-to-state parameter passing to facilitate bookmarking and sharing
2. Maintain type consistency between parameter definition and passing (object to object, array to array)
3. Set reasonable default values for parameters to enhance code robustness
4. Establish unified parameter naming conventions in team development
5. For complex object parameters, consider using services for state management instead of parameter passing

By following these guidelines, developers can fully leverage UI-Router's powerful state management capabilities to build more stable and maintainable AngularJS applications.