Handle dynamic set of query string parameters with UI Router

Question

Let's say I have a url that has an exploded object as its query string parameters: "domain.com/example?id=1234&params[a]=hello&params[b]=world&params[foo]=bar //etc etc etc"

How do I configure angular ui-router to accept this dynamic set of query string params?

.state('example', {
    url: '/example?id&params[*]' ??
    ...
});

Answer 1

Here, it seems your params is an associative array.

You can see on this link https://github.com/angular-ui/ui-router/issues/983 comment of christopherthielen

.state('foo', { 
  url: '/foo/:param1?param2',
  params: { param3: null } // null is the default value
});
$state.go('foo', { param1: 'bar', param2: 'baz', param3: { id: 35, name: 'what' } });
$stateParams in 'foo' is now { param1: 'bar', param2: 'baz', param3: { id: 35, name: 'what' } }

And also according to this answer https://stackoverflow.com/a/29792020/1907391

In version 0.2.13, You should be able to pass objects into $state.go,

$state.go('myState', {myParam: {some: 'thing'}})

$stateProvider.state('myState', {
                url: '/myState/{myParam:json}',
                params: {myParam: null}, ...
and then access the parameter in your controller.

$stateParams.myParam;