Wednesday 31 May 2017

parameters - AngularJS ui router passing data between states without URL



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 ?


Answer



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



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 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: 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:



home

parent

parent.child


Check the example here


No comments:

Post a Comment

c++ - Does curly brackets matter for empty constructor?

Those brackets declare an empty, inline constructor. In that case, with them, the constructor does exist, it merely does nothing more than t...