$state.go to state with URL parameter

Issue

I have a state with url parameter.
Something like:

.state('MyState', {
    url: '/contacts/{personName}',
    templateUrl: '/app/templates/contacts.html',
    controller: 'ContactsController',
    params: {
        personName: null
    }
})

now, I want to use the $state.go syntax and to be able to pass the personName param to the url with the parameter.

So for example, if I call:

$state.go('MyState', {personName: 'john'});

The address bar will show: http://localhost:8080/#!/contacts/john

Right now the address bar is showing http://localhost:8080/#!/contacts/ and I don’t know how to force the url to contain the personName. Other than that it works fine.

Solution

Just add your parameters with a default value on your state definition. Your state can still have an Url value.

   $stateProvider.state('MyState', {
        url : '/url',
        templateUrl : "/app/templates/contacts.html",
        controller : 'ContactsController',
        params: {personName: 'defaultName'}
    });

and add the param to $state.go() and navigate

$state.go('MyState',{personName: "MIT"});

Refer this:$state.go() with Parameter

Hope it helps..!

Answered By – Kishor Velayutham

Answer Checked By – Pedro (AngularFixing Volunteer)