parameters - AngularJS ui router passing data between states without URL

itemprop="text">

I am facing this problem of passing
data between two states without exposing the data in the url, it's like user cannot
really directly land on this state.

For
example.
I have two states "A" and "B".

I am doing some
server call in state "A" and passing the response of the call
to state "B".
The response of the server call is a string message, which is quite long, so i cannot
expose that in the url.

So is there any way in
angular ui router to pass data between states, without using url params
?

style="font-weight: bold;">

Answer

We can use params,
new feature of the
UI-Router:

href="http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$stateProvider"
rel="noreferrer">API Reference / ui.router.state /
$stateProvider

params A map which optionally configures parameters
declared in the url, or defines additional non-url parameters. For each parameter being
configured, add a configuration object keyed to the name of the
parameter.

See the
part: "...or defines additional non-url parameters..."

So the state def would
be:

$stateProvider

            .state('home', {
 url: "/home",

 templateUrl:
            'tpl.html',
 params: { hiddenOne: null, }

            })

Few examples form
the href="http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$stateProvider"
rel="noreferrer">doc mentioned
above:

// define a
            parameter's default value
params: {
 param1: { value: "defaultValue"
            }

}
// shorthand default values
params:
            {
 param1: "defaultValue",
 param2:
            "param2Default"
}

// param will be array
            []
params: {
 param1: { array: true
            }

}

// handling the default value in
            url:
params: {
 param1: {
 value: "defaultId",

            squash: true
} }
// squash "defaultValue" to "~"
params:
            {

 param1: {
 value: "defaultValue",
 squash:
            "~"
 }
            }

EXTEND - working
example: rel="noreferrer">http://plnkr.co/edit/inFhDmP42AQyeUBmyIVl?p=info

Here
is an example of a state
definition:

            $stateProvider
 .state('home', {
 url: "/home",
 params :
            { veryLongParamHome: null, },
 ...
 })
 .state('parent',
            {
 url: "/parent",
 params : { veryLongParamParent: null,
            },
 ...

 })
 .state('parent.child', {
            
 url: "/child",
 params : { veryLongParamChild: null, },

            ...
 })

This
could be a call using
ui-sref:

            ui-sref="home({veryLongParamHome:'Home--f8d218ae-d998-4aa4-94ee-f27144a21238'

            })">home

parent

parent.child

Check
the example rel="noreferrer">here