Passing multiple parameters in $stateParams - angularjs

Question

In the ui-router tutorial https://plnkr.co/edit/jbZgIg?p=info, they are passing a single parameter personId to the state.
ui-sref="people.person({ personId: person.id })"
and the state is:
{
name: 'people.person',
url: '/{personId}',
component: 'person',
resolve: {
person: function(people, $stateParams) {
return people.find(function(person) {
return person.id === $stateParams.personId;
});
}
}
}
I am working on an example in which I want to pass 2 parameters (1 visible using the url, and the second hidden which will be the id that the user can't see in the url). Something similar to:
ui-sref="people.person({ personId: person.id, personUri : person.uri })"
and I want the state to become something like this (but it didn't work!):
{
name: 'people.person',
url: '/{personUri}',
component: 'person',
resolve: {
person: function(people, $stateParams) {
return people.find(function(person) {
return person.id === $stateParams.personId;
});
}
}
}
As the state shows, I want to use the personUri in the url, and I want the personId to be passed to the people service.

Answer 1

You can use params
.state('other', {
url: '/:personUri',
params: {
personUri:"",
// this param is not part of url
// it could be passed with $state.go or ui-sref
personId: "",
}
...

Answer 2

Instead of passing your object in url parameters you can simply call your controller's function by passing in your object and then do whatever you want to do with that object in your controller itself and then call your service inside it.
Example:
$scope.func = function info(person){
console.log(person);
PeopleService.xyz(person).then(function(response){
console.log('Service called')
})
}
In html call it like this :
<button ng-click="func(person)"> Click me</button>